Modern Image Delivery: Formats, Responsive Images, Compression, and Performance

How modern image delivery works

A traditional image implementation may provide one large file to every visitor. The browser downloads that file even when CSS displays it at a much smaller size. A 2400-pixel-wide photograph, for example, may still be downloaded in full when it appears inside a 600-pixel content column.

Modern delivery separates the source image from the version a visitor receives. A website may generate several widths and formats from one high-quality source. HTML then gives the browser enough information to choose an appropriate candidate.

An effective system considers several related decisions:

• Content: Is the image a photograph, illustration, logo, icon, diagram, or interface screenshot?
• Displayed dimensions: How much page space does the image occupy at each layout width?
• Pixel density: Does the display need a higher-resolution candidate to remain sharp?
• Format support: Which formats can the browser decode?
• Compression: How much image data can be removed without inappropriate visual degradation?
• Loading priority: Is the image immediately visible, or does it appear farther down the page?
• Meaning: Does the image require alternative text or another accessible description?

The browser normally makes the final responsive-image selection. Authors provide valid candidates and accurate layout information rather than attempting to identify every possible device.

Choosing an image format

No single image format is best for every situation. Format selection should follow the image’s visual characteristics, transparency requirements, browser support needs, and role on the page.

WebP and AVIF are valuable options, but using a modern format does not automatically make an image well optimized. Dimensions, encoding settings, visual complexity, metadata, and loading behavior still affect performance.

SVG is also different from the raster formats in the table. It describes shapes and paths rather than storing a fixed grid of pixels. This makes it well suited to many logos and diagrams, but not usually to detailed photographic content.

Use content as the starting point

• Use a photographic format for photographs rather than saving them as large PNG files.
• Consider SVG for simple artwork that should scale cleanly.
• Use transparency only when the design actually requires it.
• Test screenshots and graphics containing text carefully; aggressive lossy compression may make fine edges difficult to read.
• Retain fallbacks when the supported audience or publishing environment requires them.

Responsive images with srcset and sizes

Responsive image markup lets a browser choose among several versions of the same image. For flexible page layouts, this commonly involves the srcset and sizes attributes on an img element.

<img
  src="/images/workshop-960.jpg"
  srcset="
    /images/workshop-480.jpg 480w,
    /images/workshop-960.jpg 960w,
    /images/workshop-1440.jpg 1440w
  "
  sizes="(max-width: 700px) 100vw, 700px"
  width="1440"
  height="960"
  alt="A woodworking bench beside a window"
>

In this example:

• src provides a default image source.
• srcset lists available files and their intrinsic widths.
• sizes describes approximately how wide the image will appear under different layout conditions.
• width and height provide the image’s intrinsic aspect ratio and help the browser reserve space.
• alt provides a text alternative when the image conveys relevant content.

The sizes attribute describes the rendered layout size, not the physical width of the device. If the image occupies only half of a desktop layout, declaring 100vw at every width may encourage the browser to choose a larger file than necessary.

Width descriptors and density descriptors

Width descriptors such as 480w and 960w work well when an image changes size with the layout. Density descriptors such as 1x and 2x can be useful when an image remains at a relatively fixed CSS size but needs variants for different display densities.

<img
  src="/images/site-mark.png"
  srcset="
    /images/site-mark.png 1x,
    /images/[email protected] 2x
  "
  width="160"
  height="48"
  alt="Example Company"
>

These approaches should not be mixed casually. Choose the candidate model that accurately reflects how the image behaves in the layout.

Using the picture element

The picture element is useful when the browser needs more than a set of different widths. It can provide alternate formats or substantially different image crops.

Providing modern formats with a fallback

<picture>
  <source
    type="image/avif"
    srcset="/images/river-640.avif 640w,
            /images/river-1280.avif 1280w"
    sizes="(max-width: 720px) 100vw, 720px"
  >
  <source
    type="image/webp"
    srcset="/images/river-640.webp 640w,
            /images/river-1280.webp 1280w"
    sizes="(max-width: 720px) 100vw, 720px"
  >
  <img
    src="/images/river-1280.jpg"
    srcset="/images/river-640.jpg 640w,
            /images/river-1280.jpg 1280w"
    sizes="(max-width: 720px) 100vw, 720px"
    width="1280"
    height="853"
    alt="A wooded riverbank in early autumn"
  >
</picture>

The browser evaluates the sources and selects one it can use. The nested img remains essential: it supplies the fallback, alternative text, intrinsic dimensions, and the image element that is ultimately rendered.

Art direction

Art direction means supplying meaningfully different compositions for different layouts. A wide photograph may work on a desktop but make its subject too small on a narrow screen. A closer crop can preserve the subject rather than merely shrinking the original image.

<picture>
  <source
    media="(max-width: 600px)"
    srcset="/images/aircraft-engine-close.jpg"
  >
  <img
    src="/images/aircraft-hangar-wide.jpg"
    width="1600"
    height="900"
    alt="A mechanic inspecting an aircraft engine in a hangar"
  >
