Image Size for the Web: Resize, Compress, Format
Images are usually the heaviest part of a web page. Large, unoptimized photos slow loading, frustrate visitors on mobile data and can hurt search performance. Fortunately, a few simple steps often cut file size by 70% or more.
Step 1: Resize to the size you display
A phone camera photo can be 4000 pixels wide, but a blog column might show it at 800. Browsers must still download every pixel. Resize to roughly the maximum display width, with a little extra for high-density screens, such as 1.5 to 2 times. Use the image resizer and compressor, which keeps your aspect ratio by default.
Step 2: Pick the right format
- JPG: best for photographs. Small files, no transparency.
- PNG: lossless, supports transparency. Good for logos, screenshots and graphics with sharp edges, but large for photos.
- WebP: modern format that is typically 25 to 35% smaller than JPG at similar quality and supports transparency. Supported by all major current browsers.
Convert between them with the JPG, PNG and WebP converter or go straight to the WebP converter.
Step 3: Compress sensibly
For JPG and WebP, a quality setting between 70 and 85 usually looks nearly identical to the original while saving a lot of space. Try a few values and compare. Do not repeatedly re-save JPGs, since every lossy save loses detail. Keep an original master copy. The image compressor shows how much smaller the new file is.
Handy size targets
- Hero images: under 200 KB where possible
- Blog photos: 50 to 150 KB
- Thumbnails: under 30 KB
- Social share images: about 1200 Γ 630 pixels
Privacy matters
Many online tools upload your pictures to a server. Ours process files entirely in your browser using the canvas feature, so nothing leaves your device. Note that re-encoding strips most metadata such as location, which is usually a privacy bonus.
More speed tips for site owners
- Add width and height attributes to prevent layout shifts.
- Use lazy loading for images below the fold.
- Write descriptive alt text for accessibility and SEO.
- Serve files with long cache headers.