Chapter 05 · Photography, Video & 3D Specs

Recommended image dimensions & media guide

Averdane relies on Shopify’s responsive CDN image pipeline with explicit width, height, and aspect-ratio reservations—eliminating layout shift (CLS 0.00) while keeping studio photography razor-sharp on high-DPI displays.

1. Recommended dimensions by surface

Surface / section	Recommended ratio	Ideal upload size (px)	Notes
Product gallery & cards	`3:4` Portrait or `4:5` Short portrait (`2:3` Tall for coats/dresses)	`1800 × 2400 px` (3:4) or `1600 × 2000 px` (4:5)	Upload consistent ratios across your catalog so collection grids align cleanly without cropping hems or footwear.
Hero banner (Desktop)	`16:10` or `3:2` Landscape	`2400 × 1500 px`	Avoid baking text into the image file—use the Hero section’s native HTML heading and button fields for crisp accessibility and SEO.
Hero banner (Mobile override)	`4:5` or `9:16` Portrait	`1200 × 1500 px`	Set a focal point in Shopify Files so faces and garment details stay centered across viewports.
Collection architectural banner	`21:9` or `16:9` Wide	`2200 × 960 px`	Controlled via Show collection banner image in the Collection section.
Product details cloth macro	`4:3` or `3:2` Landscape	`1600 × 1200 px`	If no custom Detail image is picked, Averdane uses the product’s last landscape media item automatically.
Shoppable look & Complete the look	`3:4` Portrait	`1800 × 2400 px`	Full-body styling shot showing all paired garments clearly.
Video lookbook (Reels)	`9:16` Vertical MP4	`1080 × 1920 px`	H.264 MP4, 6–15 seconds, muted ambient loop, under 12 MB for instant playback, paired with a matching `9:16` cover image.
Material swatch thumbnails	`1:1` Square	`800 × 800 px`	Macro weave photography showing yarn texture at 1:1 scale.
Social sharing image & Favicon	`1.91:1` (OG) / `1:1` (Favicon)	`1200 × 628 px` / `256 × 256 px`	Configured under Theme settings → Social media and Favicon.

2. Using Shopify focal points

Whenever an image is placed into an adaptive container (such as a Hero banner, Editorial collage, or Material chapter), you can set a Focal point directly in Content → Files or inside any Theme Editor image picker. Averdane honors image.presentation.focal_point across every template so collars, faces, and hardware details are never accidentally cropped.

3. Media & Core Web Vitals best practices

Formats: Upload high-quality JPG, PNG, or WebP files; Shopify’s CDN automatically serves next-generation AVIF and WebP variants sized to each visitor’s screen.
LCP priority: Averdane automatically marks the first visible above-the-fold Hero, Collection, or Product image with loading="eager" and fetchpriority="high" while lazy-loading below-the-fold media. Keep home pages focused (8–14 sections) and avoid placing heavy auto-playing third-party embeds in the first viewport.
3D models (.glb): Keep .glb geometry and Draco-compressed textures under 8 MB with a crisp 2D poster image so mobile pages stay fast until the shopper taps to inspect in 3D.