Image sizes and formats for fast websites

Large images are one of the most common reasons websites feel slow, especially on mobile data. The good news: fixing them is quick.

Size images for how they're displayed

If an image shows at 800 pixels wide on the page, uploading a 4000-pixel photo straight from a camera wastes bandwidth. A good rule of thumb is to export images at about twice their display width so they stay sharp on high-density screens, and no larger.

Pick the right format

• WebP is a great default for photos and graphics on the web. It's widely supported by modern browsers and is usually much smaller than JPEG at similar quality.
• JPEG still works everywhere and is fine for photos.
• PNG is best when you need sharp edges with transparency, like screenshots or cut-out product shots.
• SVG is ideal for logos, icons and simple illustrations because it stays crisp at any size.

Compress, then check

Quality settings around 75 to 85 usually look almost identical to the original while cutting file size dramatically. Always compare before and after at the size the image will be displayed.

Don't forget the basics

• Add descriptive alt text for accessibility and SEO.
• Use loading="lazy" for images below the fold.
• Set width and height attributes so the page doesn't jump while loading.

Do it in one step

Our free Image Resizer & Compressor downscales, compresses and converts batches of images to WebP, JPEG or PNG directly in your browser. Nothing gets uploaded.