There is no single "best" image size — the right answer depends on where the image appears, the screen it's viewed on, and what your performance budget allows. Here are the working numbers.
"What size should my images be?" is one of the most common questions in web performance, and it has the most contextually-dependent answer. A hero image and an avatar are both images, but the optimal size for each differs by an order of magnitude.
This article gives you concrete numbers — pixel dimensions and file size targets — for the most common image roles on a typical web page. Use them as defaults; adjust when you have specific constraints.
Image size has two components, both of which affect performance:
Both need to be optimized. A 4000×3000 image at 200 KB is still problematic because the browser has to decode 12 million pixels into memory, which is slow on mobile devices. Conversely, a 800×600 image at 2 MB is problematic because it takes too long to download.
Hero images are usually your Largest Contentful Paint element, which means their load time directly affects your Core Web Vitals score. They're the most important image on the page to optimize aggressively.
For best results, serve different sizes to different devices using the srcset attribute or <picture> element. A phone doesn't need a 1920×1080 hero.
Most blog posts and articles display images at around 700-900 pixels wide. Serving 1200-1600px gives you 2× resolution for retina displays. Larger than that is wasted.
Thumbnails appear in large quantities — 20+ on a product listing page. Each one being even 100 KB adds up fast. Aggressive compression is fine here because thumbnails are viewed at small sizes.
For square avatars, 256×256 is plenty even on retina. For icons, prefer SVG when possible — it's both smaller and infinitely scalable.
E-commerce is the one place where you should err on the side of higher quality. A blurry product photo costs sales. The 2400×2400 zoom version should be loaded lazily — only when the user actually zooms in.
Background images can take aggressive compression because they're decorative. Visible artifacts are okay as long as they don't compete with the foreground content.
Almost every modern device has a high-DPI display. iPhones, modern Macs, most current Android phones, and most laptops display at 2× the logical pixel count. If your image is displayed at 800 logical pixels wide, the screen actually renders it at 1600 physical pixels.
Rule: source images should be 2× the logical display size, with rare exceptions for very large hero images where you can get away with 1.5× because the device is so far from the user.
Some sources recommend 3× source images. This is overkill in 2026. Display densities have stopped increasing meaningfully. The visual benefit of 3× over 2× is imperceptible to almost everyone. The cost is 2.25× the bytes. Stick with 2× as your ceiling.
To hit Google's "Good" thresholds:
This handles 95% of cases. For the remaining 5% — very detailed images, gradients that band easily, or content where quality must be perfect — adjust upward as needed.
Get your images to the right size with pictoolkit's resize tool and compressor. Batch process a whole folder in seconds, entirely in your browser.