Srcset examples for clean responsive image delivery.

Basic responsive JPG example

The simplest useful pattern is an img tag with multiple widths in srcset and a matching sizes rule. The browser chooses the best file for the visitor’s screen and layout.

<img
  src="/images/article-800.jpg"
  srcset="/images/article-480.jpg 480w,
          /images/article-800.jpg 800w,
          /images/article-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="Descriptive alt text"
  width="1200"
  height="800"
  loading="lazy">

WebP with JPG fallback

For a more complete setup, combine picture, WebP sources, JPG fallback, explicit dimensions, and lazy loading for non-hero images.

<picture>
  <source
    type="image/webp"
    srcset="/images/article-480.webp 480w,
            /images/article-800.webp 800w,
            /images/article-1200.webp 1200w"
    sizes="(max-width: 700px) 100vw, 700px">
  <img
    src="/images/article-800.jpg"
    srcset="/images/article-480.jpg 480w,
            /images/article-800.jpg 800w,
            /images/article-1200.jpg 1200w"
    sizes="(max-width: 700px) 100vw, 700px"
    alt="Descriptive alt text"
    width="1200"
    height="800"
    loading="lazy">
</picture>

Hero image example

Hero images are often visible immediately, so they normally should not be lazy loaded. Use an appropriate fetch priority when the image is truly important to the first screen.

<img
  src="/images/hero-1200.jpg"
  srcset="/images/hero-640.jpg 640w,
          /images/hero-1200.jpg 1200w,
          /images/hero-1600.jpg 1600w"
  sizes="100vw"
  alt="Descriptive hero image text"
  width="1600"
  height="900"
  fetchpriority="high">

Common mistakes

• Using srcset but forgetting sizes.
• Uploading several dimensions but making them visually identical in file size.
• Lazy loading the main hero image when it is needed immediately.
• Leaving out width and height attributes.
• Mixing uppercase and lowercase filenames between the server and HTML.

Recommended naming pattern

Bottom line

Good responsive image markup is practical, not fancy. Give the browser real choices, describe the layout with sizes, preserve fallbacks, and keep filenames predictable. That gives visitors faster pages without making the site harder to maintain.