Thread by @unicodeveloper

Day 13: Lazy loading of images is something every frontend developer know about and implement very often in their projects.

High-quality images often requires longer page loading times, which can cause users to leave. #25DaysOfMediaMagic

You can use @cloudinary to generate low quality image placeholders that displays to save bandwidth and loading time when lazy-loading images.

This way, your heavy high quality images only shows when the user is within the viewport. #25DaysOfMediaMagic

@cloudinary Check out this low quality image.

res.cloudinary.com/demo/image/upl…

I'll show you a blurry version of this image in the next tweet #25DaysOfMediaMagic

@cloudinary Now, check out the blurry version of this low quality image.

I simply applied `e_blur` transformation parameter with a value of 1000; `e_blur:1000`

res.cloudinary.com/demo/image/upl… #25DaysOfMediaMagic

@cloudinary You can also use an SVG placeholder by invoking the `e_vectorize` parameter like so:

"res.cloudinary.com/demo/image/upl…" #25DaysOfMediaMagic

@cloudinary There are many options for Low Quality Image Placeholders processing such as:

- Using JavaScript to make it happen.
- Using HTML5 <img> tag with `srcset` and `sizes` attributes.

This article explains different options and how to use @cloudinary with them...#25DaysOfMediaMagic

@cloudinary Check out the excellent article here:

cloudinary.com/blog/low_quali…

#TGIF #25DaysOfMediaMagic 🔥🚀