WebDev: Image handling examples for fast loading websites

Understand how to use images, image dimensions and lazy load on websites properly to ensure freaking fast loading pages.

This page explains how to properly use images on websites, to ensure fast loading pages. Below example uses own version of images per each break point rather dann resizing images per html or CSS only.

Each image conatiner will then contain 21 versions of an image: in 5 dimensions as we have 5 break points; 5x webP image format for modern browsers, both formats (JPEG/ PNG and webP) optimized for retina displays and one fall-back image for older browsers which do not support picture tag.

Version 3 and 8 contain build-in microdata format for structured data markups.

Different versions on how to handle images on websites:

1. IMG tag, no lazy load
2. IMG tag + native lazy load + lazy load by Lazysizes
   1. IMG tag + native lazy load + lazy load by Lazysizes – resolution switching: Same size, different resolutions
   2. IMG tag + native lazy load + lazy load by Lazysizes – resolution switching: by different sizes
3. IMG tag + native lazy load + lazy load by Lazysizes + Microformat Schema for image SEO
4. IMG tag to PICTURE tag + webP, no lazy load
5. PICTURE tag + webP + native lazy load + lazy load by Lazysizes
6. PICTURE tag + webP + responsive/ scaled images, no lazy load
7. PICTURE tag + webP + native lazy load + lazy load by Lazysizes + responsive/ scaled images
8. PICTURE tag + webP + native lazy load + lazy load by Lazysizes + responsive/ scaled images + Microformat Schema for image SEO

• 3. should be used when using “img” tag.
• 8. should be used when using “picture” tag.
• above other bullet points are just intermediate steps to better understand the end result.
• Download image handling package in ZIP file format

Demo Video: Responsive/ Scaled Images

Requirements:

• Native lazy load – (loading=”lazy”)
• Lazy load of images by Lazysizes, for older browsers – (class=”lazyload”)
• Create web ready images and compress them
• Displays images with incorrect aspect ratio
• webP image formats – (picture tag and type=”image/webp”)
• Responsive/ scaled images in 5 different dimensions as we use 5 breakpoints – (img tag: sizes=”XXvw”; picture tag: (min-width: XXpx) and (max-width: YYpx))
• Optimize reg Cumulative Layout Shits – (adding image dimensions: width/ height to each image per breakpoint)
• ALT + title tags on images + “description of the image”
• Optimize with structured data markups in Microdata format – (adding itemtype=”https://schema.org/ImageObject”)

Sources:

• https://web.dev/use-lazysizes-to-lazyload-images/
• https://web.dev/uses-optimized-images/
• https://web.dev/image-aspect-ratio/
• https://web.dev/serve-images-webp/
• https://web.dev/serve-responsive-images/
• https://web.dev/optimize-cls/
• https://schema.org/ImageObject