---
title: "How to Optimize Product Images? A Practical Guide to Size, Format (WebP), File Name and Alt Text in E-Commerce"
description: "How to optimize product images? A practical e-commerce guide that speeds up your page with the right size, WebP format, file name, alt text and loading techniques."
url: https://www.faprika.com/en/blog/product-image-optimization
language: en
site: Faprika
---

# How to Optimize Product Images? A Practical Guide to Size, Format (WebP), File Name and Alt Text in E-Commerce

> How to optimize product images? A practical e-commerce guide that speeds up your page with the right size, WebP format, file name, alt text and loading techniques.

In e-commerce the customer cannot hold the product; they judge it only from the image. That is why product images are both the strongest sales tool and the heaviest load on the page: a well-shot but unoptimized image slows the page down, eats mobile data and loses the customer before the page even opens. **Product image optimization** means making an image load faster, be understood better and be found more easily without compromising its quality.

This article is structured like a lesson. Step by step you will learn which layers image optimization consists of, how to choose the right size and format, how to write the file name and alt text, loading techniques, a bulk workflow and the most common mistakes. The tool in the article instantly generates the target size, file name and alt text for your own product.

Key Takeaway

“A good product image is one that is a reasonable multiple of its displayed size, in the right format, with a meaningful name and alt text, and loaded exactly when needed. Every extra pixel is a second the customer waits.”

## What Is Product Image Optimization?

Product image optimization is the process of bringing a product photo's file size, format, name, alt text and loading method to the best possible state for page speed, accessibility and search engines, while preserving its visual quality. Taking the photo is half the job; preparing it for publication is the other half.

Optimization does not mean "damaging" or blurring the image. The goal is to obtain a much smaller file with a quality loss the eye cannot distinguish, and to serve the image at a size suited to where it is used.

We recommend reading

How to Take Product Photos? A Phone-Based

E-Commerce

Product Photography Guide

## Why Is Image Optimization So Important in E-Commerce?

On product pages, images usually make up the largest share of the page's total weight; that is why image optimization is the most effective and least risky way to improve page speed. Speed, in turn, is directly linked to conversion, mobile experience and search visibility.

- **Page speed:** Smaller images download faster; the page becomes usable sooner.
- **Mobile experience:** On mobile data and slow connections, a large image can keep the page from opening at all.
- **Conversion:** When the page opens without waiting, the customer focuses on the product and abandonment drops.
- **Search visibility:** A meaningful file name and alt text help search engines and image search understand the image.
- **Accessibility:** Alt text lets customers who use screen readers understand the product.
- **Infrastructure cost:** Smaller files mean less traffic and storage.

Okumanızı öneririz

E-Ticarette

Site Hızı Neden Önemlidir?

## The 6 Layers of Product Image Optimization

Image optimization consists of six layers: size (pixels), weight (kilobytes), format, file name, alt text and loading method. Each layer solves a separate problem, and when one is missing, the gains from the others shrink.

*Görsel: The 6 layers of product image optimization: size, weight, format, file name, alt text and loading method; the problem each layer solves (The six layers of image optimization.)*

| Layer | What is done? | Problem it solves |
| --- | --- | --- |
| 1. Size (pixels) | Width and height suited to the displayed size | Downloading an unnecessarily large image |
| 2. Weight (KB) | Compression without visible quality loss | Slow loading, high data usage |
| 3. Format | The right format for the image (WebP, JPEG, PNG, SVG) | An unnecessarily large file at the same quality |
| 4. File name | A meaningful, lowercase, hyphenated name | Meaningless names like "IMG_2034.jpg" |
| 5. Alt text | A short description of the image | Loss of accessibility and image search |
| 6. Loading method | Loading below-the-fold images later, specifying dimensions | Unnecessary early loading, layout shift |

## Which Image Format Should You Use and When?

For photos the best option is usually WebP or JPEG, for graphics that need transparency PNG or WebP, and for logos and icons SVG. The choice of format directly changes the file size of the same image.

*Görsel: Image formats: WebP, JPEG, PNG, AVIF and SVG; use cases such as photos, transparency and logos, and file size trends (Five formats and their use cases.)*

| Format | Best used for | Pros | Watch out |
| --- | --- | --- | --- |
| WebP | Product photos, transparent images | Generally a smaller file than JPEG and PNG; widespread browser support | A fallback format may be needed on very old devices |
| JPEG | Photos | Supported everywhere | No transparency; degradation with heavy compression |
| PNG | Transparent background, sharp graphics | Lossless, supports transparency | Very large file for photos |
| AVIF | Photos (new generation) | An even smaller file in most cases | Can be slow to produce; may not be supported on every system |
| SVG | Logo, icon, illustration | Vector; sharp at any size, very small | Not suitable for photos |

