A three-step workflow for site owners, designers, and bloggers: pick the right format, scale to retina-friendly dimensions, then compress to a sane quality target. The result is an image that looks sharp on modern devices and loads quickly even on a slow connection. All three tools run in your browser.
Drop your source image into the image converter and select WebP as the output format. The converter keeps the original dimensions and colour profile, only the encoding changes.
Look at the page or template the image will appear in. Note the maximum width the image will actually render at, in CSS pixels. Common values are 800 for in-article images, 1200 for hero sections, and 320 for thumbnails.
Open the image resizer and drop the WebP file. Set the width to double the display width: 800 becomes 1600, 1200 becomes 2400, and so on. Leave the height field empty so the aspect ratio is preserved.
Download the resized image, then open the image compressor and drop it in. Set the quality slider to 80. WebP at 80 lands in a sweet spot between file size and visual quality for most photographs.
Check the projected output size. For a typical 1600-pixel-wide photograph you should see numbers between 100 KB and 250 KB. Save the result and serve it from your site.
Expected output and how to verify
Open the final file in a new browser tab. The format pill in the tab or info panel should read WebP and the displayed dimensions should match the resize target. Drag the page width back and forth on your site and confirm the image stays crisp without obvious softness. A quick before-and-after file-size comparison should show a noticeable reduction.
Display width (CSS px)
Export width (real px)
Typical WebP size
320
640
25 to 60 KB
800
1600
100 to 250 KB
1200
2400
200 to 450 KB
Common pitfalls
Skipping the resize step and shipping a 4000-pixel image into an 800-pixel slot wastes bandwidth. Always resize to roughly twice the rendered width.
Re-compressing an already compressed JPEG before converting can bake in artefacts. Convert from the cleanest source you have.
Quality 80 is great for photos but can soften flat illustrations or screenshots. For those, try 85 or a lossless WebP export instead.
Variations
For sites that still need broad fallback support, export a second copy as JPEG at quality 82 and use a picture element to serve WebP first. For art-directed responsive images, repeat the resize step at several widths (640, 1280, 1920) and let the browser pick the right one with a srcset attribute.
Frequently asked questions
Why convert to WebP first?
WebP usually produces 25 to 35 percent smaller files than JPEG at the same visual quality, and modern browsers handle it natively. Converting first means the resize and compress steps work on the format you actually ship.
Why resize to twice the display width?
High-density displays draw two source pixels for every CSS pixel. Serving an image at twice the rendered width keeps it sharp on retina screens without going overboard on file size.
Is quality 80 always the right setting?
Quality 80 is a strong default for photographs. For illustrations, flat colour, or screenshots, try quality 85 or convert to lossless WebP instead so flat areas stay crisp.
Do I need a fallback for older browsers?
WebP is supported by every major browser released in the last several years. If you need a fallback for very old browsers, keep a JPEG copy alongside and serve it with a picture element.