Image Optimization Checklist

Images are often among the largest resources downloaded by a web page. Poorly sized, uncompressed or incorrectly delivered images can increase page weight, delay rendering and make pages feel slow, especially on mobile connections. A good image optimization strategy reduces file size while preserving enough visual quality for the intended display.

Image optimization is not just about compressing files. Effective optimization also includes choosing the right image format, generating appropriate dimensions, serving responsive variants, loading images at the correct time, removing unnecessary metadata and configuring caching correctly.

Image Optimization Checklist

• Choose an appropriate image format.
• Resize images to their actual display dimensions.
• Compress images before deployment.
• Use responsive image variants when necessary.
• Serve modern formats such as WebP or AVIF when appropriate.
• Lazy-load below-the-fold images.
• Prioritize important above-the-fold images.
• Specify image dimensions to prevent layout shifts.
• Remove unnecessary metadata.
• Use efficient caching for static image assets.
• Serve images through a CDN when appropriate.
• Avoid unnecessarily large source images.

Why Image Optimization Matters

An image that looks small on a web page may still contain thousands of pixels and several megabytes of data. The browser must download the resource before it can display it, so transferring unnecessary bytes directly affects loading performance.

Large images can also affect Core Web Vitals. A prominent image may become the Largest Contentful Paint element, while images without reserved dimensions can contribute to Cumulative Layout Shift. Excessive image downloads can also consume bandwidth and compete with JavaScript, CSS and other important resources.

Choose the Right Image Format

The image format has a major effect on file size, quality and browser behavior. The correct choice depends on the type of image, transparency requirements, animation and browser support requirements.

JPEG

JPEG is well suited to photographs and other images containing many colors and gradual transitions. It uses lossy compression, which means reducing the quality setting can significantly reduce file size.

JPEG is still useful when broad compatibility is important, but modern formats can often achieve a smaller file at a similar visual quality.

PNG

PNG uses lossless compression and supports transparency. It is useful for screenshots, interface graphics, logos and images where preserving exact pixels is important. However, PNG files can become unnecessarily large when used for photographic content.

WebP

WebP is a modern web image format that supports both lossy and lossless compression as well as transparency. It can provide substantially smaller files than traditional formats while maintaining good visual quality.

AVIF

AVIF is a modern image format designed for highly efficient compression. It can produce very small files at good visual quality, making it useful for performance-sensitive websites. Encoding can be more computationally expensive than some alternatives, so image processing workflows should account for generation time.

SVG

SVG is usually the best choice for icons, logos, diagrams and other vector graphics. Because SVG describes shapes rather than storing a fixed grid of pixels, the same asset can scale to different display sizes without becoming blurry.

Resize Images Before Serving Them

One of the most common image optimization mistakes is serving an image that is much larger than the size at which it is displayed. If an image appears at 800 pixels wide but the browser downloads a 3000-pixel-wide source, most of the downloaded pixels may never be needed.

Resize source images according to their actual display requirements. For responsive layouts, generate several widths instead of relying on one oversized image for every device.

Original image: 3000 × 2000
Desktop:         1200 × 800
Tablet:           800 × 533
Mobile:           480 × 320

Avoid Upscaling Low-Resolution Images

Resizing an image down usually reduces unnecessary data, but enlarging a small image does not create additional real detail. Upscaling can make images blurry or introduce visible artifacts.

Whenever possible, start with a sufficiently large source image and generate smaller versions from it. Avoid using a single tiny source image for large desktop displays.

Compress Images

Compression reduces the amount of data required to store and transfer an image. Lossy compression removes some information to achieve smaller files, while lossless compression preserves the original image data.

The goal is not to achieve the smallest possible file at any cost. Excessive compression can introduce visible artifacts, especially around text, sharp edges and high-contrast details. Choose a quality level that provides a good balance between visual quality and file size.

Use Responsive Images

Responsive images allow the browser to choose an appropriate image resource for the current viewport and device characteristics. This prevents a small mobile screen from unnecessarily downloading the same large image intended for a desktop display.

<img
  src="image-800.jpg"
  srcset="
    image-480.jpg 480w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Example image"
>

The srcset attribute provides multiple image candidates, while sizes describes the approximate rendered width of the image under different conditions. The browser can then select a suitable resource instead of always downloading the largest file.

