Srcset Generator

Enter the base name of your image, the widths you exported it at and how wide it shows on the page, and get a complete img tag with srcset, sizes, width, height and lazy loading. Phones then download a small file and large screens a sharp one, which is one of the simplest ways to make an image-heavy page load faster.

What you enter

  • Image base name or path
  • Format
  • Widths you exported (pixels)
  • Sizes
  • Alt text
  • Aspect ratio width
  • Aspect ratio height
  • Lazy load (not for the first image on the page)

How it works

  1. Export your image at several widths and name the files with the width at the end, such as hero-480.webp, hero-800.webp and hero-1200.webp.
  2. Type the base name (hero, or a path such as images/hero), choose the format and list the widths. Order and duplicates do not matter.
  3. Describe the display width in the sizes box, for example '(max-width: 768px) 100vw, 50vw' for an image that fills phones and half of larger screens.
  4. Set the aspect ratio so width and height are written into the tag, then copy the HTML into your page.

Width descriptors versus density descriptors

srcset accepts two kinds of description. Width descriptors (480w, 800w) state the real pixel width of each file and work together with sizes, which suits images that change size with the layout. Density descriptors (1x, 2x) say which file to use on standard and high-density screens and suit images shown at one fixed size, such as a logo.

Mixing the two in one srcset is not allowed, and using width descriptors without sizes makes the browser assume the image fills the whole screen width. That second mistake is common and quietly sends large files to every visitor, so always pair w descriptors with an honest sizes value.

Checking that the right file loads

Open the page in a desktop browser, open the developer tools and look at the network list for images, then narrow the window and reload. A smaller file should load at narrow widths. Some browsers keep a larger file they already have instead of downloading a smaller one, so test in a private window or with the cache turned off.

If the largest file always loads, check sizes first: a missing or over-large value is the usual cause. Then check that the numbers in srcset match the real widths of the files; a file named hero-800 that is really 1600 pixels wide still downloads at 1600.

Tips

  • Three to five widths are usually enough. Each extra width is another file to export and store, with smaller and smaller savings.
  • Include a width about twice the largest display size for sharp images on high-density screens. An image shown 600 pixels wide needs a 1200 pixel file for those screens.
  • Leave lazy loading off for the main image at the top of the page. It should start downloading at once; lazy loading suits images further down.
  • If sizes is wrong, the browser picks the wrong file. Measure how wide the image really displays at a few screen widths before you write it.

Frequently asked questions

What do srcset and sizes do?

srcset lists the files with their real widths, written as 'file 800w'. sizes tells the browser how wide the image will be shown. The browser multiplies the display width by the screen's pixel density and downloads the smallest file that is at least that wide. With sizes='50vw' on a 1000 pixel wide screen at 2x density, it needs 1000 pixels and picks the 1200w file if the next smaller one is 800w.

Why add width and height?

They let the browser reserve the right amount of space before the image arrives, so text below it does not jump when it loads. The tool writes the largest width and the height that matches your aspect ratio; CSS such as max-width: 100%; height: auto; still makes the image shrink to fit.

Which file is used as src?

The largest width. Browsers that understand srcset ignore src when choosing, and the rare one that does not will show a sharp image instead of a blurry one.

What sizes value should I use for a full-width image?

Use 100vw. For an image inside a content column that stops at 800 pixels, use '(max-width: 800px) 100vw, 800px', which reads as: on screens up to 800 pixels wide the image is the full screen width, otherwise it is 800 pixels.

Does this resize my images?

No. It writes the HTML for files you have already exported. Use an image compressor or your design tool to export each width.

Related: Image compressor, WebP converter, Aspect ratio calculator.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Free Tools

Product

Who It's For

Features

Resources

Company

View Sitemap