Image compression for the web is not a single action but a series of decisions: which format, which dimensions, which quality level, and which delivery method. Getting all of these right for every image on your site can feel overwhelming, but most sites have a small number of image contexts that repeat across pages. Once you have the right approach for each context, applying it consistently is straightforward.
Understanding why images affect performance so heavily
When a browser loads a webpage, it parses the HTML to discover what resources it needs to fetch. Images are among the largest of those resources, and unlike JavaScript or CSS, images are not execution-blocking. However, the largest visible image on a page determines the Largest Contentful Paint score, which Google uses as a primary ranking signal for page experience.
A page with a 2MB hero image will almost always have a poor LCP score on mobile connections. The same page with a properly sized and compressed hero image in WebP format might load in under one second on the same connection. The visual difference to the user is often imperceptible. The performance difference is significant.
Format selection guide
JPEG works best for photographs and complex imagery with natural colour gradients. It achieves excellent compression for this type of content because its compression algorithm is designed around how human vision perceives colour. Use JPEG for product photos, editorial photos, and any image derived from a camera.
PNG works best for images that require transparency, images with solid colour regions, icons, logos, and screenshots. PNG is lossless, meaning it preserves every pixel exactly. For photographic content, this preservation comes at the cost of much larger file sizes than JPEG with no visible quality benefit.
WebP is the best general-purpose web format in 2026. It outperforms JPEG for photographs and outperforms or matches PNG for graphic content. All modern browsers support WebP. The main consideration is that some older automated systems and email clients do not support it, so for images shared outside a controlled web environment, JPEG and PNG remain important.
SVG is the right format for logos, icons, and any purely graphical content described by geometric shapes rather than pixels. An SVG file is a text description of shapes, so it scales perfectly to any size without quality loss and is typically tiny for simple graphics.
Quality settings by content type
For JPEG photographs on a website: quality between 75 and 85 percent provides the best balance. At 75 percent, most photographs show no visible compression artefacts in typical viewing conditions. At 85 percent, the file size is larger but the quality improvement is rarely perceptible. Testing at 70 percent and checking carefully for artefacts in sky regions and smooth gradients is worthwhile if file size is critical.
For WebP photographs: equivalent visual quality is typically achieved at similar numerical quality settings. Most conversion tools provide a direct WebP quality slider comparable to JPEG quality.
For PNG graphics: applying lossless compression through an optimiser reduces file size by 20 to 40 percent with no quality change. The image is visually identical but the file is smaller because the lossless compression algorithm is applied more efficiently.
Dimension targets for common web contexts
Hero images displayed full width on a desktop at 1440 pixels: serve at 1440 pixels wide for standard screens and 2880 pixels for high-density screens, with responsive image tags so browsers select the appropriate version. In WebP, a 1440 pixel hero image for a lifestyle photo typically runs between 100KB and 300KB at 80 percent quality.
Blog post featured images displayed at 800 pixels wide in the post list: serve at 800 pixels for standard and 1600 pixels for high-density. A typical editorial photo at these dimensions in WebP should be between 60KB and 150KB.
Product thumbnails in a grid layout at 300 pixels wide: serve at 300 pixels for standard and 600 for high-density. At these dimensions in WebP, a product photo should be between 15KB and 60KB.
Author photos and avatars at 80 pixels wide: serve at 80 pixels for standard and 160 for high-density. These should be under 10KB each.
Implementing responsive images
The srcset attribute in HTML allows a browser to choose between multiple versions of an image based on the current display conditions. A basic responsive image implementation looks like this in principle: you provide image sources at multiple widths, and the browser selects the most appropriate based on the screen width and pixel density.
For sites built on a CMS, many platforms handle this automatically. WordPress generates multiple image sizes and inserts the appropriate srcset attributes when you add images to content. Squarespace and Shopify do the same. The key is uploading a source image that is large enough for the largest display context, so the platform has room to generate smaller versions.
Lazy loading images below the fold
Images that are not visible when a page first loads should be lazy loaded. The HTML loading="lazy" attribute tells the browser to wait until an image is about to enter the viewport before fetching it. This reduces the initial page load time and saves data for users who do not scroll to the bottom of every page.
The hero image and any images visible without scrolling on a standard desktop or mobile screen should never be lazy loaded. These are the images that determine the LCP score. Adding loading="lazy" to an LCP candidate image will delay its loading and hurt the score.
Measuring the impact of image compression
Google PageSpeed Insights provides specific recommendations about images on any public URL. The "Serve images in next-gen formats," "Properly size images," and "Efficiently encode images" suggestions identify images that need attention and estimate how much improvement each fix would achieve. Running a page through PageSpeed before and after image optimisation gives a measurable comparison of the improvement.
The Network tab in browser developer tools shows the exact size and load time of every image on a page. Sorting by size and working through the largest images first gives the best return on optimisation time.
Common patterns that cause large web image sizes
Uploading stock photos directly from the download without resizing. Stock photos are typically delivered at print resolution for maximum flexibility. A standard stock photo download might be 5000 pixels wide and 20MB. Uploading this directly to a website and letting the browser scale it down is one of the most common web performance mistakes.
Using PNG for photographs because it sounds like a higher quality format. PNG is lossless but that does not make it better for photographs on the web. It just makes it larger.
Not converting to WebP because of uncertainty about browser support. WebP support is now at over 95 percent of global browsers. The performance improvement for the 95 percent who can receive WebP far outweighs any consideration for the small minority who cannot.