How to Optimize Images for Your Website: Size, Format and Quality
On this page
Short answer: to optimize an image for the web, (1) resize it to the size it is actually shown at, (2) save it in an efficient format such as WebP, (3) use a quality of about 75–85% and (4) remove metadata. In Imgovo’s Image Compressor you can do all of this in one step, and nothing is uploaded.
Why it matters
Images are often the largest part of a web page. Large images slow down loading, which can hurt the experience of visitors and search performance. Google’s Core Web Vitals measure Largest Contentful Paint (LCP), and a good LCP is 2.5 seconds or less. On many pages the LCP element is an image.
Smaller files also use less mobile data and storage.
The four levers
1. Dimensions
A 6000 × 4000 pixel photo shown at 800 pixels wide wastes most of its pixels. Resize it to roughly the displayed width, or up to about twice the displayed width for sharp display on high-density screens.
The compressor has a “Max width / height” setting with presets: keep original size, 3840, 2560, 1920, 1600, 1280, 1080, 800 and 640 px, plus custom. Resizing is proportional, and it never enlarges a smaller image.
2. Format
| Format | Best for | Notes |
|---|---|---|
| JPG | Photos | Works everywhere |
| WebP | Photos and graphics | Small files, widely supported by modern browsers |
| AVIF | Photos | Usually the smallest files, but encoding is slower and older software may not open it |
| PNG | Screenshots, logos, graphics, transparency | Lossless; the quality slider does not apply, only resizing makes it smaller |
A good combination is a smaller size (for example 1920 px wide) in WebP or AVIF. For help choosing, see JPG vs PNG vs WebP vs AVIF.
3. Quality
| Quality | Use |
|---|---|
| 75–85% | Web and social media |
| 60–70% | Very small files |
| Above 85% | Printing |
JPG and WebP at 70–85% typically cut the size of photos by roughly 50–80%. Compression is irreversible for JPG, WebP and AVIF, even at quality 100, so keep your original files.
4. Metadata
The compressor’s output contains pixel data only, so EXIF data such as camera details and GPS location is removed. That makes the file smaller and protects privacy. See How to remove GPS location and EXIF data.
Step by step in the Image Compressor
- Open the Image Compressor and add one or more images by dragging them in, choosing files or pasting.
- Choose Compress by: Quality (slider, default 80%) or Target file size (for example 100 KB).
- Set the maximum width or height.
- Choose the output format: JPG, WebP, AVIF (labelled “smallest”) or PNG.
- Compare the original and compressed previews side by side.
- Download the result. If the new file is larger than the original, the tool warns you and you can download the original instead.
If the file size limit cannot be reached, the tool says so and gives you the smallest result it could make. For small limits, see How to compress an image under 100 KB.
A practical checklist for web images
- Resize before you compress. Reducing the dimensions often saves more than lowering the quality.
- Choose the right format. Photos: WebP or AVIF with JPG as a fallback where needed. Graphics: PNG or WebP.
- Aim for sensible sizes. As a rule of thumb, many content photos can be kept under about 150 KB and large hero images under about 300 KB, but it depends on the image and the design. Check the result visually.
- Describe the image. Add meaningful alt text and a descriptive file name, such as
red-bicycle-leaning-on-wall.webp. - Reserve the space. Set the width and height in your page so the layout does not jump while the image loads.
- Load below-the-fold images lazily, but not the main image at the top of the page.
- Keep your originals in a safe place so you can export new versions later.
Common mistakes
- Uploading camera originals. A 6 MB photo is almost never needed on a web page.
- Saving the same JPG over and over. Each lossy save can reduce quality. Always start from the original.
- Using PNG for photos. The files are much larger than JPG or WebP.
- Over-compressing. Below about 60% you may see blocks and blur. Check the preview.
Privacy
Compression runs in your browser. Your images are not uploaded, and you can confirm how Imgovo handles files in Are online image converters safe?
Try it now
Open the Image Compressor, add your image and compare the preview. For a quick resize only, use the Image Resizer; to change format, use Convert Image.
Frequently asked questions
What is the best image format for a website?
For photos, WebP is a safe default and AVIF gives the smallest files. JPG is still universal. Use PNG for screenshots, logos and graphics that need sharp edges or transparency.
What quality setting should I use?
About 75–85% is a good range for web and social media, 60–70% for very small files, and above 85% for printing. JPG and WebP at 70–85% typically cut photo sizes by roughly 50–80%.
How wide should a web image be?
As wide as it is shown, or up to about twice that for sharp display on high-density screens. A photo shown 800 px wide rarely needs more than 1600 px. Presets from 640 to 3840 px are available in the Image Compressor.
What if I need a specific file size, such as 100 KB?
Use Target file size. The tool tries quality levels to stay under your limit and reduces the dimensions in steps if needed. If the limit cannot be reached, it tells you and gives the smallest result it could make.
Can I make an image bigger with the tool?
No. The compressor never enlarges a smaller image. Enlarging adds pixels, not detail.
Are my images uploaded?
No. Compression runs in your browser, and your images never leave your device.