Start with dimensions before quality
A common mistake is uploading an image far larger than the space where it will appear. If a website displays an image at roughly 1200 pixels wide, keeping a 5000-pixel-wide copy for that same display usually adds unnecessary data.
Resize the image to the largest dimensions it genuinely needs before making aggressive quality reductions. This can produce a substantial saving while preserving more visible detail.
Choose an appropriate image format
The format affects both file size and which image features can be preserved. There is no single format that is best for every job.
| Format | Often useful for | Keep in mind |
|---|---|---|
| JPG | Photographs and images with many colours or gradients | Lossy compression can reduce detail as quality is lowered. |
| PNG | Transparency, interface graphics, logos and sharp-edged graphics | Photographic PNG files can be considerably larger than suitable alternatives. |
| WebP | Efficient web delivery for many photographs and graphics | Check the result visually and keep your original source file. |
Step-by-step image compression workflow
- Start from the best-quality original you have. Avoid beginning with an image that has already been repeatedly compressed.
- Decide where the image will be used. A full-width website banner, small article thumbnail and social image may need different dimensions.
- Resize to sensible dimensions. Do not keep thousands of unnecessary pixels simply because the original camera file contains them.
- Choose the format. JPG suits many photographs, PNG is useful when transparency or sharp graphics matter, and WebP is often efficient for web delivery.
- Lower quality gradually. Compare the result at the size people will actually view it rather than judging only while heavily zoomed in.
- Check the finished file. Look at text, faces, edges, gradients and other important details for obvious artefacts.
- Keep the original separately. If you need another size or format later, create it from the better source rather than repeatedly editing a compressed copy.
What does “quality” actually mean?
For lossy formats, lowering a quality setting generally removes information to reduce the file size. The relationship is not perfectly linear: a small change may save useful space with little visible difference, while pushing the setting too far can introduce obvious blockiness, smearing or loss of fine detail.
That is why a visual check matters. The smallest file is not automatically the best result if it makes the image look poor.
Compression for websites
For web use, image optimisation is part of the overall page-loading picture. Large images can consume more bandwidth than necessary, especially on mobile connections. A practical workflow is to use appropriate dimensions, choose an efficient format and then apply enough compression to reduce weight without making the image visibly unpleasant.
Do not optimise purely for a number on a file-size counter. Product details, diagrams, screenshots or text inside an image may require more clarity than a decorative background photograph.
Common image-compression mistakes
- Uploading the full camera-resolution image when the page only displays a much smaller version.
- Using PNG for every photograph simply because PNG sounds “high quality”.
- Reducing quality too aggressively before resizing dimensions.
- Judging only by file size and not checking the actual image.
- Overwriting the only high-quality original.
- Repeatedly opening and resaving an already compressed JPG.
Use the matching Load8it tools
Once you understand the workflow, use the free browser tools to resize/compress the image or convert it to another format.