</picture>

Art direction should preserve the meaning represented by the alternative text. If the sources communicate materially different information, they may not belong in the same responsive image set.

Compression and visual quality

Image compression removes or reorganizes data to reduce file size. Lossless compression preserves the decoded image data, while lossy compression accepts some visual change in exchange for greater size reduction.

The appropriate balance depends on the image:

• Photographs often tolerate moderate lossy compression.
• Text inside screenshots may require higher quality settings.
• Gradients and low-light areas should be checked for banding or block artifacts.
• Product details, technical diagrams, and documentary images may require more retained detail.
• Transparent graphics should be reviewed around edges and shadows.

Quality settings are not directly comparable across formats or encoding tools. A quality value of 70 in one encoder does not necessarily produce the same result as 70 in another. File size and visual inspection are more informative than the number alone.

Remove unnecessary image data

Exported images may contain metadata, unused color information, or dimensions that the page never needs. Removing unnecessary data can reduce file size, but metadata should not be stripped automatically when it carries authorship, rights, provenance, accessibility, or operational value.

Optimization should remain a content-aware editorial decision rather than an indiscriminate reduction step.

Image loading behavior and page performance

File size is only one part of image performance. When an image begins loading and whether the browser can reserve its space also affect the user experience.

Provide width and height attributes

Including accurate width and height attributes helps the browser calculate the image’s aspect ratio before the file finishes downloading. This can reduce unexpected layout movement and support a more stable page.

<img
  src="/images/remodeled-kitchen.webp"
  width="1200"
  height="800"
  alt="Remodeled kitchen with wood cabinets and a central island"
>

CSS can still make the image responsive:

img {
  max-width: 100%;
  height: auto;
}

Use lazy loading selectively

Images located well below the initial viewport may use native lazy loading:

<img
  src="/images/detail.webp"
  width="900"
  height="600"
  loading="lazy"
  alt="Close view of the finished cabinet joinery"
>

Lazy loading can reduce unnecessary initial downloads, but it should not be applied indiscriminately. A prominent image visible near the top of the page may need to begin loading immediately. Lazy-loading that image can delay rendering and may worsen Core Web Vitals, particularly Largest Contentful Paint when the image is the page’s largest visible element.

Use loading priority carefully

For an important above-the-fold image, fetchpriority="high" can provide a browser hint:

<img
  src="/images/primary-project.webp"
  width="1400"
  height="875"
  fetchpriority="high"
  alt="Completed exterior renovation viewed from the front yard"
>

This hint should be reserved for genuinely important resources. Marking many images as high priority reduces its usefulness and can create competition with other critical files.

Image behavior should be evaluated within the page as a whole. URLMD’s guide to understanding website performance provides broader context for loading, rendering, and user-visible responsiveness.

Accessibility and semantic image markup

Efficient delivery and accessibility are related, but they solve different problems. Responsive image markup helps a browser choose a suitable file. Alternative text helps communicate the image’s purpose when the image cannot be seen or is not available.

Alternative text should reflect the image’s role in context:

• Informative images: Describe the relevant information or purpose concisely.
• Functional images: Describe the action or destination, especially when the image is inside a link or control.
• Decorative images: Use an empty alternative attribute, alt="", so assistive technology can usually ignore them.
• Complex diagrams: Provide a concise alternative and, when needed, a nearby extended explanation.

Leaving out the alt attribute is not the same as marking an image decorative. An empty attribute is an intentional semantic signal.

When an image has a visible caption, the figure and figcaption elements can express that relationship:

<figure>
  <img
    src="/images/wing-inspection.webp"
    width="1200"
    height="800"
    alt="Technician examining the underside of an aircraft wing"
  >
  <figcaption>
    Visual inspection of the wing surface during scheduled maintenance.
  </figcaption>
</figure>

The caption and alternative text may overlap slightly, but they do not have to repeat each other word for word. The caption is available to everyone and may provide context; the alternative text represents the image’s relevant content.

These decisions belong within a broader understanding of Web Content Accessibility Guidelines and semantic HTML foundations.

A practical modern image delivery workflow

1. Begin with a suitable source file.Keep a high-quality source outside the delivery directory. Avoid repeatedly editing and recompressing an already compressed derivative.
2. Determine the image’s purpose.Identify whether it is informative, decorative, functional, illustrative, or primarily presentational.
3. Measure the layout.Determine the approximate rendered widths the image occupies across relevant breakpoints. Do not generate variants solely from assumed device categories.
4. Choose appropriate formats.Select formats based on image content, transparency, visual quality, browser support, and the capabilities of the publishing system.
5. Generate a restrained set of sizes.Create enough candidates to avoid major over-delivery without generating many nearly identical files that add storage and cache complexity.
6. Compress and inspect the results.Review representative images at their actual display sizes. Pay attention to faces, text, gradients, fine edges, and shadow detail.
7. Write accurate markup.Use srcset, sizes, picture, intrinsic dimensions, and alternative text where each is appropriate.
8. Set loading behavior according to position.Allow important visible images to load promptly and consider lazy loading for images farther down the page.
9. Test the delivered result.Inspect network requests, rendered dimensions, layout stability, visual quality, and accessibility in representative browsers and viewport sizes.
10. Retain human quality assurance.Automated conversion can create useful variants, but someone should still verify crops, compression, alternative text, and page context.

