How to Optimize Images for Web Performance

Choosing the Right Image Format

Your choice of image format has a significant impact on file size, quality, and browser compatibility. The content of the image itself—a detailed photograph or a simple logo—should guide your decision.

Modern Formats: AVIF and WebP

For nearly any photograph on the web, AVIF and WebP are the primary choices. They use advanced compression algorithms to reduce file sizes substantially compared to JPG while maintaining visual clarity.

AVIF leverages technology from the AV1 video codec to achieve its small file sizes. In tests, AVIF files are often 20-50% smaller than WebP files at the same visual quality. With over 95% of users on supporting browsers, AVIF is becoming a standard.

When to Use Traditional Formats: JPG and PNG

Traditional formats still have specific use cases.

Mastering Compression and Resizing

Once you have selected a format, resizing and compression offer the largest performance gains. A common mistake is to upload a high-resolution image and resize it with CSS.

Never upload an image that is physically larger than its maximum display size. If a content column is 800px wide, do not use a 4000px wide image. This forces every visitor to download five times more data than needed.

Finding the Compression Sweet Spot

After resizing an image to its correct dimensions, the next step is compression. This involves a trade-off: you strategically remove some visual information in exchange for a smaller file. A "quality" slider in your optimization tool controls this balance.

For lossy formats like JPG, WebP, and AVIF, a quality setting between 60 and 75 is a good starting point. This often achieves a "visually lossless" state, where the file is much smaller, but the human eye cannot perceive a difference.

This workflow reduced the original file size by over 97%. This technical improvement directly impacts user experience and can influence conversion rates.

Strip Unnecessary Metadata

Image metadata, or EXIF data, is another factor to consider. Cameras embed information like model, ISO, shutter speed, and GPS coordinates into photos. This data is unnecessary for web display and adds to the file size.

Most of this data should be removed to save a few kilobytes per image. Optimization tools like Convert.FAST handle this automatically.

Responsive Images and Lazy Loading

Serving desktop-sized images to mobile users creates a slow, frustrating experience. Responsive images solve this by allowing the browser to select the best-sized image from a set of options based on the user's screen.

Unoptimized images can account for over 50% of a page's total weight. This bloat negatively affects Core Web Vitals, particularly Largest Contentful Paint (LCP), pushing it beyond the recommended 2.5-second threshold and hurting SEO.

Using Srcset and Sizes

The srcset and sizes attributes are the standard for responsive images. They provide the browser with the information needed to download the most appropriate file.

<img
  srcset="hero-image-480w.avif 480w,
          hero-image-800w.avif 800w,
          hero-image-1200w.avif 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  src="hero-image-800w.avif"
  alt="A detailed description of the hero image content."
>

Adding Native Lazy Loading

Even correctly sized images should not all load at once. Lazy loading defers the download of off-screen images until they are about to scroll into view.

<img src="your-image.avif" loading="lazy" alt="Description.">

Adding loading="lazy" tells the browser to wait, which can significantly speed up the initial page load by prioritizing visible content. This native attribute is one of the simplest and most effective performance improvements available.

Prioritizing Critical Images

Lazy loading is not appropriate for critical images at the top of the page, such as a logo or main banner. These are often the LCP element, and delaying them would harm performance.

Automating Your Optimization Workflow

Optimizing images manually is not practical for large quantities. An automated workflow is essential for handling tasks like processing a product catalog or preparing images for a marketing campaign.

Scripting with Command-Line Tools

For developers comfortable with the terminal, command-line tools like ImageMagick and FFmpeg offer powerful automation capabilities. A simple script can process an entire folder, resizing images, converting formats, and stripping metadata.

Using Cloud-Based Services for Bulk Processing

Cloud-based services offer a simpler alternative for teams. Platforms like Convert.FAST are designed to process large batches of files without requiring code. Upload hundreds of source files (PNG, HEIC, RAW) and apply a consistent optimization profile to the entire batch. The service processes the files and provides a single ZIP file containing the optimized images.

Security and Privacy in Automation

When using a third-party service, security and privacy are important considerations. Choose a service that is transparent about its data protection practices.

Files are encrypted in transit and at rest, processed on EU servers, and automatically deleted within one hour.

SEO and Accessibility

Optimizing file size is only part of the process. You also need to ensure that search engines and all users can understand your images.

Start with a descriptive filename. A filename like IMG_8821.JPG provides no context to search engines. Renaming it to blue-nike-running-shoe.avif gives them useful information.

Why ALT Text is Non-Negotiable

ALT text (alternative text) is a short description in the image's HTML tag. It serves two purposes. First, it is an accessibility feature. Screen readers announce this text to visually impaired users, providing them with the same context as sighted users.

Second, it is an SEO signal. It gives search crawlers another clue about the image's content, which can help with ranking in image searches.

Speeding Up Delivery with a CDN

A Content Delivery Network (CDN) is the final step in delivering optimized images quickly. A CDN is a distributed network of servers that stores copies of your images closer to your visitors.

If your main server is in Los Angeles, a visitor from London would experience latency as data crosses the Atlantic. With a CDN, that user would instead retrieve the image from a local server in Europe. This reduces latency, improves p50 and p95 load time metrics, and provides a faster experience for a global audience.

Frequently Asked Questions