How to compress images for a website, in the right order

A visitor pays for every picture on your page twice: once in the seconds they spend waiting, and once in the data their phone plan meters. Most sites carry far more image than anybody sees, because the pictures were exported once, at whatever size and format the camera or the design tool suggested, and never revisited. Compressing them is the cheapest speed improvement most pages have left. It is also easy to do in the wrong order, spending an afternoon tuning a quality slider on pictures that were simply saved four times wider than the page ever draws them.

This guide is for the person who owns the site rather than the person with one file. It sets out what a page’s images cost, which format each kind of picture should be in before it is compressed at all, the sizes worth serving, and the small set of attributes that stop pictures making a page jump. If you have a single picture and a single upload form, how to compress an image is the shorter road. getPNG prepares the files in your browser and does not host or serve them, so nothing here needs your pictures to leave your device.

The decisions, in the order they pay

Each decision works on the output of the one before it. A quality setting chosen for a picture that is still four times too wide is a setting chosen for the wrong file, and it will have to be chosen again.

What a page’s images actually cost

A megabyte is eight megabits, so the arithmetic is short. A 2 MB picture is 16 megabits, which takes about 16 seconds on a 1 Mbit per second connection and about two seconds on 8 Mbit per second. A page with twenty such pictures is forty megabytes, which is not a page anybody on a phone in a train will wait for. Halve the width of every picture and remove about three quarters of the pixels, and the same page is nearer ten.

Those figures are deliberately plain, because the exact connection your visitor has is not something you can know. What you can know is how many bytes you are asking them to fetch, and that number is set almost entirely by the format and the pixel dimensions of each file. A speed tool such as Google’s PageSpeed Insights will name the pictures that are largest, or served in an older format than they need to be, which is a good way to decide where to begin. For a published page, getReport’s image size checker measures the pictures on it and names the heavy ones, so an hour goes to the files that matter and not to the rest.

1. Choose the format for each kind of picture

Do not pick one format for the whole site. Pick one for each kind of picture, because the kinds are different problems.

Photographs with no transparency belong in JPG or lossy WebP. Both throw away detail the eye is unlikely to miss, in small blocks, and both are many times smaller than the same photograph saved as a PNG, which stores every pixel exactly. Lossy WebP is usually the smaller of the two at the same visible quality.

Cutouts and anything that must stay see-through need a format with an alpha channel. JPG has nowhere to store one at any quality, so a cutout saved as a JPG comes out with a solid box behind the subject. WebP keeps a full alpha channel in both its lossless and lossy modes, and is the usual choice for a page. PNG is the safe choice for a file someone will download and open elsewhere. PNG vs WebP for websites sets out the sizes, quoted from Google’s own WebP documentation, and the places PNG is still the better option.

Logos and icons are best as SVG when they exist as a vector drawing, because they stay sharp at every size and are often a few kilobytes. If all you have is pixels, use lossless WebP or a palette PNG, and keep the artwork’s edges crisp rather than letting a lossy setting soften them.

Screenshots are mostly flat colour and sharp text, which is exactly what lossless compression is good at. Keep them lossless, cut the colour palette if the file is still large, and avoid a lossy setting that can smear small text.

If you are unsure what a file actually contains, or whether a transparent PNG was flattened somewhere on its way to you, a fake transparent PNG shows how to tell.

2. Serve the sizes worth serving

After the format, the size is the biggest lever, and it is the one most sites leave alone. File size follows the number of pixels, and pixels grow with the square of the width. A photograph saved at 4,000 by 3,000 pixels is 12 million of them. The same photograph at 1,200 by 900 is about a million, roughly an eleventh, before any compression setting has done anything.

So the working question is what the widest display is. Look at the largest space a picture ever fills, in CSS pixels, and double it, because phones and many laptops draw two device pixels for every CSS pixel. An image that fills a 600 pixel column is well served at 1,200. A hero picture that spans a 1,200 pixel layout is well served at 2,400, and nothing beyond that is seen by anybody. A thumbnail shown at 150 pixels needs 300.

One file rarely suits every screen, and a phone should not download what a wide desktop needs. Export two or three widths of each picture that changes size across the layout, and let the browser pick:

<img
  src="mug-800.webp"
  srcset="mug-400.webp 400w, mug-800.webp 800w, mug-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="800"
  alt="Blue ceramic mug on a transparent background">

The srcset lists the files and how wide each is, and sizes tells the browser how wide the picture will be drawn, so it can choose before it downloads anything. A phone on a narrow screen fetches the 800 pixel file, or the 400, and only a large screen asks for the 1,600.

Keep the full-size original somewhere safe. Resizing is the one step that cannot be undone, and a picture exported too small can only be recovered from the master. If a picture is too small for the space rather than too large, that is a different problem, covered in what AI upscaling can and cannot do.

3. Set the quality once, and look at the edge

With the format and size right, the quality setting trims what is left. For a photograph as JPG or lossy WebP, a setting around 75 to 85 is usually indistinguishable from the original at page size and much smaller. Go down a step or two and look again. Past a point the blocks appear around hard edges and text, and that is where to stop.

For a transparent PNG you have to keep, there is no quality slider, because nothing is being approximated. The lever is the colour palette. A cutout has a lot of soft alpha edge to protect, but large areas of similar colour, so a well-chosen palette is often hard to tell from the original while the file is a half to a fifth of the size. /compress-png works out the smallest palette that still matches each picture, keeps the soft edge, does a whole folder at once, and never resizes the picture, so the size step above stays yours. How to reduce a PNG’s file size covers the other tools that do the same, and compressing an image to an exact size covers the case where a platform sets a number in kilobytes.

The check that matters is the edge, not the file size. Zoom to 100 percent, or 200 on a dense screen, and look at hair, a shadow, a thin coloured line or a line of small text. That is where damage shows first, well before the rest of the picture looks any different. A saving that leaves a fringe on every product image is not a saving.

