Glossary
/
image-compression
E-commerce image compression: lossy/lossless definition, JPEG WebP AVIF, LCP and conversion impact, Shopify and product page best practices.
Updated on
June 4, 2026
Image compression consists of reducing the file size of an image (in kilobytes or megabytes) while maintaining an acceptable visual quality for the screen. In e-commerce, it speeds up the loading of product images, improves Core Web Vitals (specifically LCP), and limits bounce rates on mobile. It is combined with resizing and delivery via CDN.
Summary
Definition: lossy, lossless, formats
An uncompressed image (raw bitmap) is heavy: each pixel is stored explicitly. Compression encodes the data more compactly.
Two main families. Lossy compression (lossy): removes barely visible details. Formats: JPEG, WebP (lossy mode), AVIF. Ideal for product photos and Lossless compression (lossless): reduces size without altering the final pixels. Formats: PNG, lossless WebP, sometimes GIF. Useful for logos, transparency, diagrams.
To clearly distinguish the concepts. Compression vs resizing: compressing = same dimensions, lighter file; resizing = fewer pixels (e.g., 4000 px → 1200 px). The two accumulate; Compression vs CDN: compression reduces the file weight; CDN geographically brings its delivery closer; Compression vs lazy loading: compression lightens each image; lazy loading delays the loading of off-screen visible images; Visual quality vs file weight: the more aggressive the compression rate, the lower the weight and the more artifacts (blurriness, banding) can appear; and Source format vs served format: you upload a JPEG; Shopify can serve WebP to compatible browsers.
Why image compression is important for web performance
Product detail pages, collection grids, and home pages rely on multiple visuals. Without optimization, the page becomes slow, especially on 4G.
LCP (Largest Contentful Paint): the hero image or main product image is often the heaviest element to display; SEO: Google values a fluid page experience (e-commerce SEO); Conversion: a waiting visitor views fewer products; bounce rates rise on mobile; Bandwidth costs: less data transferred, which is useful globally; Feeds and marketplaces: some platforms impose size or ratio limits; and Perceived accessibility: a "premium" store = sharp images AND a responsive site.
Compression does not replace an overloaded theme or fifteen guest scripts, but it is one of the most profitable levers: low technicality, measurable impact on perceived speed.
In a glossary-oriented approach, image compression should be understood as a practical reference: the term helps identify a common situation, distinguish it from similar concepts, and connect the definition to concrete decisions for web performance. Its value is therefore not only theoretical; it also helps better organize the content, tools, and indicators used by an e-commerce team.
How image compression works
Typical case: packshot photo of a sneaker, Lightroom export 3000 × 3000 px.
Before: JPEG 100% quality, 2.8 MB; Step 1 resizing: 1500 × 1500 px (sufficient for desktop product page zoom); Step 2 compression: JPEG 80% quality or WebP export → file ~180 KB; and Shopify Side: URL ? width=800 for collection thumbnail; Shopify serves a lighter variant via its CDN.
Result: same visual rendering on standard screen, collection loading is significantly faster. On a grid of 24 products, the cumulative difference is major.
Counter-example: excessive compression (30% quality) → visible artifacts on leather or gradients → "cheap" image that harms trust, especially in luxury or beauty.
Practical rule: aim for the smallest file where the quality remains indiscernible to the naked eye on target mobile and desktop screens.
Image compression management on Shopify
Shopify processes images uploaded in the Admin (Products, Theme, Content) and serves them via cdn.shopify.com.
Useful behaviors. Automatic resizing: Shopify generates several sizes; you request a width via URL parameters (Shopify Help Center); WebP: on compatible browsers, Shopify can serve WebP to further reduce file size without manual action; Upload limits: respect accepted formats (JPEG, PNG, GIF, WebP depending on context) and avoid unnecessarily huge source files; Shopify Editor: built-in cropping and light compression for certain theme images; and Apps: bulk compress (TinyIMG, Crush.pics, etc.) for already heavy catalogs.
Recommended workflow: prepare images beforehand (Squoosh, Photoshop "Export for Web", Lightroom), upload a reasonable master version (often 1500 to 2048 px on the longest side for products), and let Shopify and the theme handle the responsive variations.
Online Store 2.0 Themes: favor sections that use native Shopify filters rather than fixed < img> tags in full resolution.
On Shopify, the challenge is primarily to translate this concept into a clean, maintainable configuration that is easy for the team to understand. The merchant must avoid scattered settings, document important decisions, and regularly verify that what is displayed to the customer corresponds to what is managed in the admin.
Best practices and common mistakes
Compress AND resize before uploading; do not rely solely on the CDN.
JPEG for photos; PNG only if transparency is necessary.
Test WebP/AVIF export if your pipeline allows it; Shopify handles the server-side fallback.
Descriptive alternative text (alt): image SEO + accessibility (separate from compression).
Complement with lazy loading for images below the fold.
Regular audit: PageSpeed Insights, mobile Lighthouse after a theme redesign.
Name files properly (
sneaker-bleu-vue-face.jpg) for organization, not for file size.
Common mistakes:
Uploading a 5 MB PNG for a photo without transparency.
Duplicating the same 4K image for each color variant without cropping.
Extreme compression on high-end products (loss of texture detail).
Believing that the CDN compensates for unoptimized 6000 px master files.
Forgetting blog images, promo banners, and pop-ups (outside of the product catalog).
Hero slider with five uncompressed full-page images.
In brief
Image compression = reducing file weight while preserving sufficient visual quality; Lossy (JPEG, WebP) for photos; lossless (PNG) if transparency; Issues: LCP, SEO, mobile conversion, bandwidth costs; Shopify: CDN, size variants, automatic WebP; optimize at upload anyway; and Combine compression, resizing, lazy loading, and CDN.
In summary, image compression is a seemingly simple concept, but important for structuring an online store. Well-mastered, it improves the understanding of the catalog, the quality of the customer experience, and the consistency of marketing or operational actions.
Associated terms, FAQ, and going further
Associated Terms
CDN: fast delivery of already compressed images; Core Web Vitals: LCP, INP, CLS related to page performance; Product image: the main object of store compression; Online store: pages where images weigh the most; and Conversion: the business goal of a fast page.
FAQ
What JPEG quality should I choose for a product?
Often between 75% and 85% depending on the subject. Compare visually on a retina screen: if you don't see the difference from the original, the file is compressed enough.
Does Shopify automatically compress my images?
Shopify optimizes delivery (multiple sizes, WebP depending on the browser). A source upload that is too heavy remains costly to process and limits performance gains: pre-compress before importing.
WebP or JPEG for my catalog?
JPEG remains a safe source format. WebP is often served automatically by Shopify to compatible browsers. AVIF is gaining ground for even lower file weights.
Does compression degrade the product zoom?
If you maintain a sufficient source resolution (e.g., 1500 px+) and moderate compression, the zoom remains sharp. The problem mainly comes from images that are too small or overly compressed.
Going Further
Does Shopify resize images automatically?; SEO Performance Audit; Is Shopify good for SEO?; Mobile-first e-commerce design; and Return to the Qstomy e-commerce glossary.
Sources: Shopify Help Center (Images), Google Core Web Vitals documentation, WebP/AVIF format guides (Google Developers).
Enzo
June 4, 2026
