File format rules
- JPG for photos and almost all section images.
- PNG only for transparency (logos, icons).
- SVG for vector logos/icons when supported by the section.
- Avoid GIF. If motion is required, use MP4 or an embedded host; never GIF sprites.
Color, profile, and metadata
- Color space: sRGB (export in sRGB; do not embed CMYK/AdobeRGB).
- Strip metadata on export (EXIF/IPTC).
- Sharpen for screen at 1–1.5px radius; avoid haloing.
Compression targets (after export)
- Hero/feature: ≤ 500–700 KB.
- Product detail (main): ≤ 300–450 KB.
- Grid/thumbs: ≤ 120–220 KB.
- Tools: TinyPNG/TinyJPG, ImageOptim, Squoosh. Keep visual loss minimal.
Dimensions and ratios
Pick a ratio for each surface and stick to it. Upload at least 2× the largest rendered size to cover high-DPI screens.
Product imagery
Choose one catalog ratio and maintain it across all products.
RatioUse whenMaster upload (JPG)Square (1:1)Sneakers, gadgets, folded apparel2400 × 2400Portrait (3:4)Full fits, dresses, long coats1800 × 2400Landscape (4:3)Lookbook close-ups, flat accessories2400 × 1800
Rules:
- Keep the same ratio for thumbnails so collection grids read clean.
- Shoot/crop with consistent headroom; avoid random zoom levels between products.
- If using color-filtered galleries, ensure alt text or filenames carry the color for filtering logic.
Collection hero banners
- Recommended: 2400 × 900 (JPG) for wide, cinematic banners.
- Safe area: keep text/subjects 64–96 px away from edges to survive mobile crops.
Homepage features
- Hero slideshow: 3840 × 1600 (JPG). Covers large desktop without blurring on 2× DPR.
- Image-with-text: 2400 × 1800 (JPG). Maintains detail when split with text.
Blog / article
- Article hero: 2400 × 1200 (JPG).
- Inline images: min 1200 px on the shortest side; keep widths consistent per article.
Collection & blog cards (thumbnails)
- Portrait card: 1600 × 2000 (JPG).
- Landscape card: 2000 × 1600 (JPG).
- Match the card layout’s ratio exactly to avoid unexpected crops.
Video and motion
- Use MP4 or YouTube/Vimeo embeds in the video section.
- Poster image: 1600 × 900 (JPG). Required for autoplay fallback and performance.
- Hide control bars unless they add utility.
Cropping control
- Most Scout sections honor the uploaded aspect ratio. If a crop looks off:
- Set the section’s image ratio to match your assets.
- Re-export assets to a single, consistent ratio for that section type.
- Keep subjects centered or set the image focal option (if the section exposes object-position).
Performance defaults (what Scout expects)
- Upload one high-quality master per image; Shopify serves responsive sizes via
image_url/img_url. - Prefer landscape or square for banners over ultra-tall crops; tall images cause CLS on mobile.
- Avoid text baked into images for UI; use section headings/buttons so copy is translatable and crisp.
Naming & organization
- Filenames:
surface-topic-variation-ratio.ext(e.g.,plp-sneaker-01-1x1.jpg). - Group by surface (product, collection-hero, homepage-hero, blog-hero).
- Keep brand overlays/logos in vector/SVG wherever possible.
Upload workflow (repeatable)
- Decide ratios per surface (e.g., product 1:1, collection hero 2400×900, homepage hero 3840×1600).
- Export masters in sRGB JPG, strip metadata, apply light screen sharpening.
- Compress to the target size budget (above).
- Upload to the Theme Editor; assign images to sections.
- Verify on 3 viewports: mobile 360–430 px, tablet ~768 px, desktop ≥1440 px.
- Check grid uniformity: product cards align; no mixed ratios.
- Re-compress offenders; replace assets over budget.
QA checklist (copy into your docs)
- All product images share the same ratio and similar framing.
- Heroes meet or exceed recommended dimensions; edges are free of critical content.
- JPG used for photos; PNG/SVG only where transparency/vector is required.
- File sizes under budgets; no single homepage image > 700 KB.
- Poster images present for every video.
- No GIFs simulating UI.
- Thumbnails inherit the same ratio as their source grids.
- Mobile crops reviewed; important content not clipped.
- Consistent white balance and exposure across set.
Quick reference
- Products: 1:1 or 3:4; 2400 px long side.
- Collection hero: 2400 × 900.
- Hero slideshow: 3840 × 1600.
- Image-with-text: 2400 × 1800.
- Blog hero: 2400 × 1200.
- Cards (portrait/landscape): 1600 × 2000 / 2000 × 1600.
Adopt once, repeat everywhere. Consistency = faster loads, cleaner grids, higher trust.
