butchorpeza.comThe HTTP Archive Web Almanac found that about half of pages send mobile visitors images larger than the screen can display. Fix it by resizing images to their display size, compressing them, serving responsive sizes with srcset, and using modern formats like WebP or AVIF, which are much smaller than JPEG at similar quality.
- Many pages send phones far more pixels than they can show.
- Resize images to the size they are actually displayed.
- Use responsive images with srcset and sizes.
- WebP and AVIF are smaller than JPEG at similar quality.
- Lazy-load images below the fold, but never the hero.
Who this is for
Website owners with slow, image-heavy pages.
Why I wrote it
Image fixes are the quickest speed win in my site audits.
What you will get
A simple image workflow for faster pages.
Table of contents
- Introduction
- The heaviest part of most pages
- The easiest speed win
- Why Images Get Too Big
- Uploading straight from the camera
- One size for every screen
- The Image Workflow I Use
- Resize to display size
- Compress
- Use modern formats
- Serving the Right Size
- Responsive images
- Lazy loading, carefully
- Always set dimensions
- Conclusion
- Smaller images, faster site
Introduction
The heaviest part of most pages
Images usually make up most of a web page's weight. When they're too big, everything loads slower.
The easiest speed win
The good news: image problems are among the easiest to fix, and the results show up immediately.
Why Images Get Too Big
Uploading straight from the camera
A photo from a phone or camera can be thousands of pixels wide. Shown at 600 pixels on a website, most of that data is wasted.
One size for every screen
Without responsive images, phones download the same large file as desktops.
The Image Workflow I Use
Resize to display size
Export images at roughly the largest size they'll appear, with a 2x version for sharp screens.
Compress
Compression tools remove invisible detail. Most photos can shrink a lot without visible change.
Use modern formats
WebP and AVIF produce much smaller files than JPEG at similar quality, and modern browsers support them.
Survey and data source: HTTP Archive Web Almanac 2024, analysis of millions of web pages
Serving the Right Size
Responsive images
The srcset and sizes attributes let the browser pick the best file for each screen.
Lazy loading, carefully
Lazy-load images further down the page, but load your hero image right away so the main content appears fast.
Always set dimensions
Width and height on images prevent the page from jumping as they load.
| Format | Best for | File size | Notes |
|---|---|---|---|
| JPEG | Photos, legacy support | Medium to large | Universal, but older |
| PNG | Graphics with transparency | Large for photos | Use for logos and icons |
| WebP | Photos and graphics | Small | Supported by modern browsers |
| AVIF | Photos | Smallest | Best compression, slower to encode |
A product gallery
A shop uploads 4000-pixel photos from a camera. After exporting them at 1600 pixels in WebP with srcset for smaller screens, each product page loads far less data and the main image appears noticeably faster.
Conclusion
Smaller images, faster site
Resize, compress, use modern formats and serve the right size. It's simple work with a big payoff.
References
FAQ
Should I use WebP or AVIF?
Both are smaller than JPEG. WebP is widely supported and easy; AVIF compresses even better. Many sites serve both with a fallback.
Does WordPress convert images to WebP?
Recent WordPress versions support WebP uploads, and plugins can convert images automatically.
What size should website images be?
Roughly the largest size they are displayed, plus a 2x version for high-resolution screens.
Who is Butch Orpeza?
Butch Orpeza is a Philippines-based creative technologist: a web designer, developer, 3D artist and AI automation specialist. He builds WordPress and Elementor websites, creates photoreal 3D product images, and sets up AI workflows that let teams hand repetitive work to AI agents.
Leave a comment
No comments yet. Be the first to share your thoughts.