We have a fairly heavy set of pages because of the amount of image content, and I'm looking for a way to improve loading. This appears to load a blurred lo-res image first followed by the higher res.
The question(s) I have is -
1. Is this something I can do automatically with image processor (ie, the image generation) if so, any pointers would be awesome.
If not automatically, does anyone have suggestions as how to best implement this, I don't want to force our content people to go back through several thousand pages to make updates if I can avoid it.
Hi John
I wanted to do this too, so I wrote some javascript.
The image src is set to the smallest size on load and then the javascript goes through and replaces each image with the higher res image that the path is stored in a data attribute.
Hi Paul, I looked at that, and it is pretty close to what I am wanting to do. What I am really looking for is a way to automatically create the lower resolution (and hence smaller byte-size) image as well... I too am looking at ImageProcessor, but have not been able to get the image super-small.
I'm curious, where you implemented it - what parameters for imageprocessor to create the low-res ones?
I fiddled with using ImageProcessor for generating the low res placeholders, but wasn't happy with the trade-off between size and quality - to get really small, the images were ridiculously low res and looked messy.
To sort that, I built a package that generates low polygon svg previews for a given image - I can then render that inline as the placeholder, which removes the server roundtrip for the image. That lives over at https://github.com/nathanwoulfe/PrimitivePlaceholders
Nope, backoffice is all javascript - leans heavily on a couple of other projects in the same space (most of the math is way over my head).
I could add a property value converter to aid with rendering, but that adds a heap of weight to the package/build process which I'd rather avoid (for now at least).
I've wanted to do this sort of thing for a while. I love primitive, but as a Go program it wasn't that usable in this scenario. Now that it has been ported to javascript and you've brought it into Umbraco it's the perfect combination. Thank you for this.
"lazy load images" low-res to hi-res
Just wondering if anyone has implemented something like this?
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
We have a fairly heavy set of pages because of the amount of image content, and I'm looking for a way to improve loading. This appears to load a blurred lo-res image first followed by the higher res.
The question(s) I have is - 1. Is this something I can do automatically with image processor (ie, the image generation) if so, any pointers would be awesome.
Hi John I wanted to do this too, so I wrote some javascript. The image src is set to the smallest size on load and then the javascript goes through and replaces each image with the higher res image that the path is stored in a data attribute.
Take a look https://codeshare.co.uk/blog/lazy-loading-images/
Kind regards
Paul
Hi Paul, I looked at that, and it is pretty close to what I am wanting to do. What I am really looking for is a way to automatically create the lower resolution (and hence smaller byte-size) image as well... I too am looking at ImageProcessor, but have not been able to get the image super-small.
I'm curious, where you implemented it - what parameters for imageprocessor to create the low-res ones?
Hey John
I've just finished implementing similiar, using https://github.com/aFarkas/lazysizes
I fiddled with using ImageProcessor for generating the low res placeholders, but wasn't happy with the trade-off between size and quality - to get really small, the images were ridiculously low res and looked messy.
To sort that, I built a package that generates low polygon svg previews for a given image - I can then render that inline as the placeholder, which removes the server roundtrip for the image. That lives over at https://github.com/nathanwoulfe/PrimitivePlaceholders
Looks interesting Nathan, is there no c# backoffice code to do the rendering?
Nope, backoffice is all javascript - leans heavily on a couple of other projects in the same space (most of the math is way over my head).
I could add a property value converter to aid with rendering, but that adds a heap of weight to the package/build process which I'd rather avoid (for now at least).
What a great idea Nathan
I've wanted to do this sort of thing for a while. I love primitive, but as a Go program it wasn't that usable in this scenario. Now that it has been ported to javascript and you've brought it into Umbraco it's the perfect combination. Thank you for this.
Kind regards
Paul
I'm not even going to pretend I understand half of what's going on in the Primitive stuff, but it's awesome!
Guys,
Jeavon has made already an awesome (nuget) package which solves this issue.
Version 2 of Slimsy works perfectly (lazysizes with imageprocessor). Github Slimsy
Slimsy Package on our
Have been using this for a few months now. Works excellent. Way to go for me.
Hope this helps. Check out github for all the documentation.
Cheers, Arjan
Yup, Slimsy is fantastic, it just didn't do what I needed in the way I needed it.
is working on a reply...