Don't Load Extra

Forcing phone user to download 5MB image (for 4K monitor) is a crime against performance.

1. srcset Attribute

Browser will itself choose the right image depending on pixel density (Retina) and screen width.

<img src="small.jpg" 
     srcset="medium.jpg 600w, large.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw">

2. <picture> Tag

Used when you need not just replace size, but completely change image composition (Art Direction) or format (e.g., WebP for new browsers).

<picture>
  <source srcset="logo-mobile.png" media="(max-width: 480px)">
  <img src="logo-desktop.png" alt="Logo">
</picture>