For a broader treatment of image filenames, indexing considerations, image sitemaps, and related markup, see URLMD’s technical SEO guidelines for images.

Common image delivery mistakes

Uploading a large file and shrinking it with CSS

CSS changes the displayed dimensions but does not necessarily reduce the downloaded file. Responsive image candidates should be generated near the sizes the layout actually needs.

Assuming a modern format solves every problem

An oversized or poorly encoded AVIF or WebP image can still be wasteful. Format selection must work with dimensions, compression, caching, and loading behavior.

Writing an inaccurate sizes attribute

If sizes overstates the rendered width, the browser may select an unnecessarily large candidate. The attribute should describe the layout rather than repeat a generic value across the site.

Lazy-loading the primary visible image

Images central to the initial viewport generally should not wait for lazy-loading thresholds. Their discovery and loading behavior should be tested as part of page performance.

Omitting intrinsic dimensions

Without a known aspect ratio, the page may move when an image appears. Accurate width and height attributes help browsers reserve space.

Using the same crop at every layout width

A technically responsive image may still communicate poorly if its subject becomes too small. Art direction can provide a better crop when the composition genuinely needs to change.

Treating alternative text as a keyword field

Alternative text should communicate purpose and relevant content. Keyword-stuffed descriptions make pages less useful and can interfere with an accessible reading experience.

Ignoring images inserted through CSS

CSS background images may be appropriate for decoration, but they lack the native semantics and responsive selection features of an HTML img. Meaningful content should generally not depend on a background image alone.

Generating too many variants

More files do not automatically produce better delivery. Excessive variants increase storage, transformation, cache, and maintenance requirements. A smaller set of well-spaced candidates is often sufficient.

Image CDNs and automated transformation

An image content delivery network can generate dimensions, formats, and compression levels from a source asset. This can be useful for websites with large or frequently changing image libraries.

Automation does not remove the need for clear rules. A delivery system still needs to preserve:

• stable source assets
• predictable URLs or transformation parameters
• appropriate cache behavior
• reasonable format fallbacks
• crop control
• quality review
• accessible HTML

Server-side format negotiation is another option, but it should be implemented with care. Cache keys and response headers must prevent one browser’s image variant from being served incorrectly to another. Explicit sources in a picture element are often easier to inspect and reason about, although the appropriate architecture depends on the site.

How to evaluate image delivery

A useful review looks beyond a single performance score. Examine the actual relationship between the image, its page context, and what the browser downloads.

• Compare the image’s downloaded dimensions with its rendered dimensions.
• Check whether responsive candidates are selected as expected at several viewport widths.
• Confirm that visible quality remains appropriate.
• Review transfer size and caching behavior in browser developer tools.
• Watch for layout movement while images load.
• Identify whether a prominent image is affecting Largest Contentful Paint.
• Test alternative text and document structure with accessibility tools and human review.
• Verify that image URLs return the expected content type and status code.

Performance tools can reveal oversized files and delayed requests, but they cannot fully determine whether a crop communicates well, whether compression damages important detail, or whether alternative text fits the page. Those remain editorial and design judgments.

Frequently asked questions

What is modern image delivery?

Modern image delivery is a coordinated approach to serving images in suitable formats, dimensions, resolutions, and compression levels. It commonly uses responsive image markup, modern formats, deliberate loading behavior, and caching or transformation infrastructure.

Should every image use AVIF or WebP?

No. WebP and AVIF can be efficient for many raster images, but the best choice depends on the content, required quality, browser support, publishing workflow, and fallback strategy. SVG, JPEG, and PNG remain appropriate in particular contexts.

What is the difference between srcset and picture?

srcset provides a set of image candidates from which the browser can choose. The picture element adds source-selection rules, making it useful for alternate formats, media conditions, and art-directed crops.

Should all images use loading="lazy"?

No. Lazy loading is generally most useful for images below the initial viewport. Important images visible when the page first loads should usually be allowed to load without that delay.

Does resizing an image with CSS reduce its download size?

No. CSS can change how large an image appears without changing the file the browser downloads. Responsive image candidates or server-side transformations are needed to deliver smaller source files.

Matching the image to its context

Modern image delivery is not one format, attribute, plugin, or compression setting. It is a set of related decisions that connect visual content to layout, browser behavior, accessibility, and page performance.

A durable implementation provides appropriately spaced image sizes, selects formats according to content, preserves intrinsic dimensions, applies loading hints selectively, and retains meaningful alternative text. It then tests what visitors actually receive rather than assuming that an automated optimization step produced the intended result.

When these parts work together, websites can remain visually useful without making every visitor download the largest possible version of each image.

“This is a consideration in SEO, but its broader value lies in web optimization.”