Best Image Sizes for Web Performance in 2026

Why Image Size Matters More Than Ever

Images account for roughly 50% of the average web page's total weight. A single unoptimized hero image can be larger than the entire rest of the page — HTML, CSS, JavaScript, and fonts combined. In 2026, with Core Web Vitals directly affecting search rankings and users expecting near-instant page loads on mobile, getting image sizes right is not optional.

Target File Sizes

For most web use cases, aim for these maximum file sizes after compression. Hero images and large banners should stay under 200 KB. Content images within articles should be under 100 KB. Thumbnails and gallery previews should be under 30 KB. Icons and logos should be under 10 KB, ideally served as SVG.

These are upper bounds, not targets. Smaller is always better as long as the visual quality meets your standards. A well-compressed hero image at 80-120 KB is entirely achievable with modern encoders like MozJPEG or WebP.

Recommended Dimensions

The days of serving a single image size to all devices are over. Responsive images with multiple sizes are the standard approach. That said, here are the maximum dimensions you typically need.

For full-width hero images, 1920 pixels wide is sufficient for virtually all desktop displays. Anything wider is wasted — even 4K monitors displaying a full-width image at CSS pixel dimensions will use at most 1920 CSS pixels (retina displays double the pixel count, so serving a 1920px image to a retina display gives you effective 960 CSS pixel coverage, which is fine with srcset 2x images at 1920px).

For content images within articles (typically constrained to 700-800px wide in the layout), serve 1600px wide as the largest size (for retina), 800px as medium, and 400px as a small mobile version.

For thumbnails in grids and cards, 600px wide covers retina displays for cards that are typically 200-300px wide in the layout.

The Responsive Images Approach

Use the HTML picture element or img srcset attribute to serve different sizes to different devices. This prevents mobile users on slow connections from downloading desktop-sized images they will never display at full resolution.

A common srcset setup provides three sizes: a small version (400px wide, for mobile), a medium version (800px wide, for tablets and small desktops), and a large version (1600px wide, for large desktops and retina displays). The browser automatically selects the appropriate size based on the viewport width and device pixel ratio.

Format Selection for Performance

Serve WebP to browsers that support it (which is all modern browsers) and JPEG as a fallback. The picture element makes this straightforward — list the WebP source first, then the JPEG fallback. This alone can save 25-30% on image payload with zero visual quality loss.

For icons and simple graphics, SVG is the best choice — it scales to any resolution with zero quality loss and typically weighs less than 5 KB. For photographs and complex graphics, WebP with MozJPEG JPEG fallback is the optimal combination.

Lazy Loading

Use loading="lazy" on all images below the fold. This tells the browser to defer loading images until they are close to entering the viewport, which dramatically improves initial page load time. The one exception is your LCP (Largest Contentful Paint) image — typically the hero image — which should load eagerly to avoid hurting Core Web Vitals scores.