Multipurpose theme documentation
Multipurpose Fashion Theme
Image Optimization
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Performance > Image Optimization
Overview
Optimized images improve load time and Lighthouse scores. Use appropriate sizes and formats for your theme.
Recommended sizes
| Use | Recommended size | Notes |
|---|---|---|
| Product main | 1200–1600px width | For zoom and desktop |
| Product thumbnails | 200–400px | Theme often uses image_url with width |
| Collection banners | 1600–2400px width | Full-width headers |
| Collection tiles | 600–800px | For grids |
| Logo | 200–400px width | SVG preferred |
| Favicon | 32×32px or 64×64px | Theme scales to 32×32 |
Avoiding large files
- Resize before upload. Don’t upload 4000px images for 800px display.
- Use WebP or AVIF when possible; Shopify serves optimized formats where supported.
- Avoid extremely high resolution (e.g. 5000px+) unless needed for zoom.
- Use the theme’s aspect ratios (e.g. 4:3, 1:1) to reduce cropping and reflows.
Step-by-step: Prepare product images
- Export at 1200–1600px width for main product images.
- Use consistent aspect ratio (e.g. square or 4:3) for product grids.
- Compress with tools like TinyPNG before upload if needed.
- Add meaningful alt text in Shopify admin.
Common mistakes
| Mistake | Fix |
|---|---|
| Uploading huge originals | Resize to display size or slightly larger before upload. |
| Inconsistent aspect ratios | Use similar ratios so grids look uniform. |
| No alt text | Add alt text for accessibility and SEO. |
| Too many variants | Limit high-res variants; theme generates responsive sizes. |