Image strategy for Shopify: a decision tree
When to let the CDN transform, when to pre-process, and the two breakpoints that do most of the work.
Start with what the CDN is good at
Shopify’s image CDN resizes and re-encodes on request, and for the overwhelming majority of product imagery that is the right answer: you upload one large source, ask for the widths you need, and never think about it again. Pre-processing beats it in exactly two cases, and both are worth knowing before you build a pipeline you did not need.
The two breakpoints that matter
Most storefronts serve three or four widths and could serve two. Measure your traffic, not the device landscape: on a Swedish DTC store the split is usually one narrow phone width and one desktop width, with everything in between served by the larger of the two and scaled down.
Every extra srcset entry is a cache split. Two well-chosen widths beat five hopeful ones.
When to pre-process
- 01Art direction, not resizingA different crop on mobile is a different image. The CDN cannot decide where the subject is.
- 02Sources that are wrong before they arriveIf the supplier feed ships 8000px TIFFs with embedded colour profiles, fix it on ingest — not on every request.