Image Optimization for Fast, Private Websites
By Mykhailo Boichuk · Co-founder & Vice-President
In short
Images are usually the largest part of a page’s weight, so optimizing them yields the biggest speed gains. Serve modern formats at the size actually displayed, provide responsive variants so small screens do not download large files, lazy-load offscreen images, and set dimensions so layout does not shift. Self-hosting rather than relying on third-party image services also avoids leaking visitor data.
Images are where the weight is
On most pages, images account for more transferred bytes than scripts, styles, and markup combined. This makes them the highest-leverage target for performance work. A page that loads slowly almost always has unoptimized images somewhere: a photograph served at full resolution into a small container, or a decorative image in a format far larger than necessary.
Because the gains are so concentrated, image optimization is often the first thing to address. Shaving a script by a few kilobytes is worthwhile, but resizing a single oversized hero image can save more than every script change combined.
Right format, right size
An image should be served in an efficient modern format and at the dimensions it will actually be displayed. A common waste is sending an image far larger than its container, forcing the browser to download and then shrink it. Responsive image techniques let the browser pick an appropriately sized variant for the device, so a small screen does not pay for a desktop-sized file.
- Serve modern formats that compress better than older ones.
- Generate multiple sizes and let the browser select the right one for the viewport.
- Never serve an image substantially larger than the space it occupies.
Defer offscreen, reserve space
Images below the fold do not need to load before the page is usable, so lazy-loading them defers their cost until they are about to be seen. At the same time, every image should reserve its space through explicit dimensions, so that content does not jump as images arrive. Layout shift caused by images loading without reserved space is one of the most common and avoidable causes of a jarring experience.
Self-host to protect visitors
Routing images through a third-party optimization service can speed delivery but sends your visitors’ requests, and therefore their addresses and behavior, to another party. For a privacy-respecting site, generating optimized variants at build time and serving them from your own infrastructure keeps the performance benefit without the data exposure. The performance and privacy goals align: fewer third parties means fewer requests and less leakage.
Key takeaways
- Images are typically the largest part of page weight and the highest-leverage target.
- Serve modern formats at the size actually displayed, not oversized originals.
- Provide responsive variants so small screens avoid downloading large files.
- Lazy-load offscreen images while still reserving their layout space.
- Self-host optimized images to avoid leaking visitor data to third parties.
Frequently asked questions
- Why focus on images first for performance?
- Images usually account for more transferred bytes than everything else combined, so optimizing them yields the largest speed gains.
- How do I prevent layout shift from images?
- Set explicit dimensions so the browser reserves each image’s space before it loads, preventing content from jumping as images arrive.
- Does using a third-party image service have downsides?
- Yes. It sends visitor requests, and thus their data, to another party. Self-hosting optimized images keeps the performance benefit without that exposure.
References
About the author
Mykhailo Boichuk
Co-founder & Vice-President
Mykhailo is an engineer who builds native applications and the systems behind them. He concentrates on macOS and iOS performance, local-first data architecture, and the synchronization problems that come with offline-capable software.