How to Choose JPG Images for Ecommerce Websites

Short answer: Use JPG (JPEG) for most ecommerce product photographs because it handles complex colors efficiently. Export responsive variants at the sizes your storefront actually renders, then compare quality at product-grid, product-page, and zoom sizes. Use PNG when you need transparency or crisp flat graphics, and let your platform or CDN negotiate WebP or AVIF when supported.

JPG is a starting point, not a rule for every asset. The correct choice depends on the image content, rendered dimensions, browser delivery path, and how much detail shoppers need when they zoom.

1. Match the format to the image

Asset	Usually choose	Reason
Product photography	JPG	Efficient lossy compression handles complex colors and textures.
Transparent logo or icon	PNG or SVG	Transparency and sharp edges survive better.
Flat-color illustration	PNG, SVG, or WebP	Large flat areas can show JPG artifacts.
Animated asset	GIF, WebP, or video	JPG cannot contain animation.
Image containing important text	Live HTML text where possible	Text inside a raster image is not selectable or searchable.

Shopify describes JPEG as ideal for photography and still images with complex colors, including products, banners, slideshows, pages, and blog posts. Its guidance associates PNG with logos, icons, flat colors, and transparency (Shopify image guidance; web.dev image guidance).

2. Choose dimensions from the rendered context

Do not send a 3000-pixel original to every 240-pixel product card. Create candidates for each layout and let responsive markup select the closest one.

Context	Typical candidate strategy
Product grid	Generate widths near the rendered card width, plus a 2× option for high-density screens.
Product detail gallery	Use a larger variant that covers the main image area without downloading the maximum original.
Zoom or lightbox	Keep a high-resolution source, but load it only after the shopper requests zoom.
Hero banner	Create desktop and mobile crops; do not reuse a square product image blindly.

Use srcset and sizes so browsers can select an appropriate file:

<img
  src="/images/linen-shirt-800.jpg"
  srcset="
    /images/linen-shirt-400.jpg 400w,
    /images/linen-shirt-800.jpg 800w,
    /images/linen-shirt-1200.jpg 1200w,
    /images/linen-shirt-2000.jpg 2000w"
  sizes="(max-width: 600px) 50vw, (max-width: 1000px) 33vw, 25vw"
  width="800"
  height="800"
  alt="Blue linen shirt, front view"
  loading="lazy"
  decoding="async">

Reserve loading="eager" for the above-the-fold primary image when it is genuinely part of the initial view. Explicit width and height let the browser reserve space and reduce layout movement.

3. Set JPG quality by visual inspection

JPEG compression discards information. A higher quality value is not automatically better for shoppers if it produces a file that delays the page. Export representative products at several quality levels, inspect them at their actual rendered sizes, and check the largest zoom view separately.

Choose five to ten representative products: fabric, jewelry, gradients, dark scenes, and fine texture.
Export each at the delivery widths your templates use.
Compare edges, hair, fabric texture, smooth gradients, and small details at normal size and zoom.
Record file bytes and visual defects. Select the lowest setting that remains acceptable for the intended view.
Repeat after changing your image-processing library or CDN.

There is no universal quality number because source content, dimensions, encoder, and viewing size differ. Shopify reports that lossy WebP can be 24% to 34% smaller than JPEG at equivalent SSIM quality in its 2026 guide; treat that as a reported comparison, not a guaranteed saving for your catalog.

4. Keep a high-quality source and create delivery variants

Store an original master outside the delivery path, then generate derivatives. A practical naming pattern includes the product identity, crop, and width:

linen-shirt-front-square-400.jpg
linen-shirt-front-square-800.jpg
linen-shirt-front-square-1200.jpg

Use descriptive filenames instead of camera defaults such as IMG_4832.jpg. Google Search Central recommends descriptive image context and supports JPEG, WebP, and AVIF (Google Images documentation).

5. Decide whether to deliver WebP or AVIF

You can keep JPG uploads or masters while delivering a modern format to browsers that support it. The platform or CDN must perform the negotiation; verify the actual response in browser developer tools. Check the response Content-Type, transferred bytes, and dimensions.

On Shopify, the image service can choose a browser-supported format, and Shopify recommends its built-in theme image helpers for responsive sizing, dimensions, focal points, format negotiation, and CDN behavior. Manual URL construction can bypass those optimizations (Shopify theme image documentation).

<picture>
  <source type="image/avif" srcset="/images/item-800.avif 800w, /images/item-1200.avif 1200w">
  <source type="image/webp" srcset="/images/item-800.webp 800w, /images/item-1200.webp 1200w">
  <img src="/images/item-800.jpg" srcset="/images/item-400.jpg 400w, /images/item-800.jpg 800w, /images/item-1200.jpg 1200w" sizes="(max-width: 700px) 90vw, 50vw" width="1200" height="1200" alt="Product name, side view">
