Glossary
What is image compression? Definition
June 4, 2026
Image compression consists of reducing the weight of an image file (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 drop-offs 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 in a more compact way.
Two main families. Lossy compression (lossy): removes details that are not very visible. Formats: JPEG, WebP (lossy mode), AVIF. Ideal for product photos and Lossless compression (lossless): reduces size without altering the final pixels. Formats: PNG, WebP lossless, 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). Both accumulate; Compression vs CDN: compression reduces file weight; CDN brings its delivery geographically closer; Compression vs lazy loading: compression lightens each image; lazy load delays the loading of off-screen images; Visual quality vs file weight: the more aggressive the compression rate, the lower the weight and the more artifacts (blur, banding) may 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 pages, collection grids, and homepages rely on multiple visuals. Without optimization, the page becomes slow, especially on 4G.
LCP (Largest Contentful Paint): the main hero or product image is often the heaviest element to render; SEO: Google rewards a fluid page experience (e-commerce SEO); Conversion: a waiting visitor views fewer products; the bounce rate rises on mobile; Bandwidth costs: less data transferred, which is useful internationally; Feeds and marketplaces: some platforms impose size or ratio limits; and Perceived accessibility: "premium" store = sharp images AND a responsive site.
Compression does not replace an overloaded theme or fifteen third-party scripts, but it is one of the most cost-effective levers: not very technical, with a measurable impact on perceived speed.
From a glossary perspective, image compression should be understood as a practical reference: the term helps to name a common situation, distinguish it from related concepts, and link the definition to concrete decisions for web performance. Its value is therefore not only theoretical; it also allows for better organization of the content, tools, and indicators used by an e-commerce team.
How image compression works
Typical use case: sneaker packshot photo, Lightroom export 3000 × 3000 px.
Before: JPEG 100% quality, 2.8 MB; Step 1 resizing: 1500 × 1500 px (sufficient for desktop product detail page zoom); Step 2 compression: JPEG 80% quality or WebP export → ~180 KB file; and Shopify side: URL ? width=800 for collection thumbnail; Shopify serves a lighter variant via its CDN.
Result: same visual rendering on a standard screen, significantly faster collection loading. 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 damages trust, especially in luxury or beauty.
Practical rule: aim for the smallest file where the quality remains indistinguishable to the naked eye on target mobile and desktop screens.
Image compression management on Shopify
Shopify processes images uploaded to the Admin (Products, Theme, Content) and serves them via cdn.shopify.com.
Useful behaviors. Automatic resizing: Shopify generates multiple 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 compression (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 responsive variations.
Online Store 2.0 Themes: prioritize sections that use Shopify's native filters rather than fixed < img> tags in full resolution.
On Shopify, the challenge lies mainly in translating this concept into a clean, maintainable setup that is understandable for the team. Merchants should avoid scattered settings, document important decisions, and regularly verify that what is displayed to the customer accurately matches what is managed in the admin.
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. When well mastered, it improves catalog understanding, 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: main object of store compression; Online store: pages where images weigh the most; and Conversion: 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 with 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 sizes.
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 highly compressed.
Go 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
13 May 2026
Convert over 2,000 customers on average per month with Qstomy.
The world’s 1st Shopify AI dedicated to customer conversion
Empowering 200+ e-commerce merchants
Subscribe to the newsletter and get a personalized e-book!
No-code solution, no technical knowledge required. AI trained on your e-shop and non-intrusive.
*Unsubscribe at any time. We do not send spam.