Use the Picture Element When Formats or Crops Differ

The picture element is useful when different image formats or compositions should be served under different conditions. For example, a website can provide AVIF and WebP versions while retaining a fallback format, or use a different crop for mobile screens.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Example image">
</picture>

Lazy Loading Images

Images that are far below the initial viewport generally do not need to be downloaded immediately. Lazy loading allows those resources to be deferred until they are approaching the user's viewport.

<img
  src="gallery-image.webp"
  loading="lazy"
  alt="Gallery image"
>

Lazy loading can reduce the number of resources requested during the initial page load and save bandwidth for users who never scroll to the images.

Prioritize Important Images

Not all images have the same performance importance. A small decorative image near the bottom of a page is very different from a large hero image displayed immediately after navigation.

• Identify images visible during the initial render.
• Prioritize important content images.
• Avoid lazy-loading the primary LCP image without a good reason.
• Defer images that are far below the viewport.
• Avoid loading decorative images before essential content.

Set Image Width and Height

The browser needs to know how much space an image will occupy before the image finishes downloading. Providing width and height allows the browser to reserve that space and reduces unexpected movement when the image appears.

<img
  src="product.webp"
  width="800"
  height="600"
  alt="Product"
>

The aspect ratio implied by the dimensions also helps the browser maintain the intended layout while the image is loading.

Prevent Cumulative Layout Shift

Images without known dimensions can cause surrounding content to move when the browser discovers the image's actual size. Reserving the correct space before the resource finishes loading helps prevent this type of layout shift.

.image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Use Object-Fit Carefully

Responsive layouts sometimes require images to fit into fixed containers. CSS properties such as object-fit can control how an image behaves within its allocated space, but cropping should be intentional because important parts of the image may otherwise disappear.

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Optimize Image Metadata

Image files can contain metadata such as camera information, GPS coordinates, software details and timestamps. Some metadata is useful, but unnecessary metadata increases file size and can expose information that should not be published.

For web assets, review whether metadata is actually required. Removing unnecessary metadata can slightly reduce file size and is especially useful when publishing photographs created by cameras or mobile devices.

Use SVG Optimization for Vector Assets

SVG files can contain unnecessary XML elements, editor metadata, comments, duplicated attributes and excessive precision. Optimizing an SVG can significantly reduce its size without changing the visible result.

<svg viewBox="0 0 100 100">
  <path d="M10 10 L90 50 L10 90 Z"/>
</svg>

SVG optimization should preserve required accessibility attributes, IDs, CSS hooks and other functionality when the SVG is used interactively or inline.

Use Appropriate Image Quality

Higher quality does not always mean noticeably better visual output. After a certain point, increasing image quality can significantly increase file size while providing little visible improvement.

• Compare compressed images at their actual display size.
• Check important details such as text and edges.
• Avoid using maximum quality settings by default.
• Use different quality settings for different image types.
• Test compression on representative images before applying it at scale.

Use Content Delivery Networks

A CDN can serve static image assets from infrastructure located closer to users. This can reduce network distance and improve delivery performance, particularly for websites with visitors distributed across multiple geographic regions.

A CDN does not automatically optimize every image. If the origin server stores oversized and inefficient files, the CDN may simply deliver those same files faster. Image dimensions, formats and compression should still be optimized at the source or through an image transformation service.

Configure Image Caching

Images that rarely change should be cached aggressively. Long-lived caching allows returning visitors to reuse previously downloaded assets instead of requesting them again from the origin server.

Cache-Control: public, max-age=31536000, immutable

Long cache lifetimes work especially well when filenames contain content hashes or another version identifier. When the image changes, the URL changes as well, allowing the new resource to be fetched while the old version can remain cached.

Use Content Hashes for Static Assets

hero.a81f3c.webp
logo.4b72de.svg
product.91ac02.avif

Content-hashed filenames make cache invalidation predictable. Instead of forcing every user to re-download every image after a deployment, only assets whose contents changed receive new URLs.

Avoid Loading Images You Do Not Need

Image optimization begins before compression. If a page loads dozens of decorative images that users rarely see, the most effective optimization may be removing unnecessary assets entirely.

• Remove decorative images that provide no useful information.
• Avoid duplicate images in different components.
• Do not preload images that are unlikely to be needed immediately.
• Avoid hidden image elements that still trigger network requests.
• Review background images loaded through CSS.

