WebDev: Image handling examples for fast loading websites

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.

WebDev: Image handling examples for fast loading websites

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

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:

Questions? Contact me!

contact