“Compress your images” is common advice, but it rarely comes with an actual target — so it’s hard to know if you’re done. Here are realistic file size benchmarks by image type and use case, so you have a concrete number to aim for instead of guessing.
Table of Contents
Why a Target Number Actually Matters
Vague advice like “make it smaller” doesn’t tell you when to stop. Compress too little, and your page stays slow. Compress too much chasing an arbitrary tiny file size, and you start losing visible quality for no real benefit. Having a realistic target per image type lets you stop at the point of diminishing returns, rather than either under- or over-optimizing.
These are general guidelines, not hard rules — a highly detailed photo will naturally need a slightly bigger budget than a simple graphic, even at the same dimensions.
How Much Should a Website Image Be?
Want to try it yourself? Compress your images free — no upload, no signup.
Hero / Featured Images (Full-Width, Above the Fold)
Target: 100-200KB
This is usually your Largest Contentful Paint (LCP) element, so it deserves the most attention. At typical display widths (1200-1600px), a well-compressed JPG or WebP at 75-85% quality should comfortably land in this range for most photos. If you’re seeing 500KB+ for a hero image, it almost always means the file wasn’t resized to actual display dimensions before uploading — you’re serving a much larger source file than the page actually needs.
In-Content Blog Images
Target: 50-150KB
Images embedded within an article (screenshots, supporting photos, diagrams) don’t need to be as large as your featured image, since they’re not usually the LCP element and there are typically several of them per page — each one adds to total page weight, so keeping them modest matters more in aggregate than any single hero image would.
Product Photos (E-commerce)
Target: 80-200KB per image
Product pages often have multiple images per product (different angles, zoom views, thumbnails), so total page weight adds up fast. A single 800KB product photo might look fine as a one-off, but multiplied across 6-8 angles per product, plus related product thumbnails, it can meaningfully slow a page down. Aim for the lower end of this range for thumbnail/gallery versions and the higher end only for the main, zoomable image.
Thumbnails (Blog Listings, Related Posts, Category Grids)
Target: 15-40KB
These display small, so there’s no reason for them to carry a large file size — a properly resized thumbnail (rather than a full-size image squeezed into a small CSS box) should easily hit this range without visible quality loss.
Logos and Icons
Target: under 20KB
Logos are usually simple graphics with few colors, so they compress extremely well, especially as PNG (lossless, since a slightly-off logo color or blurry edge is more noticeable than in a photo) or, ideally, SVG for vector logos, which can be just a few KB regardless of display size.
Background Images (Full-Width Section Backgrounds)
Target: 100-250KB
These are often large in dimension but usually contain less fine detail (or are partially obscured by text overlays), so they can typically handle more aggressive compression than a hero photo without a visible quality difference.
Quick Self-Check
If you’re unsure whether an image is oversized, a fast gut-check: divide the file’s KB by its displayed width in pixels. A well-optimized web photo generally lands somewhere around 0.1-0.3 KB per pixel of width. An image far above that ratio is a strong candidate for re-compression.
Ready to shrink your images?
Compress and resize JPG, PNG, and WebP files for free, right in your browser. No uploads, no signups, no waiting.
Compress Images Now →Frequently Asked Questions
Do these targets apply to WebP and AVIF too, or just JPG?
The same rough targets apply — WebP and AVIF are simply more efficient at reaching them, often achieving the same visual quality at 25-35% less file size than an equivalent JPG.
What if my image genuinely can’t hit these numbers without looking bad?
Very detailed or high-contrast images (busy textures, fine text, complex patterns) sometimes need a slightly larger budget to avoid visible artifacts. Treat these numbers as a target to aim for, not an absolute ceiling — but if you’re consistently 2-3x over, it’s worth double-checking your compression settings and source dimensions.
Does file format matter more than file size for load time?
File size is what actually determines download time, not the format label itself — but the right format (WebP/AVIF over JPG/PNG) is usually the easiest way to hit a smaller file size without sacrificing visible quality, so the two are closely related in practice.
Is it better to use 4:3 or 16:9?
It depends on your content and where it’s displayed:
– 4:3 is better for traditional photography, print, and tablet screens. It’s a more balanced, squarer format that works well for portraits and product shots.
– 16:9 is better for widescreen displays, video content, and modern monitors. It’s the standard aspect ratio for most TVs, computer screens, and YouTube videos.
For Facebook specifically: 16:9 (1.91:1 crop) is ideal for link previews, while 4:3 can work for photo posts but isn’t the recommended standard.
What size is a 1920×1080 website?
1920×1080 pixels is the screen resolution, not a physical size. On a website, it means:
– The image or element is 1920 pixels wide by 1080 pixels tall.
– On a standard 1080p monitor, it fills the entire screen.
– It has a 16:9 aspect ratio.
– In web design, it’s commonly used for full-width hero images or backgrounds.
There’s no fixed physical size in inches or centimeters — it depends on the screen’s pixel density (PPI).
Is 1080×1350 4×5 or 3×4?
1080×1350 is 4:5 (not 3:4).
Here’s the math:
– 1080 ÷ 4 = 270
– 1350 ÷ 5 = 270
So the ratio is exactly 4:5, which is a portrait orientation commonly used for Facebook and Instagram feed posts.
Check any image’s current size and compress it down to these targets, free and instantly, with our browser-based tool — drag it in and see the before/after file size immediately.