Skip to content
Asset Compressor

The best image sizes for websites and online stores

By Muhammad Sohaib and Luqman Ahmad · NexixLabs · Updated

Images are usually the heaviest part of a web page, and oversized images are the most common reason pages feel slow. A modern phone photo is 4000 pixels wide and several megabytes; most websites display it at 800–1600 pixels.

This guide lists sensible dimensions for common image types and a file-size budget for each, so your pages load quickly without looking soft.

Why size matters for speed and SEO

Page speed affects both visitors and search rankings. Google’s Core Web Vitals measure, among other things, how quickly the largest element on the page appears – very often a hero image or product photo. Serving a 4 MB image where a 200 KB one would look identical delays that moment, especially on mobile connections.

Getting images right usually means two steps: resize to the largest size the image is actually displayed at (taking high-density screens into account), then compress in a modern format such as WebP.

Recommended dimensions

Widths below assume the image may be shown on high-density (Retina) screens:

  • Full-width hero or banner: 1920–2400 px wide, aim for under 300 KB.
  • Blog and article images: 1200–1600 px wide, aim for under 200 KB.
  • Product photos: 1000–2000 px on the longest side (so zoom works), aim for 100–300 KB.
  • Product grid and category thumbnails: 400–800 px, aim for under 80 KB.
  • Logos and icons: SVG where possible; otherwise PNG or WebP at 2× the displayed size.
  • Social sharing (Open Graph) images: 1200×630 px, under 300 KB.

Pick the right format

Use WebP for photos and graphics on the web – it is smaller than JPEG and PNG and supported by every current browser. AVIF can be smaller still for large photos, at the cost of slower encoding. Keep PNG for images that must stay lossless, such as screenshots you will edit again.

Quality settings of 75–85 for WebP and JPEG are the usual sweet spot: below that, artifacts start to show on detailed images; above it, files grow quickly with little visible benefit.

Online stores and marketplaces

Marketplaces often ask for large product images – commonly at least 1000 pixels on the longest side so that zoom works – and many prefer a pure white background for the main photo. Check each platform’s current requirements, because they change over time.

Keep product photos consistent: same aspect ratio (square is common), same background, similar framing. A consistent grid looks more professional and makes shoppers’ comparisons easier.

A fast bulk workflow

You can prepare an entire folder of photos in a few minutes:

  • Keep your full-size originals in a separate folder.
  • Open the folder in a bulk resizer and set the maximum width for the image type (for example 1600 px for blog images).
  • Choose WebP output at around 80% quality.
  • Check a few results in a before/after comparison, zooming in on fine detail.
  • Download the results with the same folder structure and upload them.

Common mistakes to avoid

A few habits undo most of the benefit:

  • Uploading camera originals and letting CSS shrink them – the browser still downloads the full file.
  • Saving photos as PNG, which is often five to ten times larger than WebP or JPEG.
  • Re-compressing already compressed images again and again, which adds artifacts each time.
  • Enlarging small images: upscaling never adds detail, it only adds bytes.

Try it yourself – free tools

Resize images

Set a maximum width or height and every image is scaled down proportionally – and compressed at the same time.

PNG to WebP

Turn heavy PNGs into lightweight WebP files that keep their transparency. Convert one file or a whole folder at once.

Compress JPEG

Shrink JPG photos with the MozJPEG encoder while keeping them sharp. Drop a single photo or an entire folder – nothing is uploaded.

Compress to 100 KB

Upload forms often demand images under a size limit. Set a target and Asset Compressor finds the highest quality that fits – for every image in the batch.

More guides