Save Bandwidth with srcset and sizes in <img> Tags — and Even Improve SEO a Bit

The Problem We Had Before srcset and sizes

Imagine you have a big photo on your website that’s 1200 pixels wide.

That photo looks great on big screens.

But what about on a small phone screen?

• The phone only needs the photo to be about 400 pixels wide.
• But if we use a single <img> tag, the phone still downloads the big 1200-pixel file.

This causes problems:

• Mobile users waste data downloading big images.
• Pages load slower on mobile.
• Websites feel slow or sluggish ;)

This is why we needed a way to:

• Load smaller images on small screens.
• Load bigger, sharper images on big or high-resolution screens.

1. How srcset Helps

srcset Let's you tell the browser:

“I have several versions of this image. Pick whichever one fits the screen best.”

Example:

<img
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w
  "
  src="photo-1200.jpg"
  alt="Beautiful landscape"
/>

This means:

• photo-400.jpg → 400 pixels wide
• photo-800.jpg → 800 pixels wide
• photo-1200.jpg → 1200 pixels wide

The browser can choose the best size for each screen.

But wait… There’s Still a Problem Without sizes

If you only write srcset like the above,

The browser doesn’t know how big the image will display on the page.

So it guesses that the image will show at full size (1200px wide). Even on mobile!

That means:

• The phone might still download the 1200-pixel image.
• Bandwidth is wasted again.

We need a way to tell the browser: “This image won’t always show full size. On small screens, it will be smaller.”

2. How sizes Helps

sizes tells the browser:

“Here’s how wide this image will appear on different screens.”

So the browser can:

• Pick the smallest file big enough for the space.
• Save bandwidth on mobile.
• Make pages load faster.

Example: srcset + sizes Together

Here’s a perfect example:

<img
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  src="photo-1200.jpg"
  alt="Beautiful landscape"
/>

Let’s read this in simple way:

1 -> (max-width: 768px) 100vw

• If the screen is 768 pixels wide or smaller (like a mobile phone):
• The image will show the full width of the screen (100% of the viewport width).

2 -> 50vw

• On bigger screens:
• The image will show at half the screen’s width (50% of the viewport width).

How the Browser Decides?

1) On a mobile screen (like 375px wide):

• → The browser sees the image as about 375px wide. → Picks photo-400.jpg.
• So …. Saves bandwidth!

2) On a desktop screen (like 1440px wide):

• → The browser sees the image will be about 720px wide (half of 1440). → Picks photo-800.jpg.
• And … still saves bandwidth compared to always loading 1200px!

What Happens If You Skip sizes?

If you omit sizes, like this:

<img
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w
  "
  src="photo-1200.jpg"
  alt="Beautiful landscape"
/>

• The browser assumes the image might be shown at full size (1200px).
• Even on a mobile screen, it might load the big file unnecessarily.

That’s why sizes is super important

Now that you understand **srcset and `sizes` in plain HTML… let’s see how Next.js** makes this much easier for us!

How Next.js Helps With Responsive Images

Next.js gives us the special **<Image /> component.Next.js does all the hard work automatically.**

Instead of writing complicated HTML, we just write:

import Image from 'next/image';

<Image
  src="/photo.jpg"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Beautiful landscape"
/>

That’s it! … yes … without srcset …Let’s break it down and see what the Next can do for us:

1. Automatically Creates Different Sizes

When we use <Image />, Next.js:

• Takes our original image
• Automatically creates many smaller versions:
• e.g. 640px wide
• 1080px wide
• 1200px wide

So we don’t have to make these files ourselves.

2. Writes the srcset for You

Next.js generates HTML like this behind the scenes:

<img
  srcset="
    /_next/image?url=%2Fphoto.jpg&w=640&q=75 640w,
    /_next/image?url=%2Fphoto.jpg&w=1080&q=75 1080w,
    /_next/image?url=%2Fphoto.jpg&w=1200&q=75 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  src="/_next/image?url=%2Fphoto.jpg&w=1200&q=75"
  width="1200"
  height="800"
  alt="Beautiful landscape"
/>

You don’t have to write that yourself.

3. Uses Modern Image Formats

Next.js can automatically convert images to newer formats like:

• WebP
• AVIF

These formats are smaller in file size than JPG or PNG.

Your images load faster and save bandwidth!

4. Lazy Loads Images

Next.js images are lazy-loaded by default. This means:Images don’t load until the user scrolls close to them … so Helps pages load faster!

5. Prevents Layout Shifts

When you give Next.js an image’s width and height, like this:

<Image
  src="/photo.jpg"
  width={1200}
  height={800}
  alt="Beautiful landscape"
/>

Next.js calculates the aspect ratio (e.g. 3:2) , It reserves space in the page layout.This prevents content from jumping around as images load.

Next.js also has a fill layout for images that should stretch to fill a container.

What about Nuxt?

Nuxt.js is to Vue.js what Next.js is to React. And Nuxt Image does the same job as Next.js <Image />:

• Automatically generates different image sizes
• Writes srcset and handles sizes for you
• Converts images to modern formats like WebP and AVIF
• Lazy loads images
• Prevents layout shifts

<NuxtImg
  src="/photo.jpg"
  width="1200"
  height="800"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Beautiful landscape"
/>

Works exactly like Next.js:

• Generates optimized images
• Handles srcset and sizes