Do this once, on a copy. Every later re-save of a lossy file discards a little more, so a picture compressed, edited and compressed again is worse than one compressed once from the master.

4. Metadata, briefly

Pictures carry notes besides the pixels: the camera and lens, the time, a colour profile, and sometimes the place they were taken. On a photograph they are a small share of the bytes, but on a small file such as an icon or a thumbnail they can be a real fraction. There is also a reason to remove them that has nothing to do with speed: pictures published on a site can tell anybody who downloads them when and where they were taken. /remove-exif-data lists what a file carries and takes it out without re-encoding the picture. It keeps the colour profile and the orientation tag unless you untick them, and those are worth keeping, because the first changes how colours are drawn and the second turns a phone photo the right way up.

5. Tell the browser what is coming

A well-compressed picture can still make a page feel slow if the browser does not know how much room to leave for it. Three attributes do most of the work.

• Width and height. Give every img its natural dimensions. The browser then reserves the space before the file arrives, and the text below does not jump down when the picture appears.
• Lazy loading. Add loading="lazy" to pictures below the first screen, so a visitor who never scrolls that far never downloads them.
• Leave the first screen alone. The largest picture at the top of the page is what a visitor is waiting for. Do not lazy-load it, because that delays exactly the picture that matters most.

None of these saves a byte. They change when the bytes are spent, and whether the page moves while they arrive.

What does not help

• Shrinking a large file with CSS. Setting a width in the stylesheet changes how big the picture is drawn, not how much of it is downloaded. The visitor still fetches every pixel.
• Compressing the same file repeatedly. Each pass on a lossy format loses a little more, and each pass on a palette PNG has less left to give. If the first pass did not do enough, a different lever is needed.
• Zipping the images. They are already compressed formats, and a zip file finds almost nothing more to remove.
• Leaving it to the platform. Many hosted builders and image services convert uploads for you, which is welcome, but they start from the file you give them. A large original that is never resized is a large file on the server, and reducing an image’s file size ranks the levers you can pull before uploading.

The short version

Decide the format for each kind of picture first: JPG or lossy WebP for photographs, WebP or PNG where transparency has to survive, SVG or lossless WebP for logos. Then export no wider than twice the widest the picture is drawn, in two or three widths where the layout changes. Then set a quality around 75 to 85 once, on a copy, and check an edge at full size. Add width and height to every image, lazy-load the ones below the first screen, and keep the master files, because the pixels you throw away for a page are the ones you cannot get back.

The steps, in short

1. List the pictures and what each one is. Sort them into photographs, cutouts with a transparent background, and logos or screenshots. Each group gets a different format, and mixing them up is the commonest reason a page stays heavy after everyone has 'compressed the images'.
2. Choose the format for each group. Photographs go to JPG or lossy WebP. Cutouts stay WebP or PNG, because JPG cannot hold transparency. Logos and icons go to SVG if they exist as vectors, and to lossless WebP or a palette PNG if they do not.
3. Work out the widest size each picture is shown at. Look at the widest a picture ever appears on your page, in CSS pixels, and double it for high-density screens. That number is the largest file worth serving. Anything wider is bytes no visitor can see.
4. Export the sizes you need. For an image that fills different widths on a phone and a desktop, export two or three widths and let the browser choose with srcset and sizes, so a phone is not sent the desktop file.
5. Set the quality once, then compare. Around 75 to 85 for a JPG or lossy WebP, or a reduced colour palette for a PNG. Compare the result with the original at 100 percent on an edge or a line of text, and keep the last setting where nothing looks different.
6. Add the attributes the browser needs. Give every image its width and height so the page does not jump as it loads, load the ones below the first screen lazily, and leave the biggest picture on the first screen alone.

Questions

What is the best image format for a website?

For most pictures, WebP: it keeps transparency, and it is smaller than both PNG and JPG at the same visible quality. JPG is still a sound choice for a photograph with no transparency, and PNG for anything a person will download and open in another app. SVG is better than any of them for a logo or icon that exists as a vector drawing. The PNG vs WebP guide on this site has the sizes and the browser support behind that.

How small should images on a website be?

There is no single number, because it depends on how wide the picture is shown. A useful rule is to serve a file no wider than twice its displayed width, and to keep the byte size low enough that the first screen does not wait on it. A 2 MB picture is 16 megabits, which is about 16 seconds on a 1 Mbit per second connection and two seconds on 8. Smaller than that is almost always available for a picture shown at 800 pixels wide or less.

Does compressing images hurt SEO?

Compressing them well helps. Lighter pictures load faster, and speed is part of how a page is experienced. What hurts is compressing so far that a picture looks blocky or blurred, or removing the alt text and file name in the process. Those two, and the words around the picture, matter far more to how an image is understood than its format does.

Should I compress images before uploading to WordPress or Shopify?

Yes, resize and compress them first. Many platforms make smaller copies for you, but they start from the file you upload, so a 6 MB original stays a large file on the server and is sometimes still served when the platform's copy is not chosen. A picture that is already the right size and format gives the platform less to do and less to get wrong.

Is it better to compress images or resize them?

Resize first. File size follows the number of pixels, and the number of pixels grows with the square of the width, so halving the width removes about three quarters of the pixels before any compression setting has been touched. Compression then works on what is left, and its quality or palette setting can be gentler because there is less to hide.

How do I compress images for a website without losing transparency?

Keep the picture as WebP or PNG. Lossy WebP keeps a full alpha channel and is usually much smaller than the PNG it came from. If you have to stay with PNG, reduce its colour palette, which keeps the alpha channel. getPNG's compress-png tool does that in your browser without uploading the file, and never resizes the picture itself.