Web Image Optimization: Balancing Speed and Quality
Table of Contents
On a website, images are often the single largest contributor to page weight. Placing them without proper care slows down loading, hurts user experience, and damages SEO.
This guide covers how to handle images according to modern web standards.
Best Formats for the Web — Extensions and When to Use Them
Choosing the right file format is crucial for balancing load speed and image quality.
Characteristics of the main image formats
- JPEG (.jpg / .jpeg) — Best for photos. It dramatically reduces file size for color-rich images, but quality degrades with repeated saving.
- PNG (.png) — Best for logos and illustrations. Supports transparency and keeps edges crisp. File sizes tend to be larger than JPEG.
- WebP (.webp) — A next-generation format developed by Google. It is up to about 30% lighter than JPEG and PNG and is now supported by virtually every browser. It is currently the most recommended format for the web.
- SVG (.svg) — A vector format. Because shapes are described mathematically, SVG never blurs no matter how much you zoom in. Ideal for icons and diagrams.
When exporting, use a "Save for Web" feature (or similar) to strip metadata such as capture timestamps and GPS data. This alone can cut several KB to tens of KB per file and noticeably speed up your site.
Preventing Blur on High-DPI (Retina) Displays
Modern iPhones, Macs, and high-end Windows machines use high-DPI displays such as Retina. On these screens, traditional 1× images appear soft or blurry.
The reason is that each logical screen pixel actually contains a 2×2 (or 3×3) grid of physical pixels.
Why you need 2× exports
If you want to display an image at 400 px wide on a website, the current standard is to export the source at twice that size — 800 px wide.
- Exported at 1× (400 px): On Retina screens, the browser stretches each source pixel across multiple physical pixels, producing a blurry result.
- Exported at 2× (800 px): The data maps 1:1 to the physical pixels of a Retina display, so text and fine detail stay sharp.
Final Export Techniques
For one more level of optimization, keep these points in mind:
- Appropriate compression: For JPEG, quality 80–90% generally offers the best balance between visual fidelity and file size.
- Run a dedicated compressor: Passing exports through a specialist compression tool can often shrink files further with no visible quality loss.
- Lazy loading: Configure images outside the viewport to load only when scrolled near, which significantly improves initial page speed.
In summary:
The world of web images keeps evolving, but the fundamentals do not: keep files as light as possible while preserving enough resolution to look sharp on Retina-class displays.