Short answer: use modern formats like WebP or AVIF, make the image no larger in pixels than it appears on the screen, and compress it. A product image rarely needs to be more than 100–200 kilobytes. Heavy, uncompressed images are the most common cause of a site feeling sluggish.

Why does image size matter so much?

When someone opens your site, the browser has to download all the content, and images are almost always the heaviest. A single uncompressed image from a mobile phone camera can weigh 5 megabytes (MB) – as much as hundreds of pages of text. On a mobile with a poorer connection, this means seconds of waiting, and every second costs visitors.

Speed ​​isn't just nice, it affects your ranking. Google measures how fast the page loads through something called Core Web Vitals, and heavy images drag those metrics down. A light site thus provides both happier visitors and better placement in the search results.

Which image format should I use?

An image format is the way the image is saved, and it determines both quality and file size. Here are the ones you need to know:

  • WebP– modern format that gives an image as nice as JPEG but 25-35 percent smaller file. Works in all modern browsers. This is your first choice today.
  • AVIF- even more efficient than WebP, often half the file size. Supported by most modern browsers. Good for large images where every kilobyte counts.
  • JPEG– the old standard format for photos. Works everywhere, but weighs more. Use as a spare.
  • PNG– best for images that need a transparent background, such as a logo. Weighs a lot for photos, so avoid it for photographs.
  • SVG– a format for logos, icons and simple graphics. It's made up of code, not pixels, so it stays razor-sharp at any size and weighs next to nothing.

How big should the image be in pixels?

A pixel is the smallest building block in a digital image. A common mistake is to post an image that is 4000 pixels wide even though it is displayed in a box that is only 600 pixels wide. The browser is then forced to load a huge image and shrink it - all that extra is wasted loading time.

The rule is simple: make the image roughly the size it appears, twice. If the image is displayed in a width of 600 pixels, 1200 pixels is enough (double so that it is sharp even on high-resolution screens). Guideline values:

  • Large top image (hero):1600–2000 pixels wide.
  • Product image:800-1200 pixels wide.
  • Image in a blog text:1000-1200 pixels wide.
  • Small thumbnail (thumbnail):300-500 pixels wide.

What does it mean to "compress" an image?

Compressing means reducing the file size by removing information that the eye still does not perceive. Good compression can cut the file size in half without you seeing any difference. Tools like Squoosh (free in the browser), TinyPNG or ImageOptim do the job in seconds. Aim for photos to land under 200 kilobytes (KB) whenever possible.

What is lazy loading?

Lazy loading means that images further down the page are not loaded until the visitor scrolls there. The page then feels faster because only what is visible is loaded immediately. In practice, the attribute is addedloading="lazy"on the images – and in modern web tools it is often handled automatically. The exception is the first large image at the top, which should be loaded immediately so the page doesn't look empty.

Don't forget the alt text

Alt text is a short description of what the image represents. It is read aloud to visually impaired visitors and helps Google understand the image. Write concretely: "Red office chair with armrests" is better than "picture 1". It's both accessibility and SEO in one small action.

A simple workflow for each image

  1. Scale the image down to the correct pixel width according to the guidelines above.
  2. Save as WebP or AVIF (JPEG as backup).
  3. Compress until the file is under about 200 KB.
  4. Enter a descriptive alt text.
  5. Let images during the first view be loaded with lazy loading.

Do you want a fast site - for real?

Optimizing images by hand works, but on a site with hundreds of products it becomes unsustainable. At ZORC, we build websites and e-commerce where the image optimization happens automatically: the right format, the right size and compression every time you upload an image. The result is a site that loads quickly without you having to think about it.Do you want to know how fast your site is today? Get in touch with ZORC, then we will do a free speed check.