The most common reason a web page feels slow is not complicated code but heavy images. On most sites images account for more than half of the bytes transferred, and a photo straight from a camera can weigh several megabytes on its own if you upload it untouched. The good news is that image optimization is an area where a few simple principles let anyone see a big payoff.
This article is a practical checklist you can follow without diving deep into code. We go in order from choosing a format to resizing, compressing, and how images load.
1. Choose the Right Format for the Job
Getting the format right alone can shrink files dramatically. The key question is: is it a photo, or is it a graphic?
- Photos and realistic images: JPG fits best. It excels at compressing color-rich images into small files.
- Logos, icons, shapes, transparent backgrounds: PNG fits best. It keeps lines crisp and supports transparency.
- PNG photos that don't need transparency: converting PNG to JPG cuts the size sharply with almost no visible quality loss.
2. Resize to the Size That's Actually Displayed
This is the most common and most wasteful mistake. An image shows at 800 pixels wide on screen, yet people often upload the original 4000-pixel photo as-is. The browser downloads that huge image and then shrinks it for display, so the user wastes several times the data on pixels they never even see.
The rule is simple: resize to just slightly larger than the size actually displayed. Even accounting for high-resolution (Retina) screens, twice the display size is plenty. Anything beyond that adds little.
3. Compress to Trim the Last of the Fat
Once format and size are sorted, compression is the final step. JPG lets you dial quality up or down, and lowering it to around 80% removes noticeable weight while most people can't tell the difference. Setting a target file size and fitting under it is the most convenient approach in practice.
- The 75-85% quality range is the sweet spot between quality and size.
- The larger the image — like a hero banner — the bigger the compression payoff.
- Always eyeball the result after compressing to check there's no excessive loss.
4. Lazy-Load to Speed Up the First Screen
Separate from shrinking the files themselves, when you load them matters too. There is no need to download every image up front when some of them only appear far down the page. Loading them as the user scrolls close makes the first screen appear much faster.
Adding a single loading="lazy" attribute to an HTML image tag lets modern browsers handle lazy loading for you. Just don't apply it to the key image visible at the very top of the screen — that can actually delay its appearance.
Apply It Right Away with Switching
Of the checklist above, format, resizing, and compression can be handled directly with Switching's tools. Use image resize to match the display size, image compress to get under a target size, and convert PNG to JPG for PNGs that don't need transparency. Everything runs inside your browser, so you can finish optimizing without uploading your files anywhere.