HTML : img / picture

img

<img src="cat.jpg" loading="lazy" />

=> The web page may not load the image immediately, but only when the user triggers an event to view the image.

 

<img
srcset="cat-small.jpg 500w, cat-medium.jpg 1000w, cat-large.jpg 2000w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1400px"
src="cat-small.jpg" />

=> The browser shows the optimized picture according to the status of the web page the user is viewing (considering size, sharpness, etc.).

 

picture

<picture>
  <source srcset="/cat-vertical.jpg"
      media="(orientation: portrait)"> or "(min-width: 800px)"
  <source srcset="/cat-horizontal.jpg" media="(orientation: landscape)"> or "(min-width: 500px)" "(min-height)"

  <img src="/cat-default.jpg">
</picture>

or

media="(orientation: portrait) and (min-width: 800px)"

⇒ You can decide which photos to show according to the vertical/horizontal attributes.

⇒ You can decide which photos to show when none of the above properties apply.

 

other media attributes

=> Photos to show in dark mode

<picture>
   <source srcset="dark-cat.jpg" media="(prefers-color-scheme: dark)" >
   <img src="light-cat.jpg">
</picture>

⇒ Photos according to screen resolution

<picture>
   <source srcset="cat.jxl" type="image/jxl" >
   <source srcset="cat.webp" type="image/webp" >
   <source srcset="cat.avif" type="image/avif" >
   <img src="cat.jpg">
</picture>

 

WEBP vs JPEG vs AVIF

Average WebP file size is 25% to 34% smaller compared to a JPEG file of equivalent quality.

WEBP is designed to replace JPEG, PNG and GIFs.

 

AVIF is derived from the AV1 video codec. In some tests, AVIF has been able to save 50% to file sizes compared to JPEG, with similar perceptual quality.

 

AVIF supports animations, so it can replace GIFs, PNGs

 

https://www.youtube.com/watch?v=8EWwyAcqR6o