A storefront can feel fast during development and suddenly become sluggish the moment the real product catalog is added.
The code may be fine.
The theme may be fine.
The server may be fine.
The problem is often much simpler: the browser is downloading far more image data than the page actually needs.
If you manage Shopify, WooCommerce, Daraz, or any image-heavy catalog, image optimization is not just a "convert JPG to WebP" task. It is a repeatable workflow.
This is the workflow I use.
Step 1: Start with display size, not file format
Imagine a product grid where every card displays an image at roughly 500px wide.
Now imagine the source files are 4000px wide.
Even if those 4000px images are compressed, the browser is still receiving far more image data than necessary.
Before changing formats, ask:
- What size is the image actually displayed at?
- Do I need a large zoom image?
- Is the same source used for thumbnails and product detail pages?
- Can I generate more appropriate variants?
The best optimization is often not shipping unnecessary pixels in the first place.
Step 2: Choose a modern output format
For many web storefronts, WebP is a strong default because it can significantly reduce file size while keeping visual quality suitable for product photography.
That does not mean WebP wins every situation.
PNG can still make sense for certain graphics and transparency-heavy assets.
JPEG is still widely compatible.
AVIF can achieve excellent compression, but your workflow, tooling, and quality requirements should decide whether the additional complexity is worth it.
The practical rule is:
Test your real catalog images instead of choosing a format from a benchmark headline.
Take a sample of:
- bright product photos
- dark product photos
- images with text
- transparent assets
- highly detailed products
Then compare visual quality and output size.
Step 3: Stop converting one file at a time
This is where image optimization turns into an operational problem.
Converting 3 files manually is easy.
Converting 800 product images manually is not.
If every file needs the same transformation, the settings belong at the batch level.
A useful batch process looks like this:
Select product images
↓
Choose output format
↓
Set shared quality / resize rules
↓
Process the batch
↓
Download the results together
That is much better than:
Open file
Convert
Download
Rename
Repeat 799 times
I built a browser-based version of this workflow into BatchSet's Bulk Image Converter.
The goal is not to make a single conversion impressive.
The goal is to remove the repeated work.
Step 4: Preserve naming discipline
Optimization can create a second problem: chaotic filenames.
If your original files are:
sku-1001-front.jpg
sku-1001-side.jpg
sku-1002-front.jpg
your optimized versions should remain predictable.
For example:
sku-1001-front.webp
sku-1001-side.webp
sku-1002-front.webp
Avoid workflows that turn a clean catalog into:
download-1.webp
download-2.webp
final-final-2.webp
This matters later when you:
- update products
- debug missing images
- match assets to SKUs
- build import spreadsheets
- hand the catalog to another team member
File naming is part of the image pipeline.
Step 5: Do not optimize blindly
A smaller file is not automatically a better file.
Compression can damage:
- small text
- fabric detail
- jewelry edges
- product labels
- fine textures
For e-commerce, image quality affects trust.
The target is not "smallest possible file."
The target is:
small enough to load quickly while still looking good enough to sell the product.
That is why I prefer a sample-based process:
- Pick representative images.
- Test a few quality levels.
- Inspect them at real storefront size.
- Choose the lowest acceptable setting.
- Apply it to the full batch.
Step 6: Think beyond conversion
A complete product-image workflow may include:
- resizing
- cropping
- background cleanup
- format conversion
- compression
- naming
- bulk export
- marketplace-specific dimensions
That is why I think "image converter" is often too narrow a way to describe the real problem.
The real problem is catalog preparation.
If your daily work involves Shopify, Daraz, Amazon, or WooCommerce product images, I put the e-commerce-focused BatchSet tools together here:
A simple checklist
Before uploading a new product catalog, I would check:
- [ ] Images are not massively larger than their display size
- [ ] Output format makes sense for the asset
- [ ] Compression has been visually tested
- [ ] Filenames remain predictable
- [ ] Similar files are processed as a batch
- [ ] Important transparent assets remain transparent
- [ ] Product details are still sharp enough to inspect
Final thought
Image optimization is usually presented as a format choice.
It is really a workflow design problem.
If you optimize one image perfectly but the process is too slow to repeat across the other 2,000 files in your catalog, the solution does not scale.
A good workflow should be fast enough that optimization becomes part of publishing, not a special cleanup project you postpone for six months.
If you want to try the workflow I am building around this problem:
I am building BatchSet, so feedback from people managing real product catalogs is especially useful.
Top comments (0)