How to Optimize Images for Website Performance

Page load speed is one of the strongest predictors of user engagement. Research consistently shows that even a one-second delay in load time reduces conversions by 7 percent and increases bounce rates by 11 percent. On mobile devices with slower connections, the impact is even more dramatic — pages that take more than three seconds to load lose over half their visitors. Since images are typically the heaviest assets, optimizing them delivers the largest single improvement to load speed.

Google uses page speed as a direct ranking signal for both desktop and mobile search results. The Core Web Vitals assessment — which includes LCP, Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) — is part of the page experience ranking system. A page with a 4-second LCP caused by an unoptimized hero image will rank lower than an identical page with a 1.5-second LCP, all else being equal. Image optimization is therefore an SEO requirement, not just a performance nicety.

Beyond rankings and engagement, image optimization reduces bandwidth consumption for both your users and your servers. Mobile users on metered data plans appreciate pages that do not consume megabytes of cellular data for a single page view. On the server side, smaller images mean lower CDN and hosting costs, especially at scale. A site serving one million page views per month that reduces average image payload by 500 KB per page saves 500 GB of bandwidth per month — a meaningful reduction in infrastructure costs.

The single most impactful optimization is serving images at the correct dimensions. A common mistake is uploading a 4000x3000 pixel photograph from a camera and displaying it in a 400x300 pixel card on a webpage. The browser downloads the entire 4000-pixel image and then scales it down in the rendering engine, wasting bandwidth on pixels that the user never sees. The solution is straightforward: resize every image to the dimensions at which it will be displayed.

For common web use cases, a set of standard sizes covers most needs. Thumbnails and avatar images are typically 100 to 200 pixels wide. Card images in grid layouts are usually 300 to 500 pixels wide. Article body images work well at 600 to 800 pixels. Hero and banner images span the full viewport, which means 1200 to 1600 pixels wide for most desktop screens. Use Resize Image to set precise dimensions for any image, with options to maintain the original aspect ratio or crop to a specific size.

For responsive websites that serve different screen sizes, the best practice is to generate multiple sizes of each image and use the srcset attribute to let the browser choose the most appropriate one. A typical srcset might include sizes at 400, 800, 1200, and 1600 pixels wide. The browser selects the smallest version that fills the display area at the user's screen resolution, including accounting for high-DPI (Retina) displays that need 2x pixel density. Always preserve the aspect ratio when resizing to avoid stretched or squished images — every resize tool should lock the ratio by default.

After resizing, compression is the next most effective optimization. Every image format supports some form of compression, and the key insight is that you can reduce file size dramatically without any quality that human eyes can detect. For JPG and WebP images, the quality setting controls the compression-to-quality trade-off. A quality setting of 100 preserves nearly all image data and produces the largest files. A quality setting of 50 produces much smaller files but with visible artifacts.

The sweet spot for most photographic images is a quality setting of 80 to 85. At this range, file sizes are typically 40 to 60 percent smaller than quality 100, but the visual difference is imperceptible to virtually all viewers in normal browsing conditions. For images displayed at small sizes such as thumbnails or cards, you can often go as low as 70 quality without noticeable degradation. Use Compress Image to adjust quality and see the resulting file size before downloading.

A practical approach is to set target file sizes based on the image's role on the page. Hero images and full-width banners should be under 200 KB after compression. Card and article body images should be under 100 KB. Thumbnails and icons should be under 30 KB. These targets are achievable for virtually any image when you combine correct sizing with appropriate compression. Always compare the original and compressed versions visually — if you cannot tell them apart at the display size, the compression is safe.

Format selection works hand-in-hand with compression. Each image format uses a different compression algorithm optimized for different types of content, and choosing the right format can reduce file size by an additional 25 to 50 percent on top of compression settings alone. For a detailed comparison of every major format, see the image format comparison guide, but here is a quick summary of the best practices.

WebP should be the default format for most website images in 2026. It produces files 25 to 34 percent smaller than JPG at equivalent quality, supports transparency, and works in over 97 percent of browsers worldwide. For photographs, use lossy WebP with quality 80-85. For graphics and logos that need transparency, use lossless WebP. Convert your existing images using JPG to WebP or PNG to WebP to see immediate size improvements.

For sites targeting the most aggressive optimization, AVIF offers an additional 20 percent reduction over WebP. Browser support is at approximately 93 percent and growing. The recommended strategy is to use the HTML picture element to serve AVIF as the first choice, WebP as the second, and JPG as the universal fallback. This ensures every browser gets the smallest file it can decode. For images that need lossless quality and universal support — such as technical diagrams shared via email or download — PNG remains the right choice.

Lazy loading is a technique where images below the visible viewport are not downloaded until the user scrolls near them. This dramatically reduces initial page load time because only the images the user can actually see are loaded upfront. In modern HTML, adding the loading="lazy" attribute to an img tag enables native browser lazy loading with no JavaScript required. The key rule is to never lazy-load images that are visible when the page first loads — hero images, banners, and above-the-fold content should always load immediately with the priority attribute.

Responsive images using the srcset and sizes attributes allow the browser to intelligently select the best image size for the current viewport and device pixel ratio. Instead of serving a single large image to every device, you provide a set of pre-generated sizes and let the browser pick the most efficient one. Combined with a picture element for format selection, this gives every user the optimal combination of size and format. The effort to set this up pays for itself quickly in bandwidth savings and improved Core Web Vitals scores.

Beyond raster images, consider whether some visuals can be replaced with more efficient alternatives entirely. SVG is ideal for icons, logos, and simple illustrations — it is resolution-independent, typically tiny in file size, and renders perfectly at any zoom level. CSS gradients, shadows, and shapes can replace many decorative images. The Crop Image tool can help remove unnecessary areas from photos, reducing the pixel count before any compression is applied. Every pixel you remove is a pixel that does not need to be compressed, transferred, or rendered.