When we measure the speed of websites we didn't build, the same culprit shows up almost every time: photos uploaded straight from a camera or phone. A five-megabyte image eight thousand pixels wide is displayed in an 800-pixel frame — the browser still has to download all of it, then shrink it. A visitor on a mobile network pays for that in seconds of waiting.
How large should an image actually be
The rule is simple: an image should be roughly twice as wide as the space it's displayed in (to cover high-resolution screens), and not a pixel more. In practice that means:
- Full-width photo (hero image): 1920–2400 px wide
- Image inside an article or at half width: 1200–1600 px
- Gallery or portfolio card: 800–1000 px
- Logo, icon or thumbnail: 300–600 px
- Target file size: under 200 KB for large photos, under 100 KB for smaller ones
Which format to choose
JPEG is still a solid choice for photographs, PNG should be used only when you need a transparent background (logos, icons), and SVG for logos and graphics, since it's vector-based, stays sharp at any size and is usually the smallest.
WebP is today's standard, supported by every current browser, and typically produces files 25–35% smaller than JPEG at the same visible quality. If you have the option, save as WebP. For portraits and photos with smooth gradients, set quality to around 80% — the difference is invisible to the eye while the file size halves.
How to do it without special software
You don't need Photoshop. For occasional use, free online tools for resizing and converting to WebP are plenty; for larger batches, use any free batch-processing program that resizes an entire folder at once.
Always work on copies and keep your full-resolution originals separately — a shrunken image can't be restored to its original quality, and you'll want the originals for print or a future redesign.
Three things developers do that you should ask for
Beyond well-prepared images, three build-side settings significantly affect speed and belong on every website:
- Lazy loading — images below the first screen load only when the visitor scrolls to them
- Width and height set in the code — prevents content from 'jumping' during loading, which Google measures as its own metric
- Descriptive alt text on every image — needed by visually impaired users and helpful for Google image search
Check the result
After replacing your images, run Google PageSpeed Insights on your site and look at the mobile score. On websites weighed down by unoptimized photos, this single step often delivers the biggest jump in speed — with no change to design or content at all.