{"id":69,"date":"2021-01-15T16:18:01","date_gmt":"2021-01-15T15:18:01","guid":{"rendered":"https:\/\/dross.net\/alexander\/blog\/?p=69"},"modified":"2021-03-15T19:15:11","modified_gmt":"2021-03-15T18:15:11","slug":"image-handling","status":"publish","type":"post","link":"https:\/\/dross.net\/alexander\/blog\/image-handling\/","title":{"rendered":"WebDev: Image handling examples for fast loading websites"},"content":{"rendered":"[vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”2\/3″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” bg_image_animation=”none”][vc_column_text]Understand how to use images, image dimensions and lazy load on websites properly to ensure freaking fast loading pages.
\n
\nThis 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.<\/p>\n

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.<\/p>\n

Version 3 and 8 contain build-in microdata format for structured data markups.<\/p>\n

Different versions on how to handle images on websites:<\/h2>\n
    \n
  1. IMG tag, no lazy load<\/a><\/li>\n
  2. IMG tag + native lazy load + lazy load by Lazysizes<\/a>\n
      \n
    1. IMG tag + native lazy load + lazy load by Lazysizes – resolution switching: Same size, different resolutions<\/a><\/li>\n
    2. IMG tag + native lazy load + lazy load by Lazysizes – resolution switching: by different sizes<\/a><\/li>\n<\/ol>\n<\/li>\n
    3. IMG tag + native lazy load + lazy load by Lazysizes + Microformat Schema for image SEO<\/strong><\/a><\/li>\n
    4. IMG tag to PICTURE tag + webP, no lazy load<\/a><\/li>\n
    5. PICTURE tag + webP + native lazy load + lazy load by Lazysizes<\/a><\/li>\n
    6. PICTURE tag + webP + responsive\/ scaled images, no lazy load<\/a><\/li>\n
    7. PICTURE tag + webP + native lazy load + lazy load by Lazysizes + responsive\/ scaled images<\/a><\/li>\n
    8. PICTURE tag + webP + native lazy load + lazy load by Lazysizes + responsive\/ scaled images + Microformat Schema for image SEO<\/strong><\/a><\/li>\n<\/ol>\n