Background Images Need Optimization Too

Images loaded through CSS backgrounds are still network resources and should be optimized just like images referenced by HTML. Large hero backgrounds can become significant performance bottlenecks, particularly when used at high resolution.

.hero {
  background-image: url("/images/hero.webp");
  background-size: cover;
  background-position: center;
}

Use responsive strategies when background images require substantially different resources for mobile and desktop layouts. Avoid serving a very large desktop background to devices that only display a small version.

Image Optimization for Mobile

Mobile users often have smaller screens, limited bandwidth and less powerful hardware. Serving desktop-sized images to mobile devices wastes bandwidth and can make pages feel unnecessarily slow.

• Provide smaller responsive image variants.
• Avoid oversized hero images.
• Use modern image formats.
• Lazy-load images outside the initial viewport.
• Reserve image dimensions to prevent layout shifts.
• Test pages on realistic mobile connections.

Image Optimization and LCP

A large image near the top of a page can become the Largest Contentful Paint element. If that image is oversized, heavily compressed at runtime, discovered late or delivered slowly, it can delay the point at which the main content becomes visible.

For an important LCP image, focus on fast discovery, an appropriate file size, correct dimensions and efficient delivery. Avoid unnecessary lazy loading when the image is immediately visible and important to the page.

Image Optimization and CLS

Images can contribute to Cumulative Layout Shift when their dimensions are unknown. Reserving the correct aspect ratio allows the browser to allocate space before the image loads, reducing unexpected movement of surrounding content.

A Practical Workflow

A repeatable optimization workflow makes image performance easier to maintain as a website grows. Instead of manually optimizing every image differently, define rules for dimensions, formats, quality and delivery.

Original image
      ↓
Choose required dimensions
      ↓
Choose appropriate format
      ↓
Compress
      ↓
Remove unnecessary metadata
      ↓
Generate responsive variants
      ↓
Set dimensions in HTML/CSS
      ↓
Configure loading behavior
      ↓
Configure caching
      ↓
Test performance

Recommended Image Workflow by Asset Type

Common Image Optimization Mistakes

• Uploading a 4000-pixel image for a 500-pixel component.
• Using PNG for every type of image.
• Serving only one oversized image to every device.
• Lazy-loading the main above-the-fold image.
• Failing to specify image dimensions.
• Keeping unnecessary EXIF metadata.
• Using unoptimized CSS background images.
• Serving images without effective caching.
• Using excessive compression that visibly damages quality.
• Assuming a CDN automatically fixes oversized images.
• Keeping original source images in the public web directory unnecessarily.

Best Practices

• Choose image formats according to the content.
• Resize images to realistic display dimensions.
• Use WebP or AVIF where they provide practical benefits.
• Generate responsive image variants for different viewport sizes.
• Compress images while maintaining acceptable visual quality.
• Lazy-load images that are outside the initial viewport.
• Prioritize important images that contribute to the initial render.
• Always reserve space for images.
• Remove unnecessary image metadata.
• Optimize SVG files before deployment.
• Use long-lived caching for versioned static assets.
• Use a CDN when geographic distribution makes it beneficial.
• Regularly audit image-heavy pages.

Image Optimization Audit

When auditing a website, inspect both individual files and the way those files are delivered. A technically small image can still be poorly implemented if it causes layout shifts, is loaded unnecessarily early or prevents the main content from rendering quickly.

Frequently Asked Questions

Helpful Image Tools

A Responsive Image Size Calculator helps determine appropriate image dimensions for different display sizes, an Image Resize Calculator helps calculate new dimensions while preserving proportions, an SVG Optimizer reduces unnecessary SVG data, an Image Metadata Viewer lets you inspect embedded image metadata, and an Image Aspect Ratio Calculator helps maintain correct proportions when resizing images.

Conclusion

Image optimization is a combination of choosing the right format, using appropriate dimensions, compressing files, serving responsive variants and controlling when resources are downloaded. Performance also depends on reserving layout space, prioritizing important images, removing unnecessary metadata and configuring effective caching.

A well-optimized image should contain only the data the user actually needs, be delivered at an appropriate size and arrive at the right time. By following a consistent image optimization checklist, websites can reduce bandwidth usage, improve loading performance, protect visual quality and provide a better experience across desktop and mobile devices.