The format that made pages faster

WebP began as a container for a video codec's keyframes and grew into a still-image format with two personalities: a lossy mode that competes with JPG and a lossless mode that competes with PNG. Both are wrapped in the same file extension, which is why two WebP files can behave very differently when you inspect them.

The lossy mode works on blocks of pixels and predicts each block from its neighbours, then stores only what the prediction got wrong. That is why it wins on photographs, where neighbouring pixels really are similar, and why it can struggle with fine repeating texture like knitted fabric or a chain-link fence at a low quality setting. The lossless mode, by contrast, is a compression scheme that keeps every pixel exactly; it typically lands at 60 to 80 percent of the PNG size for screenshots and logos, and it keeps transparency.

The two numbers that matter

Quality and size are not the same axis. A quality of 82 at 2400 pixels and a quality of 82 at 1200 pixels produce very different files, because the second one has four times fewer pixels to describe. On a website the practical order is: resize first to the width the layout actually uses, then pick the quality. A hero image that renders at 900 pixels does not need to be 2400 pixels wide, and no quality setting fixes that mistake.

For photographs, 78 to 85 percent is the band where compression stops being visible on a normal screen. For flat graphics, go higher or switch to lossless; the savings from pushing a logo to 60 percent are small and the artefacts around sharp letters are obvious.

Why transparency changes the decision

JPG has no alpha channel. A transparent PNG saved as JPG gets a background colour chosen by the encoder, often white or black, and logos that looked clean suddenly sit in a visible box. WebP keeps the alpha channel and compresses it too, so a cut-out product shot stays a cut-out. When a system demands JPG anyway, flatten deliberately onto the colour of the page it will sit on.

Metadata, privacy and the small print

Re-encoding through a canvas, which is what every browser-side converter does, drops EXIF. That removes the GPS coordinates, the camera model and the original capture time. For a photo going onto a marketplace that is usually good; for an archive it means the file is no longer the negative. Keep originals in a separate folder and treat converted files as web assets.

Browsers differ slightly in how aggressively they encode. Chrome and Edge generally produce the smallest WebP at a given quality, Firefox is a little more conservative, and Safari's encoder has improved a lot since 2023 but still rounds some settings. If pixel-identical output across machines matters, do the conversion once and store the result instead of regenerating it.

When not to use WebP

• Files destined for print: give the shop a JPG at the highest quality or a TIFF.
• Documents and contracts where the receiving software is unknown.
• Images that will be edited again and again: keep a PNG or the RAW original and convert only the export.

Used with those limits in mind, WebP is the cheapest performance win available to a small site: same pictures, a third less data, transparency included, and no plugin or server change required. Convert a batch once, keep the originals, and the rest of the site gets faster for free.

A migration order that does not break anything

Convert the largest images first. A hero banner at 2400 pixels costs more than forty thumbnails, and it is where the saving is visible on a slow connection. Then move the product grid, then the blog, and leave the logo and favicon for last: they are small, and a browser that struggles with WebP will look worse on an icon than on a photograph.

Keep the original extension in the file name while you test — photo-1920.webp next to photo-1920.jpg — so a rollback is a one-line change rather than a re-export. Publish, watch the error rate and the loading time for a week, then delete the duplicates. Sites that skip this step end up with three generations of the same picture in a folder and no idea which one the page still points at.

Finally, set a rule for the future instead of repeating the migration: images enter the repository at the size the layout uses, in WebP, with the source file kept in a separate folder. One rule, written down, prevents the next folder of 4000-pixel photographs from arriving in six months.