> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/theme-guidelines/image-size-guide.md). # Image size guide All images in the theme are responsive. Image proportions are usually set in the section settings or follow the proportions of the uploaded image. The theme does not require exact image dimensions, so we specify a minimum image width rather than a fixed “width × height” size. When preparing images, keep these three rules in mind. **1. Upload images in the proportions you want to display on your store.** This is the most important rule. If you want a portrait image, upload a portrait image. If you want a square image, upload a square image. **2. Upload images at the largest size possible.** The theme automatically selects the appropriate image size for each screen. **3. Make sure images meet or exceed the minimum dimensions listed below.** All image dimensions in this guide account for Retina displays (high-resolution screens such as those on iPhone and MacBook). #### Section recommendations **Products: Featured collection, Featured product, Recommended products, Products collage, Bundle products, Collection page, and more** Product images are not uploaded directly to these sections. Images are uploaded once to the product in Shopify admin, and all product-related sections automatically use those images. The product card shape is set under **Theme settings → Product card → Aspect ratio**. We recommend preparing all product images to match the selected aspect ratio:
Card shapeAspect ratioMinimum size
Squared1:12000 × 2000 px or larger
Portrait3:41500 × 2000 px or larger
Landscape4:32000 × 1500 px or larger
CustomHeight = selected % of width (50–150%)2000 px or larger on the longest side.
For example, at 134%: 1500 × 2010 px or larger
**Full-width banners: Slideshow, Collection banner, background images for sections such as Countdown timer, Call to action, Newsletter signup, and more** * **Desktop:** 3200 px or wider. * **Mobile:** These sections support a separate mobile image. Use an image 800 px or wider. * **Tablet:** Slideshow also supports a separate tablet image. Use an image 2048 px or wider. * The section height is controlled by the section settings, so choose image proportions that work well with the selected height. All slides within a Slideshow should use the same dimensions. **Collage** * Use images 1000 px or wider. For full-width blocks, use images 1800 px or wider. * The shape of each block is determined by the number of **Columns** and **Rows**. Prepare images to match the shape of the block. * A separate **Image on mobile** can be uploaded. Its proportions are controlled by the **Aspect ratio on mobile** setting, which defines the image height as a percentage of its width. **Banners carousel** * Use images 1000 px or wider. * Banner proportions are set in the section settings: **Adapt to image, Squared, Portrait,** or **Landscape**. * All banners in the carousel should use the same proportions. * A separate image can be uploaded for mobile. **Mega menu** * **Banners:** 700 px or wider. For banners wider than half of the menu, use images 1800 px or wider. * Banner proportions are controlled by two settings: the width is determined by the number of columns (out of 12) in the **Banners list** block, and the height is set by **Media height** in the **Dropdown** block. Prepare images to match these proportions. * Collection and product images in the mega menu are taken from the corresponding collections and products by default. If needed, you can upload a custom image in the block. **Image with text: Tabs, Accordion** * Use images 1600 px or wider. **Media vertical scroll, Media horizontal scroll, Media collage, Lookbook** * Use images 1080 px or wider. **Sections with columns: Collection list, Image with text: Grid, Media gallery, Vendors list, Blog posts, Featured blog posts** * The number of items per row is controlled by the section settings, so the image width depends on the selected layout. Images 1000 px or wider are sufficient for any layout. * The card shape is set in the section settings: **Adapt to image, Squared, Portrait,** or **Landscape**. **Collections and blog** * Collection and article images are also uploaded in Shopify admin, directly to the collection or article. * **Collections:** 1000 px or wider. * **Blog articles:** 2000 px or wider. **Video: Video, Slideshow, Social shop feed** * Videos can be uploaded to Shopify as MP4 files or added using a YouTube or Vimeo URL. * In the **Video** section, you can select the video aspect ratio: **16:9, 9:16, 1:1,** or **4:3**. The video should use the same aspect ratio. For example: * **16:9:** 1920 × 1080 px or larger * **9:16:** 1080 × 1920 px or larger * **1:1:** 1080 × 1080 px or larger * **4:3:** 1440 × 1080 px or larger * **Social shop feed:** Use vertical video, 720 × 1280 px or larger. **Logos: Header, Scrolling logo, Footer** * SVG is recommended. * If you use PNG, upload an image at least twice the displayed size set in the theme settings. For example, if the logo is displayed at 200 px wide, use an image at least 400 px wide. #### Examples from our demo store The table below shows approximate image sizes used on the homepage of our [demo store](https://triumph-theme.myshopify.com/). All sizes account for Retina displays. If you want your store to look exactly like our demo, use these sizes as a reference. | Section | Image | Size (px) | Aspect ratio | | ------------------------- | ----------------------- | ------------------------------------ | ----------------- | | Mega menu | Banners | 700 × 930, 860 × 1150 | 3:4 | | Mega menu | Video | 830 × 1120 | ≈ 3:4 | | Slideshow | Desktop | 3200 × 1400 | ≈ 16:7 | | Slideshow | Tablet | 2050 × 1700 | ≈ 6:5 | | Slideshow | Mobile | 800 × 1390 | ≈ 9:16 | | Collection list | Collection images | 1000 × 1330 | 3:4 | | Featured collection: Tabs | Product images | 1540 × 2050 | 3:4 | | Collage | Portrait blocks | 1050 × 1460 | ≈ 5:7 | | Collage | Wide blocks | 2130 × 720 | ≈ 3:1 | | Collage | Landscape blocks | 1050 × 720 | ≈ 3:2 | | Collage | Narrow full-width block | 2130 × 360 | ≈ 6:1 | | Collage | Mobile | 800 × 1200 | 2:3 | | Bundle products | Product images | 1540 × 2050 | 3:4 | | Products collage (1) | Banners | 1000 × 1530, 1000 × 750, 660 × 750 | ≈ 2:3, 4:3, ≈ 7:8 | | Products collage (2) | Banners | 1000 × 1450, 1000 × 1080 | ≈ 2:3, ≈ 1:1 | | Banners carousel | Banners | 1060 × 1410 | 3:4 | | Countdown timer | Background, desktop | 3200 × 1670 | ≈ 2:1 | | Countdown timer | Background, mobile | 800 × 1390 | ≈ 9:16 | | Featured collection: Loop | Product images | 1540 × 2050 | 3:4 | | Featured product | Product images | 1540 × 2050 | 3:4 | | Media vertical scroll | Images | 1080 × 1080, 1080 × 1440, 1080 × 810 | 1:1, 3:4, 4:3 | | Social shop feed | Video (1080p) | vertical, cover 720 × 1280 | 9:16 | | Featured blog posts | Article images | 2000 × 1500 – 3000 × 2250 | 4:3 | | Image with text: Tabs | Images | 1600 × 1200 | 4:3 | | Accordion | Image | 1600 × 2130 | 3:4 |