IMAGE HANDLING EXAMPLES

This page explains how to properly use images on websites, to ensure fast loading pages and does not use any styles on purpose to keep the code as clean as possible. 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.

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.

• 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")

• 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