Images for your website: which format to use and what size

Almost every slow website we review has the same culprit, and it is not the code: it is the images. A photo taken on a phone and uploaded as-is weighs as much as thirty full pages of text. Multiply that by the ten products someone loaded that afternoon and the site goes from opening in one second to opening in eight.

The good news is that fixing it requires no design or coding knowledge. It requires three decisions: which format, what size and how much weight. This guide explains all three in plain language, so whoever uploads the content — often not the person who built the site — can decide without asking.

First, the short rule

If you take only one thing from this page, take this:

• Is it a photograph? → WebP, and if you cannot, JPG.
• Does it need a transparent background, or does it have text and crisp edges? → PNG, or better still WebP if your tool allows it.
• Is it a logo, an icon or a line graphic? → SVG.

That settles ninety per cent of cases. The rest of this guide is the why and the details.

The formats, one by one

JPG (or JPEG), the old faithful

It has been the photography format for thirty years. It compresses by throwing away information the eye tends not to notice, so the more you compress it, the less it weighs and the worse it looks. On ordinary photos it holds up very well.

Its limit: it does not support transparency. Save a logo as JPG and what used to be a transparent background becomes a white rectangle, obvious the moment you place it on any colour that is not white.

Use it for: photos, when you cannot use WebP.

PNG, the transparent one

PNG stores the image without losing a single pixel, and it supports transparency. That makes it perfect for logos, screenshots and any graphic with text or straight lines, which in JPG come out with a dirty halo around them.

Its limit is the opposite one: for photographs it is enormous. A landscape in PNG can take ten times what the same landscape takes in JPG without looking any better. It is the most common mistake we find.

Use it for: transparency, screenshots, graphics with text.

WebP, the one to use by default

This is the format that replaces both of the above. It does what JPG does and what PNG does — transparency included — at roughly 30% less weight for the same quality, according to Google’s own testing.

The question we always get: will my customers be able to see it? Yes. Every current browser supports it, Safari included since 2020. It is no longer a gamble.

Use it for: almost everything. It is the default choice.

AVIF, the lightest

It is the newest and the most efficient: on large photos and gradients it usually goes considerably below WebP. In exchange, it takes longer to generate and some older tools still do not export it.

Every modern browser supports it — Safari was the last to join, in 2023 — and well-built sites serve it to whoever can see it and serve WebP to everyone else, automatically.

Use it for: large photos, if your tool allows it. If it does not, no harm done: WebP is plenty.

SVG, the one that never pixelates

SVG does not store pixels, it stores drawing instructions. That is why it stays sharp at any size, on a phone and on a boardroom screen, and it usually weighs a few kilobytes.

It is the correct format for your logo. If your agency only handed you the logo as JPG or PNG, ask for the SVG: it is yours, and you will need it every time something changes. The full story — including why the one they export weighs ten times what it should — is in what an SVG is and why to use one.

Use it for: logos, icons, line illustrations, simple charts. Do not use it for: photographs, because that is not what it is.

And GIF

For short animations there are far better options today — a video or an animated WebP weighs a fraction. GIF is still useful for one thing: letting someone share it in a chat without thinking about it.

What size should each image be?

There is one idea to grasp here: today’s screens pack twice the dots they used to. So an image displayed at 600 pixels wide needs to be uploaded at around 1200 to look sharp. Twice, no more — uploading a 6000-pixel photo to display it at 600 does not improve it, it only makes it heavy.

If you are curious about your own, this page tells you your screen’s density — the 1×, 2× or 3× we are talking about — along with its resolution.

Dimensions that work on most sites:

• Hero or large header: 2400 × 1200 px (2:1). There is never any need to go beyond 2560 px wide.
• Article cover or card: 1200 × 675 px (16:9). Same proportion as video, so it fits almost every template.
• Product photo: 1600 × 1600 px (square). Square is the safest format for catalogues, because every product occupies the same space in the grid even when some are tall and others wide.
• Team photo or portrait: 800 × 800 px.
• Logo: SVG. If it has to be PNG, 512 px wide with a transparent background.
• Social sharing image: 1200 × 630 px. That is the size almost every platform uses for link previews.

If you need to crop to a given proportion and would rather not do the arithmetic, we have an aspect ratio calculator that does exactly that.

What matters is not hitting the exact pixel, it is hitting the proportion. If your template expects a landscape image and you upload a portrait one, the system will crop it wherever it can — and that is how people end up with their heads cut off in team photos.

How much should it weigh?

As a practical reference, knowing every site is different:

• Large header: under 200 KB.
• Product or article photo: under 150 KB.
• Thumbnails and cards: under 80 KB.
• SVG logo: a few KB.

If a single image weighs more than half a megabyte, there is almost certainly room to improve. And if it weighs more than two, it is a photo that came off a phone without stopping anywhere.

This is not perfectionism: how long your page takes to appear is part of the experience your visitor takes away, and part of what the search engine measures.

The five mistakes we see most

1. Uploading straight from the phone or camera. Those images are made for printing: 4000 or 6000 pixels wide and several megabytes. Resize them first.
2. Saving photographs as PNG. Several times the weight, no better looking.
3. Saving the logo as JPG. The white rectangle shows up the moment the background is not white.
4. Putting text inside the image. It cannot be translated, a search engine cannot read it, a screen reader cannot read it, and it blurs as soon as the image is rescaled. If the text matters, make it text.
5. Enlarging a small image. A 400 px photo stretched to 1200 does not gain detail, it gains blur. If you do not have a large original, better to use it small.

Before uploading: thirty seconds well spent

• Crop to the proportion the template expects.
• Resize to twice the size it will be displayed at.
• Export as WebP if you can; otherwise JPG for photos and PNG for transparency.
• Compress as far as the image takes it without the difference showing.
• Name the file with real words: ergonomic-office-chair-black.webp, not IMG_20250610_0043.jpg. The name gets read too.
• Write the alternative text: one sentence describing what is shown. It is what someone who cannot see the image hears, and what the search engine understands.

A free tool that handles the first four steps

Squoosh is the one we recommend when someone asks where to start. It is free, asks for no account, and runs inside your browser: drag the image in, pick the output format — JPG, PNG, WebP or AVIF — set the size and quality, and download.

Two things make it particularly useful here:

• It shows you the result before you download it. Original and compressed sit side by side, with the final file size of each. You can lower the quality to the point just before the difference starts to show, which is exactly what you want and what nobody can judge by guesswork.
• The images never leave your computer. The whole process happens in your own browser; nothing is uploaded to a server. For unreleased product shots, or material under an NDA, that difference matters.

A full pass takes two minutes: open Squoosh, drag the photo in, set the width, choose WebP, lower the quality until you are close to 150 KB, download and upload. That is ninety per cent of the work this guide describes.

One last reassurance

If your site is well built, a good part of this happens on its own: it generates versions at several sizes, converts them to WebP or AVIF depending on what each browser accepts, and loads what is visible first. Your job comes down to uploading an original with the right proportion, enough resolution and no wild file size.

That said: no tool can fix a badly cropped photo, a logo with no transparency, or text baked into a JPG. That part is still human, and it is thirty seconds per image.