A Web Designer's Checklist: Optimizing Images Without Losing Quality
Images typically make up more than half the weight of a typical web page — and they're usually the reason a site loads slowly. The good news is getting them into shape takes just a few steps, no specialized software required. Here's a checklist to run through before every publish.
Below are seven steps worth running through before publishing any image on a site, from a product card to a background banner. Each step takes a couple of minutes at most and needs nothing but a browser — no Photoshop install, no wrestling with a command-line tool like ImageMagick.
1. Pick the right format
For photos and complex images with gradients, the best choice is a modern format like AVIF or WebP: they weigh 30–50% less than JPG at comparable quality. For simple flat-color graphics (icons, logos), PNG is the better fit. Convert existing files with the AVIF Converter or convert from JPG to WebP.
The difference is especially noticeable on images with lots of smooth color transitions — sunsets, shadows, blurred backgrounds: that's exactly where AVIF and WebP save the most compared to JPG.
2. Set the exact size for your layout
Don't hand the browser a 4000×3000px image if it only displays in an 800×600 block on the page — those extra pixels just add file weight with no benefit. Resize Image lets you set the exact width and height for a specific layout block, keeping proportions intact.
This matters especially for mobile versions of a site, where the image block is often two or three times narrower than on desktop — if you're building responsively, it's worth preparing a couple of sizes for different breakpoints instead of relying on one universal image.
3. Compress at a sensible quality level
Once the format and size are set, compression is what's left: Compress Image at 70–85% quality usually gives a loss the human eye can't spot while meaningfully cutting file size. Check the result visually before publishing — for photos with lots of fine detail, it's sometimes worth bumping quality up 5–10%.
A useful rule: if the difference between 70% and 85% quality isn't visible during normal viewing, go with the lower number — the savings in file weight noticeably cut load time for users on slow mobile connections.
4. Crop out anything unnecessary
If the frame has dead space or stray objects at the edges, Crop Image removes them before compression — so the final file spends its weight on what actually matters instead of areas users won't focus on anyway.
Cropping is especially useful for interface screenshots, which often have browser chrome or empty space at the edges — none of it carries meaning, but it reliably adds file weight.
5. Prepare a fallback for older browsers
AVIF and WebP are supported by all current browsers, but if your audience might include outdated versions, it's worth preparing a JPG fallback using a <picture> tag with multiple sources — the browser picks whichever format it supports.
A <picture> tag also helps if part of your audience browses through an embedded messaging-app browser or an old system web-view component that doesn't always support the newest formats, even if the device's main browser is up to date.
6. Don't forget product photos and interface screenshots
For product cards with a clean background, it helps to cut the background out first with Remove Background — this keeps the catalog's visual style consistent and reduces file weight thanks to the uniform transparent area.
A consistent transparent (or single-color) background across every product card looks more professional than a mix of real background photos, and makes future layout changes easier — say, if the catalog later moves to a dark theme.
7. Check how images behave while loading
Even optimized images take some time to load, especially on mobile connections. Set width and height attributes on the <img> tag so the browser reserves space for the image immediately and doesn't shift nearby text once it loads — this directly affects the Cumulative Layout Shift metric in page performance reports. Lazy-loading images below the fold speeds up perceived page load further, by deferring anything the user hasn't scrolled to yet.
8. Check the effect with a speed-analysis tool
After publishing, it's worth running the page through Google PageSpeed Insights or a similar tool — the report will show exactly which images affect load time the most, and whether it's worth revisiting the checklist for a specific file. It also helps catch images that got added later and slipped through the checklist by accident, which happens more often than it seems on sites with frequent catalog updates.
Run through all eight steps and you'll end up with images that load fast and look sharp — and the whole process takes a couple of minutes in your browser, no Photoshop and no sending files to third-party services. Over time the checklist becomes a habit: pick a format, set the size, compress, crop out the excess, prepare a fallback, don't forget the layout attributes, and check the result — a few minutes of work that save users seconds on every single page load.