How to Optimise Images for the Web
A complete guide to compressing, resizing, and converting images for maximum web performance — with free browser tools.
Overview
Images are typically the largest assets on a webpage, often accounting for 50-70% of total page weight. Optimising images is the single highest-impact performance improvement for most websites.
**Choose the Right Format**
JPEG for photographs. PNG for screenshots, logos, and images with transparency. WebP for everything else — it offers superior compression compared to both JPEG and PNG with modern browser support.
**Compress Without Visible Quality Loss**
Most image compressors allow you to choose the quality level. At 75-85% quality, the difference is imperceptible to human eyes but the file size drops dramatically. A 3MB JPEG can often become 300KB at 80% quality.
**Resize to Display Dimensions**
Never use a 2000px image when it will only be displayed at 400px. Use the Image Resizer to scale images to their actual display dimensions before uploading.
**Use Responsive Images**
Serve different sizes for mobile and desktop using HTML srcset attributes. The Image Resizer makes it easy to create multiple sizes of the same image.
Step-by-Step Guides
- 1Open the Image Compressor.
- 2Upload your JPEG, PNG, or WebP image.
- 3Set quality to 80% (adjust if needed) and select WebP output for best compression.
- 4Compare the before/after file sizes and download if satisfied.
- 1Open the Image Resizer.
- 2Upload your image and enter the target width in pixels.
- 3Enable "Maintain aspect ratio" to prevent distortion.
- 4Download the resized image.
- 1Use the Image Resizer to scale to the correct dimensions (1200×630 for OG, 1200×675 for Twitter).
- 2Use the Image Compressor to reduce below platform upload limits.
- 3Check text contrast over images with the Contrast Checker.
- 4Use the Image Cropper to frame your focal point if needed.
Recommended Tools
Frequently Asked Questions
What image compression level should I use?
75-85% for photographs is usually the sweet spot. Use 90%+ for images with text or fine detail. WebP at 80% typically beats JPEG at 85% for both size and quality.
Should I use WebP for all images?
WebP is supported by all modern browsers (Chrome, Firefox, Safari 14+, Edge). Use it for all images unless you need to support Internet Explorer.
How do I know if my images are too large?
Run your page through Google PageSpeed Insights or GTmetrix. "Serve images in next-gen formats" and "Efficiently encode images" are the most common image warnings.
What is the ideal file size for blog images?
Aim for under 100KB for decorative images and under 200KB for hero images. Feature images can go to 300KB if necessary.