Images
When building fast, responsive Shopify themes, image sizing plays a crucial role in performance, consistency, and design quality. In this post, we’ll break down how to properly size images for the Flexi Theme Library, and share tools to help you optimize your images for retina screens and faster load times.
Key Tools for Image Optimization
Before jumping into sizes, here are two tools we recommend using in your workflow:
TinyPNG – An online compression tool that dramatically reduces file sizes without noticeable quality loss.
Figma WebP Plugin – Export images directly in the modern WebP format using a Figma plugin. WebP offers superior compression over JPEG and PNG.
Recommended Aspect Ratios & Sizes
We recommend preparing images in multiple sizes depending on context (retina, standard, lightweight, mobile). Below are the most common aspect ratios used in Shopify and suggested dimensions:
1:1 Square

Retina (2x)
2160 × 2160 px
Standard
1080 × 1080 px
Lightweight
800 × 800 px
Mobile
540 × 540 px
16:9 Banner

Retina (2x)
3840 × 2160 px
Standard
1920 × 1080 px
Lightweight
1280 × 720 px
Mobile
960 × 540 px
4:9 Landscape

Retina (2x)
2400 × 1800 px
Standard
1200 × 900 px
Lightweight
1000 × 750 px
Mobile
720 × 540 px
3:4 Portrait

Use
Dimensions
Retina (2x)
1800 × 2400 px
Standard
900 × 1200 px
Lightweight
750 × 1000 px
Mobile
540 × 720 px
Last updated