Image File Size Targets: How Small Should an Image Be?

Why targets help

When you compress an image, you need to know when to stop. Without a target, it is tempting to keep going until the file is as small as possible, which ruins the quality, or to stop too early, which leaves heavy files. A target gives you a goal that matches the purpose of the image. The numbers below are rules of thumb, not standards, and the right value always depends on the picture itself.

Judge each result by looking at it at the size where it will be used. If it looks good and the file is within the range, you are done.

Hero and banner images

A large image at the top of a page is the most important image for loading speed, because it is often the largest element in view. For a full-width hero image of about 1920 pixels, a target of 100 to 300 KB is realistic with JPEG or WebP at a quality of 70 to 80, depending on the picture. Simple pictures with smooth areas can be smaller, busy photos are larger.

If your hero image is over 500 KB, there is almost always room to reduce it by resizing, converting to WebP or lowering the quality a few steps.

Content images and blog photos

Pictures inside an article, shown at 700 to 800 pixels wide, usually need much less: 50 to 150 KB at 1200 to 1600 pixels wide, so that they stay sharp on dense screens. A page with five such images then carries well under a megabyte of pictures. Screenshots with text may need a bit more, in the range of 100 to 250 KB, to stay readable.

If a page has many images, apply lazy loading to those below the visible area, so that the first view stays light.

Thumbnails and icons

Small pictures in lists, shown at 150 to 400 pixels, can be 10 to 40 KB. Compress them harder than large images, since artifacts are hard to see at a small size. Do not reuse a large image scaled down by CSS as a thumbnail, because the browser still downloads the full file. Create real thumbnails instead.

Icons and logos are often better as SVG, which is tiny and sharp at any size. If you use PNG for an icon, a few kilobytes is a reasonable target.

Product photos

For a shop, product photos in the main view, at 800 to 1200 pixels, can usually be 80 to 200 KB, with a higher quality for products with fine detail. Zoom images at 1600 to 2000 pixels may be 200 to 400 KB, and they load only when needed. Keep the same quality across a collection, so that the shop looks consistent.

Do not sacrifice sharpness here: product pictures help customers decide, and visible artifacts reduce trust.

Email and upload forms

For email, the limits of the provider matter more than a target: Gmail allows 25 MB per outgoing message, Outlook.com 20 MB, and attachments grow by about a third when they are encoded. As a practical target, photos of 200 to 500 KB each at 1600 pixels are small enough for a handful of attachments and sharp enough for screens. For upload forms, follow the stated limit and leave a margin of about 10 percent.

Documents and scans need higher quality for legibility, so they are larger, often 300 to 800 KB per page.

Social media and previews

Platforms recompress uploads, so aim for a clean, moderately compressed file: 1080 to 2048 pixels on the long side, a few hundred kilobytes to about 1 MB, depending on the picture. For link preview images with a size of 1200 by 630 pixels, 100 to 300 KB is a good range, and well under 1 MB is the usual advice.

Check the current recommendations of the platforms you use, because they differ and change.

Using the targets

Treat the numbers as starting points. Add a representative picture to the compressor, set the maximum size for the use, start with a quality of 75, and look at the size in the list. If it is above the range, lower the pixel dimensions first, then the quality in steps of five. If it is far below the range, you may be able to raise the quality.

Repeat the check for a few different pictures, because file size depends on content. A smooth sky compresses to a fraction of a busy forest at the same settings. When the result looks right and the size fits, apply the same settings to the whole batch.

An example from a real page

Take a typical landing page. It has a hero image at 1920 pixels, three feature pictures at 800 pixels, a team photo, a logo and a favicon. A sensible budget gives the hero 200 KB, each feature picture 60 KB, the team photo 150 KB and the logo a few kilobytes as SVG. The total for pictures is then about 550 KB, which loads quickly on a mobile connection and leaves room for scripts and fonts.

If a page is well above such a budget, do not guess: open the Network panel, sort by size and start with the largest file. Fixing the top three images usually delivers most of the possible saving.