Start with dimensions
A common performance mistake is uploading a huge camera image and displaying it as a small card. CSS can make the picture look smaller, but the browser may still download the large file. Resize source images to dimensions appropriate for the layout, while keeping enough resolution for high-density displays when needed.
Choose a format that fits the content
Photographs typically benefit from modern lossy formats such as WebP or from well-compressed JPEG. Graphics with transparency may work better as PNG or WebP. There is no single best format for every image. Compare the visual result and file size rather than converting everything by rule.
Compression is a visual decision
A quality slider is not an objective score. Two images saved at the same setting can look very different because one has smooth gradients and another has complex texture. Reduce quality gradually and inspect important edges, text, faces and color transitions. Stop when savings are no longer worth visible artifacts.
Avoid repeated lossy recompression
If you open a compressed JPEG, edit it and save another JPEG repeatedly, artifacts can accumulate. Keep an original master file and create new delivery versions from that source. This is especially important for images you may reuse later at different sizes.
Metadata may be removed
Browser-based image processing often drops EXIF metadata. For privacy this can be useful because location and camera details may disappear, but it can be a problem when metadata is important to your workflow. Keep the original file if you need archival information.
Use responsive delivery on real websites
Compression is only part of the delivery problem. Responsive image markup can let a browser choose an appropriate file for the visitor’s screen. Lazy loading can delay images that are below the fold. A content delivery network can reduce latency for users far from the origin server.
Measure the page, not just the file
A smaller image is useful when it improves an actual user experience. Test representative pages on mobile connections, check layout stability and inspect which assets dominate transfer size. Performance work is most effective when it targets the slowest real pages rather than optimizing files in isolation.
Frequently asked questions
Is WebP always smaller than JPEG?
Often, but not always. Compare real outputs at an acceptable visual quality.
Should I resize before compressing?
If the source dimensions are much larger than needed, resizing usually provides the biggest initial saving.
Do browser image tools upload my photos?
ToolsDiary image tools process supported images locally in the browser and do not upload them to our server.
Editorial note: This guide is informational and is reviewed against the public behavior of the tools described. See our editorial policy.