</picture>

Do not assume every browser, theme, or CDN transforms files. Inspect production output and retain a JPG fallback where your delivery stack requires it.

6. Shopify-specific limits and checks

Shopify documents product and collection images up to 5000 × 5000 pixels or 25 megapixels, with files smaller than 20 MB. It says a 2048 × 2048 square image usually displays best for square products. These are Shopify limits, not general web standards; another platform may impose different limits.

Confirm the upload is below your platform’s byte and pixel limits.
Use a consistent aspect ratio for gallery images so cards do not jump in height.
Check the crop on mobile and desktop before publishing.
Use the platform’s responsive image helpers instead of hand-built URLs when available.

7. Compression and delivery checklist

Classify the asset before choosing a format.
Crop to the composition shoppers need; do not resize a badly framed source.
Generate width variants for every major rendered context.
Inspect quality at normal display size and zoom size.
Set intrinsic dimensions and useful alternative text.
Lazy-load below-the-fold gallery images.
Preload only the primary above-the-fold image when it improves the initial view.
Use a CDN or platform image service with caching.
Verify negotiated formats and transferred bytes in production.
Use descriptive filenames and place the image on the relevant product page.

8. Troubleshooting common JPG problems

Symptom	Likely cause	Fix
Blurry product image	Displayed file is smaller than its CSS size or was compressed repeatedly.	Serve a larger candidate, keep a clean master, and avoid repeated re-encoding.
Huge files on mobile	One desktop original is sent to every device.	Add `srcset`/`sizes` or platform responsive helpers.
Jagged logo or transparent box	Logo was exported as JPG.	Use SVG or PNG with transparency.
Visible block artifacts	Quality is too low for the image or crop.	Raise quality for that variant, reduce dimensions, or use WebP/AVIF delivery.
Images shift the page while loading	No intrinsic dimensions are declared.	Provide accurate `width` and `height` or an aspect-ratio box.
WebP or AVIF never appears	CDN negotiation is disabled, bypassed, or unsupported.	Inspect response headers and URL paths; restore the platform’s image helper or provide a `picture` fallback.
Search engines show generic thumbnails	Filename, alt text, or product-page context is weak.	Use descriptive names, accurate alt text, and a crawlable product page.
Shopify upload rejected	File exceeds Shopify’s documented size or pixel limits.	Resize or recompress below the platform limit, then upload again.

9. Performance, reliability, and cost considerations

Performance: Optimize the bytes that are actually downloaded. A correctly sized JPG often matters more than changing formats while leaving an oversized width unchanged. Measure transferred bytes and largest-contentful image behavior on representative mobile connections.

Reliability: Keep the original master and deterministic derivative settings so you can regenerate variants. Validate that every generated URL has a fallback and that cache invalidation occurs when a product photo changes.

Cost: Image transformation, storage, and bandwidth costs depend on your platform or CDN plan. Responsive variants can reduce bandwidth, while generating every possible width and crop increases storage and processing. Start with the contexts your templates actually use.

10. Inspect your storefront images with ScreenshotNeo

To review the real rendered result, capture product pages at desktop and mobile viewports and inspect whether the delivered image has the expected dimensions and format. ScreenshotNeo is a website screenshot API and MCP server. It can capture full pages or a CSS-selected element, set device presets or custom viewports, apply dark mode, wait for selectors or network idle, and hide cookie banners, popups, and chat widgets before capture.

Or skip the browser setup

Use one request to capture a product page while you check its visual output. See the ScreenshotNeo API documentation for all options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-store.example/products/item -o product.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://your-store.example/products/item"}, timeout=90)
open("product.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-store.example/products/item' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot.
Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status.
An MCP server lets Claude, Cursor, and other MCP clients take screenshots with take_screenshot, inspect pages with get_page_info, and create PDFs with capture_pdf.
1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account to start checking your storefront images.

11. FAQ

Is JPG always the best format for product photos?

It is usually a sensible source and fallback for photographic products, but compare WebP or AVIF delivery when your platform supports it. Use another format when transparency or crisp flat edges matter.

What size should ecommerce product images be?

Use dimensions that match each rendered context. A grid thumbnail, gallery image, and zoom view should not all download the same original.

Should product images contain text?

Keep important text as live HTML when possible. Text embedded in a raster image is not selectable or searchable and can become unreadable after compression.

Can I upload JPG and let Shopify serve WebP?

Shopify documents browser-supported WebP or AVIF delivery through its image service. Verify the response on your storefront and avoid URL patterns that bypass built-in optimization.

How do I know whether compression is too strong?

Inspect representative products at their actual display and zoom sizes. Look for blocking, ringing, banding, and lost texture, then compare those defects with transferred bytes.