A practical rule: publish product photos as WebP (or JPEG as a fallback), use WebP or PNG for product images that need transparency, and make logos and icons SVG.

## What Size Should a Product Image Be?

The source size of an image should be about twice the size at which it is displayed on the page: this ensures a sharp image on high-resolution (retina) screens and avoids an unnecessarily large file. If you offer zoom, the source can be somewhat larger.

*Görsel: Product image size: preparing an image displayed at 600 pixels wide on the page at 1200 pixels wide for high-density screens; a larger source for zoom (About twice the displayed size: the balance between a sharp image and a reasonable file size.)*

- **Find the displayed width:** Check how many pixels wide the main image is shown on screen on the product page.
- **Multiply by two:** For high-density screens, the source should be about twice the displayed width.
- **Increase it if you have zoom:** If you offer zoom, you can raise the source up to three times; otherwise the zoom looks blurry.
- **Keep the ratio fixed:** Use the same aspect ratio (for example 1:1 or 4:5) for all product images; listing pages look orderly.
- **Avoid unnecessarily large images:** A 4000-pixel photo from a phone should be downsized if it will be shown in a 600-pixel area.

## Product Image Size, File Name and Alt Text Tool

The tool below generates the target size of the source image, an SEO-friendly file name and a suggested alt text for your product. The tool only gives suggestions; edit the alt text, remembering that you are the one who can describe your product best.

Product image preparation tool

Product name

Color or variant

View

File type

Width displayed on the page (pixels)

Target

Aspect ratio

Recommended source size**1200 × 1200 pixels**

File name**linen-shirt-white-front-view.webp**

Suggested alt text**Linen shirt, white, front view**

The suggestion updates as you change the fields. The file name is lowercase, free of special characters and hyphenated.

## What Should a Product Image's File Name Look Like?

An image file name should be a short, meaningful phrase that describes the image; it should be written in lowercase, without special characters or spaces, with words separated by hyphens. Names such as "IMG_2034.jpg" assigned by a phone or camera carry no information about the image.

| Bad example | Good example | Why? |
| --- | --- | --- |
| IMG_2034.jpg | linen-shirt-white-front-view.webp | Describes the product and the view |
| Linen Shirt White.JPG | linen-shirt-white.jpg | Spaces, capital letters and special characters can cause problems |
| shirt_final_final2.png | linen-shirt-detail.png | No meaningless additions or repetition |
| product1.jpg | black-leather-belt-in-use.jpg | It is clear which product it is |

Some systems use the file name for matching when many products are uploaded in bulk: images are named by the product's barcode or stock code and matched to the product on upload. In that case, don't break the matching scheme; fill in fields such as alt text and product name separately, since they matter for SEO.

## How Do You Write Alt Text?

Alt text is a short sentence that describes the image to someone who cannot see it; it says what the product is and what sets it apart. Screen readers read it aloud, search engines use it to understand the content of the image, and it appears in its place when the image fails to load.

