One of the most common causes of slow mobile page loads is serving heavy desktop hero images to small smartphones. Smartphone devices use excessive battery and cellular data downloading thousands of excess pixels they don't even have the monitor space to display. The solution is native adaptive layouts using srcset.

The Old, Legacy Way

html <!-- ❌ Serving the exact same heavy file to everyone --> <img src="huge-hero-2560px.jpg" alt="Our product banner" />

The Clean, Responsive Way

Using the srcset and sizes HTML attributes allows you to declare a list of different-sized source files. The web browser evaluates the user's active screen width and automatically picks only the most efficient image file to download:

html <img src="hero-600px.jpg" srcset="hero-600px.jpg 600w, hero-1200px.jpg 1200w, hero-2000px.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw" alt="Adaptive responsive product banner" />

Breaking Down the Math

  • `srcset="..."`: Provides a list of available files and their exact width in pixels (600w, 1200w, 2000w). Note: Use w instead of px here!
  • `sizes="..."`: Tells the browser how much screen space the image actually takes up in your grid layout (e.g., 100vw for full-screen on mobile, 50vw for dual-column desktop arrays).

Using this setup, a phone with a narrow screen will automatically bypass the heavy hero-2000px.jpg and load only hero-600px.jpg, saving bytes, lowering server bills, and speeding up Core Web Vitals score!