Images are usually the heaviest thing on a web page, and most of that weight is invisible. A 4 MB photo displayed at 800 pixels wide looks exactly the same as a 180 KB version of it. The difference is load time, and load time is conversions and search ranking.
Three settings do almost all the work.
1. Resize to the size you display
The biggest saving is not compression, it is resizing. A phone photo is about 4000 pixels wide. Nothing on your site displays it that wide. Resize to the displayed width times two (for sharp screens) and the file is often 80 percent smaller before you touch quality.
- Full-width hero: 2400px.
- Content image in a blog column: 1440px.
- Card thumbnail: 800px.
- Avatar: 400px.
2. Use WebP
WebP is 25 to 35 percent smaller than JPG at the same visual quality and supports transparency like PNG. Every current browser supports it. Use PNG only for graphics with sharp edges and few colours, such as logos and UI screenshots where every pixel matters.
3. Quality at 75 to 85
Most people export at 100. Visually, 80 is indistinguishable for nearly every image and half the size. Drop to 70 for large background images; stay at 85 for product photos and faces.
Doing it in one step
The free GetRef Image Compressor does all three at once in your browser: choose WebP, set quality, pick a max width, and drop up to 30 images. Nothing is uploaded. Most images come out 70 to 90 percent smaller.
Other things that matter
- Lazy load images below the fold with the loading="lazy" attribute.
- Set width and height on every image so the page does not jump while loading.
- Serve responsive sizes with srcset if your platform supports it.
- Do not compress twice. Re-compressing an already-compressed JPG adds artefacts. Always start from the original.
Keep the originals
Compression is one-way. Keep the full-resolution originals somewhere you can find them, not in a Downloads folder named IMG_4821. A reference library that reads each image, such as GetRef, means you can find the original later by describing it. For more on that, see how to organise screenshots on Mac.
Common questions
- What is the best image size for a website?
- As wide as it is actually displayed, times two for sharp screens, and no wider. A full-width hero rarely needs more than 2400px; a blog image in a 720px column needs about 1440px.
- What quality setting should I use?
- 75 to 85 percent for WebP or JPG. Below 70 artefacts start to show on gradients and faces; above 90 the file grows a lot for no visible gain.
- Is WebP supported everywhere?
- Yes, in every current browser. Keep a JPG fallback only if you must support very old systems or a platform that rejects WebP uploads.
