How to Optimize Images for a Website

To compress images for a website, resize each one to the width the page shows it at, then convert it to WebP and choose the quality during that conversion. A photo from a phone or camera is usually thousands of pixels wide, far more than a page column can show, and every one of those pixels costs bytes. Resize Image trims the pixels, and JPG to WebP or PNG to WebP does the rest. All three run in your browser, so your images are never uploaded.

The three steps, in order

Optimizing an image for the web comes down to three steps, and the order changes the result:

1. Resize it to the width it displays at, or up to twice that for sharp phone and laptop screens.
2. Convert it to WebP, setting the quality as you convert.
3. Check it at display size, and go back to the resized original if it needs another try.

Step 1: Resize to the width the page shows

To resize an image for a website, first find out how wide it appears on the page. On a live site, right-click the image in Chrome, Edge or Firefox and choose Inspect, and the developer tools show the size the image is drawn at. If the page isn't built yet, your theme or template's content width is a fair stand-in.

Export at that width for ordinary screens. High-density screens, common on phones and laptops, pack more pixels into the same space, so an image at about double the display width stays sharp there. One shown in a 600px column is well served at 1200px.

Then, in Resize Image:

1. Add your image, or several at once.
2. Type the width into "Width (px)". With "Lock aspect ratio" ticked, which it is by default, the height fills itself in. The "New size" line shows the result next to the original size before you commit.
3. Click Resize and download. Several files come back together in one zip.

A JPG comes back as a JPG, a PNG as a PNG and a WebP as a WebP, under the same file name. JPG and WebP files are re-saved at quality 0.92, a high setting, so the resize itself costs very little detail. In a batch, every file gets the width you typed and keeps its own proportions, so portrait and landscape photos can go through together.

Don't type a width larger than the original. The tool will enlarge an image if you ask it to, and enlarging adds pixels and bytes without adding any detail. If the "New size" figure is bigger than the "from" figure beside it, lower the width. How to resize an image covers choosing dimensions in more depth.

Step 2: Convert to WebP and pick the quality

To convert images for the web, use JPG to WebP for photos and PNG to WebP for logos, screenshots and anything with a transparent background. WebP files are generally smaller than JPGs of similar quality, and unlike JPG they keep transparency. In our test, a 1000 x 700 PNG with a transparent corner came out of PNG to WebP at 1000 x 700, with the corner still transparent.

Both converters have one control, a "WebP quality" slider from 0.4 to 1 that starts at 0.85. The output keeps the pixel dimensions of the file you give it, which is why resizing comes first: the converter makes the file lighter but never makes the image any smaller in pixels. For a photo, start at 0.85, check the result, and lower it if the file is still heavy. How to convert an image to WebP covers the setting in detail, including the lossless mode at exactly 1, and JPG vs WebP covers the cases where WebP is the wrong choice.

Why resize first and convert second

Resize first so that the conversion is the last lossy save. Each lossy save throws away a little detail, which is called generation loss, and the last save sets the file's final quality.

Run the steps the other way round and the resize re-saves your new WebP at 0.92, overriding the lower quality you picked in the converter, so the file usually ends up heavier. In the right order, a JPG gets two saves: a high-quality one from the resize, then yours. A PNG gets only one lossy save, because resizing a PNG keeps it a PNG, and PNG is lossless.

The same logic rules out a second pass through a compressor. If the WebP is too heavy, go back to the resized original and convert it again at a lower quality, rather than compressing the WebP you just made.

Step 3: Check the result at display size

Open the WebP at the size it will appear on the page and look at the fine detail: hair, leaves, text and sharp edges. If you see smearing or blocky patches, convert again from the resized original at a higher quality. If it looks clean, try a lower one. The smallest setting that still looks right is the one to keep.

The conversion also drops the photo's hidden details. When we converted a JPG carrying an EXIF block, the WebP came out with none, because the converter draws the pixels into a new file. That matters for phone photos, whose EXIF data can include the GPS location where they were taken.

Images that don't need the full treatment

For a WebP that's already on your site and too heavy, when you no longer have the original, Compress WebP re-encodes it. Its "Compression quality" slider runs from 0.3 to 1 and starts at 0.75, and at a quality setting it never hands back a file bigger than the one you gave it. It also has a "Target max size in MB" box. If quality alone can't reach that target, the tool shrinks the image's width and height until the file fits. In our test, a 1600 x 1000 WebP given a 0.1MB target came back at 1261 x 788. That undoes the sizing from Step 1, so for an image on a page, use the slider.

For a photo that's already the right size and format, where you only want the camera details and location gone, Remove EXIF Data deletes the metadata without re-encoding. The image data is copied byte for byte, so quality and dimensions don't change, and the colour profile stays so colours don't shift. It takes JPG, PNG and WebP.

Quick reference

Image	What to do	Tools
Phone or camera photo (JPG)	Resize, then convert to WebP	Resize Image, then JPG to WebP
Logo, icon or screenshot (PNG)	Resize, then convert to WebP	Resize Image, then PNG to WebP
Cut-out with a transparent background	Resize, then convert; transparency is kept	Resize Image, then PNG to WebP
WebP already on your site, too heavy	Re-encode at a lower quality	Compress WebP
Photo going up as it is	Remove the metadata only	Remove EXIF Data

FAQ

What size should images be for a website?
As wide as the space they fill on the page, or up to about twice that for high-density screens. No single file size suits every image: a full-width photo at the top of a page needs more bytes than a thumbnail. Resize to the right width first, then judge the file size.

Should I use WebP or JPG on my website?
WebP, for pages you control: every current major browser displays it. Keep JPG or PNG for files you send to people or to other software, which may not open WebP. PNG vs WebP covers graphics and transparency.

Can babapic make AVIF files?
No. AVIF can make smaller files than WebP, but none of babapic's converters output it. WebP vs AVIF compares the two and explains why WebP is the easier choice for most sites.

Will optimizing make my images look worse?
Resizing to the display width removes pixels the page wouldn't have shown. The WebP step is lossy at any setting below 1, so check the result at display size and raise the quality if you can see a difference.

Are my images uploaded anywhere?
No. Resize Image, the two WebP converters, Compress WebP and Remove EXIF Data all run inside your browser tab, so your files stay on your device.