How to Optimize Images for Web Performance

Why Image Optimization Matters

Google's Core Web Vitals directly measure user experience and influence search rankings. The Largest Contentful Paint (LCP) metric, which should occur within 2.5 seconds, is heavily affected by image loading because the LCP element is often a hero image or banner. Unoptimized images are the most common cause of poor LCP scores.

Beyond LCP, images affect Cumulative Layout Shift (CLS) when they load without defined dimensions, and they increase Total Blocking Time if the browser must decode excessively large files. Every aspect of page performance touches images in some way.

Studies consistently show that each additional second of load time reduces conversions by 7-10%. For an e-commerce site doing $100,000 per month, a one-second delay can mean $7,000 to $10,000 in lost revenue monthly. Image optimization is often the highest-impact performance improvement available.

The Real Cost of Unoptimized Images

The average web page in 2026 transfers over 2MB of image data. For users on mobile connections, this can mean 5-10 seconds of loading time for images alone. The consequences extend well beyond user frustration.

• Bandwidth costs — Serving oversized images multiplies CDN and hosting expenses. Compressing images by 70% means serving 70% less data.
• Bounce rates — Pages that load in 1 second have a bounce rate of around 7%. At 3 seconds, bounce rates jump to 11%. At 5 seconds, they exceed 38%.
• SEO penalties — Google uses page speed as a ranking signal. Sites that fail Core Web Vitals assessments lose visibility in search results.
• Accessibility — Users on slower connections or older devices are disproportionately impacted, creating equity issues.

Choosing the Right Format for Web

Format selection is the single most impactful optimization decision you can make. Modern formats can reduce file sizes by 30-50% compared to legacy formats with no visible quality difference. Graviton's format conversion makes it easy to switch between formats.

WebP as Your Default

With over 97% global browser support, WebP should be your default image format for the web. It delivers 25-35% smaller files than JPG at equivalent quality, supports transparency (replacing the need for PNG in many cases), and supports animation (replacing GIF). There is no longer a compelling reason to serve JPG or PNG as your primary format.

AVIF for Maximum Compression

AVIF takes compression even further, typically producing files 30-50% smaller than WebP. Browser support has expanded significantly, with Chrome, Firefox, Safari, and Edge all supporting AVIF. For projects targeting modern browsers, AVIF is the most bandwidth-efficient choice available.

JPG as a Fallback

JPG remains valuable as a universal fallback. Use the HTML <picture> element to serve AVIF or WebP to supporting browsers and JPG to the rest. This progressive enhancement approach ensures every user gets the best experience their browser supports.

Finding the Sweet Spot for Quality

Quality settings have a non-linear relationship with file size. Dropping from 100% to 85% quality might reduce file size by 60%, while dropping from 85% to 70% only saves an additional 15-20%. Understanding this curve helps you find the optimal setting for each content type.

Recommended Quality by Content Type

• Hero images and banners — 80-90% quality. These are large, prominent elements that benefit from higher fidelity.
• Content photographs — 75-85% quality. The standard range for most web images.
• Thumbnails and previews — 60-75% quality. Smaller display sizes hide compression artifacts effectively.
• Background and decorative images — 60-70% quality. Users rarely scrutinize these elements, so aggressive compression is safe.

Responsive Images and Sizing

Serving a 3000-pixel-wide image to a phone with a 375-pixel screen wastes over 80% of the transferred data. Responsive images ensure each device receives an appropriately sized file.

The srcset Attribute

The HTML srcset attribute lets you provide multiple versions of an image at different widths. The browser selects the most appropriate version based on the viewport size and device pixel ratio. Generate 3-5 size variants (e.g., 400w, 800w, 1200w, 1600w) for each image.

Dimension Guidelines

• Always set explicit width and height attributes on img elements to prevent layout shift.
• Never serve images larger than 2x the display size (for retina screens, 2x is sufficient).
• For full-width hero images, 1600px is typically the maximum needed width.
• Compress each size variant independently for optimal results.

Implementing an Image Optimization Workflow

The most effective approach is to build image optimization into your development and content workflows rather than treating it as an afterthought. Graviton is designed to fit seamlessly into web development workflows.

Before Publishing

1. Resize images to the maximum display dimensions needed.
2. Compress using Graviton with appropriate quality settings for the content type.
3. Convert to WebP or AVIF for modern browsers, keeping JPG fallbacks if needed.
4. Verify file sizes are reasonable: under 200KB for content images, under 500KB for hero images.

During Development

Use the <picture> element for format fallbacks, implement lazy loading for below-the-fold images, set proper cache headers for image assets, and always include width/height attributes to prevent CLS. These practices complement compression to deliver the best overall performance.

Measuring the Impact

Optimization without measurement is guesswork. Use these tools to verify your image optimization is working.

• Google PageSpeed Insights — Provides both lab and field data for your pages, with specific recommendations for image optimization.
• Lighthouse — Built into Chrome DevTools, it identifies oversized images, unoptimized formats, and off-screen images that should be lazy loaded.
• WebPageTest — Offers detailed waterfall charts showing exactly how image loading affects page render time.
• Chrome DevTools Network tab — Filter by image type to see the total image payload and identify the largest individual images.

Establish baseline measurements before optimizing, then compare after. Track LCP, total page weight, and image-specific transfer sizes to quantify improvement.