*Görsel: Alt text examples: comparison of empty, keyword-stuffed and well-written alt text (Alt text: describe the product, don't stuff keywords.)*

- **Name the product and its feature:** Write a short, meaningful sentence like "Linen shirt, white, front view".
- **Don't say "image" or "picture":** The screen reader already announces that it is an image.
- **Don't stuff keywords:** Alt text like "shirt men's shirt linen shirt cheap shirt" harms both accessibility and search.
- **Write a different one for each image:** The front, back and detail images of the same product should carry different alt texts.
- **Leave decorative images empty:** Alt text should be empty for images that are purely decorative.
- **Keep it short:** One or two short sentences are usually enough.

|  | Example | Review |
| --- | --- | --- |
| Empty | (no alt text) | Loss of accessibility and search |
| Stuffed with keywords | shirt men's shirt linen shirt cheap | Harmful, may be considered spam |
| Unnecessary word | Linen shirt picture | "Picture" is unnecessary |
| Good | White linen shirt, front view | Short, clear, describes the product |

Recommended reading

What Is Structured Data (Schema)? How to Add Product Schema

## How Should Images Load on the Page?

How an image loads matters as much as the image itself: the main product image that appears first on screen should load immediately, while images below the screen should load as the user approaches that point. Otherwise the page becomes unnecessarily heavy or the important image arrives late.

- **Lazy load below-the-fold images:** On a listing page, the images of products further down load as the user scrolls.
- **Don't delay the first image:** The main product image visible when the page opens should not be lazy loaded; it is the most important content.
- **Specify width and height:** Dimensions should be defined in advance so the page doesn't shift when the image arrives.
- **Serve a size suited to each screen:** A smaller source can be sent to phones and a larger one to desktops.
- **Use a delivery network (CDN):** Images load faster when they come from a server close to the user.

Okumanızı öneririz

CDN Nedir? Ve Ne İşe Yarar?

## How Should a Product Gallery Be Built?

Because customers cannot hold the product in their hands, the gallery does it for them: different angles, details and in-use images build trust. When building a gallery, consistency matters as much as the number of images.

- **Add enough images:** Aim for at least several images covering the front, back, side, details and in-use views.
- **Choose the clearest image first:** The first image is the one shown on listing pages and in shares; make it a sharp image on a white or plain background.
- **Keep the background and ratio consistent:** A similar background and the same ratio across all products keep the store looking orderly.
- **Show size and scale:** An in-use image that conveys size, or a size chart, reduces the return rate.
- **Add a video:** A short product video shows the movement and texture that an image cannot convey.

We recommend reading

What Should an E-Commerce Product Page Look Like?

## Image Optimization Workflow for Hundreds of Products

In a store with many products, optimizing images one by one is not feasible, so you need to set up a fixed workflow. The eight steps below provide a repeatable routine from photo shoot to publishing.

*Görsel: Product image workflow: shooting, selection, cropping and ratio, resizing, compression and format, naming, uploading, measuring (Eight-step image workflow from shoot to publishing.)*

1. **Shoot:** Photograph the same set of angles for each product, using fixed lighting and background.
2. **Select:** Pick the sharpest and most consistent frames.
3. **Crop:** Bring all products to the same aspect ratio.
4. **Resize:** Reduce to the target width (about twice the displayed size).
5. **Compress and choose the format:** WebP or JPEG, without visible quality loss.
6. **Name:** Give meaningful names, or names that fit your system's matching rule.
7. **Upload:** Use bulk upload if available; fill in the alt texts.
8. **Measure:** Check the image warnings in a page speed tool.

Tip

Keep the original files separately

Compressed and downsized images cannot be restored. Keep the high-resolution originals in a separate folder; you can regenerate them when you need a new design or a larger size.

Okumanızı öneririz

E-Ticaret Görsellerinizi Bu Programlarla Düzenleyin

## Product Image Background: White or Lifestyle?

Both are needed and each does a different job: an image with a plain (usually white) background shows the product clearly and keeps listing pages orderly, while a lifestyle image shows the product in context and sparks the imagination. The safest approach is to make the plain image that describes the product most clearly the first image of the gallery, then move on to lifestyle and detail images.

- **Plain image on the listing page:** The same background and ratio make the store look orderly and trustworthy.
- **Context on the detail page:** An in-use image shows the product's size and what it is used for.
- **Detail images:** Details such as stitching, texture, labels and connections make the decision easier.

## How Often Should Image Optimization Be Done?

Image optimization is not a one-time job; it is repeated as new products are added, as the design changes and as the catalog grows. The healthiest approach is to run every new product's images through the same workflow before publishing, and to scan the older catalog at regular intervals.

- **With every new product:** Standardize the workflow (size, format, name, alt text).
- **When the design or template changes:** The size at which images are displayed may have changed; recheck the source size.
- **Every three months:** Remeasure your highest-traffic pages in a page speed tool.
- **Before campaigns:** Check the images of your most visited pages before heavy traffic arrives.

## How Is Image Optimization Measured?

You can see whether optimization worked through page speed measurements and page weight. Take the measurement at two points in time: before and after the change, on the same page and under the same conditions.

- **Page speed report:** Have warnings such as "Properly size images", "Serve images in next-gen formats" and "Defer offscreen images" gone?
- **Total page weight:** Has the total download size of the product page gone down?
- **Largest contentful paint time:** Has the moment the main product image appears been brought forward?
- **Mobile measurement:** Take the measurement especially under slow mobile connection conditions.

## 8 Common Mistakes in Image Optimization

1. **Uploading phone images as they are:** An image thousands of pixels wide is downloaded in full even though it is displayed in a small area.
2. **Using PNG everywhere:** PNG produces very large files for photographs.
3. **Over-compressing:** Visible distortion and blur damage trust.
4. **Leaving a meaningless file name:** Names such as "IMG_2034" carry no information.
5. **Leaving alt text empty or stuffing it with keywords:** Both extremes harm accessibility and search.
6. **Loading the main image late:** If the first image visible on screen is deferred, the page looks empty.
7. **Not specifying the image size:** When the image arrives, the page shifts down.
8. **Using inconsistent ratios and backgrounds:** The listing page looks messy.

## Product Image Optimization Checklist

Before publishing your product images, you should be able to answer "yes" to all of the items below.

- Is the image about twice as wide as the size at which it is displayed?
- Have photographs been compressed as WebP or JPEG without visible quality loss?
- Are logos and icons SVG or small in size?
- Are file names meaningful, lowercase and free of Turkish characters (or compliant with the system's matching rule)?
- Does every image have a short, meaningful alt text?
- Is there no keyword stuffing in the alt texts?
- Does the product gallery have enough angles, details and in-use images?
- Do all product images have the same aspect ratio and a consistent background?
- Are below-the-fold images loaded late while the main image loads immediately?
- Are the width and height of the images defined?
- Was a page speed measurement taken after the change?

## Product Image Management with Faprika

Publishing correctly prepared images quickly for hundreds of products is the second half of the job. In the Faprika e-commerce infrastructure, the following elements cover this stage (you can see which feature starts in which plan on the [e-commerce plans](https://www.faprika.com/en/pricing) page):

- **Drag-and-drop and multiple image upload:** When adding a product, you upload several images by dragging and dropping them or selecting them from a file; the steps are in the [Adding a New Product](https://www.faprika.com/en/tutorials/add-new-product) tutorial.
- **Bulk product image upload:** You name images by product ID, stock code or barcode and upload them all at once; a hyphen, underscore or asterisk is chosen as the order separator. Details are in the [Bulk Image Upload](https://www.faprika.com/en/tutorials/bulk-image-upload) tutorial; this feature varies by plan.
- **Product image canvas feature:** The image canvas is defined in the product list and detail settings; it is included in all plans.
- **Logo while loading (lazy logo):** While images load, your brand's logo appears on the background of the product canvas; details are in the [Lazy Logo Management](https://www.faprika.com/en/tutorials/lazy-logo-management) tutorial.
- **Automatic video:** The product images section includes an automatic video option; it is recommended to use it together with multiple images.
- **Content delivery network (CDN):** A CDN that speeds up image and file traffic is offered depending on the plan.

## Frequently Asked Questions

**What is product image optimization?**

Product image optimization is the process of bringing a product photo's file size, format, name, alt text and loading method to the best possible state for page speed, accessibility and search engines, while preserving its quality. The goal is to deliver smaller and more meaningful files without visible quality loss.

**What size should a product image be?**

The source image should be about twice as wide as it is displayed on the page; this ensures a sharp image on high-density screens. If there is a zoom feature, the source can go up to three times. For example, for an image displayed at 600 pixels wide on the page, a width of 1200 pixels is appropriate.

**What is WebP and why is it preferred?**

WebP is a modern format developed for images; it generally delivers similar quality with a smaller file than JPEG and PNG and supports transparency. Thanks to its broad browser support, it is a common choice for product photos; a JPEG fallback can be considered for older systems.

**How do you write alt text?**

Alt text should be a short sentence that describes the image to someone who cannot see it: say what the product is and what sets it apart. Don't say "image" or "picture", don't stuff keywords, and write a different text for each image. For purely decorative images, leave the alt text empty.

**Is the image file name important for SEO?**

A meaningful file name is a small hint that helps in understanding the image's content; it is not as decisive as the alt text and the product name. Write the file name in lowercase, without special characters or spaces, separating words with hyphens.

**Is it right to lazy load all images?**

No. Images below the screen should load late, but the main product image that is visible as soon as the page opens should not be lazy loaded; otherwise the most important content is delayed and the page looks empty.

Your images are ready; let your store publish them fast

Publish hundreds of products in an orderly way with bulk image upload, product canvas and multi-image management. Plan your store together with Faprika experts.

Request a Demo

### You May Also Like

- [**Bir Web Sitesinin Performansını Yavaşlatan En Önemli Detaylar**](https://www.faprika.com/blog/bir-web-sitesinin-performansini-yavaslatan-en-onemli-detaylar)
- [**Video İçeriklerle E-ticarette Fark Yaratın**](https://www.faprika.com/blog/video-iceriklerle-e-ticarette-fark-yaratin)
- [**How to Do Category Page SEO?**](https://www.faprika.com/en/blog/category-page-seo)
- [**E-Ticaret Sitesi Güvenlik Sistemleri**](https://www.faprika.com/blog/e-ticaret-sitesi-guvenlik-sistemleri)