Image Placeholder Generator

This is a package, that creates base64 uri's for tiny versions of your images.

The base64 uri's, are especially useful if you want to lazyload or progressively enhance your images, as they are a somewhat lightweight representantion of what your image looks like.

Check out blogposts for more info about the blur-up technique:
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

Usage

The package adds new extensions for IPublishedContent and the UrlHelper. You can then use it in your template, wherever you need to add a base64 uri of your image like this:

<img src="@media.GetPlaceholderUri()"> or <img src="@Url.GetPlaceholderUri("~/path-to/image.jpg")">

Both extensions allow you to input a maxWidth and maxHeight parameters for controlling the size of your placeholder image. The default is max 4x4 pixels.

<img src="@media.GetPlaceholderUri(1,1)"> or <img src="@Url.GetPlaceholderUri("~/path-to/image.jpg",0,0)">

On the IPublishedContent extension, you can also specify a propertyAlias, if the image you need a placeholder for, is not contained in the umbracoFile property.

<img src="@media.GetPlaceholderUri(propertyAlias: "someProperty")">

How it works

The GetPlaceholderUri methods, loads the image referenced with ImageProcessor, then resizes it to your desired max width and height, and returns a base 64 uri of the image. The base64 uri, is then cached so you don't need to generate the image on every request.

Roadmap

• Ability to handle crops, both Umbraco-defined, and developer defined crops using Umbracos Image Cropper editor.
• Dashboard for creating and checking the cache status for all media.