Image guide

The size of your uploaded images can help ensure that they're high quality, load fast, and look good on all devices. Below you will find recommendations for image dimensions, file size, and image orientation.

Context also includes a number of image settings to help adjust your images in the theme editor to get them looking their best for desktop and mobile.

Image dimensions (how many pixels tall or wide?)

We recommend uploading images with a minimum width of 2048px.

In general, Context does not have required image dimensions for product or feature images, unless specified in the theme editor. However, Shopify automatically resizes all images to fit your customers' devices, so uploading images with a minimum width of 2048px will ensure optimal quality and avoid any pixelation.

With exception, for icon-like images such as the icon image for the Testimonials section, we do recommend using 160px by 160px images.

File size (how large should the file be?)

Feel free to upload image files as large as Shopify can handle.

Shopify can host image files up to 20MB and will automatically resize images to balance speed and quality. While larger image files don't necessarily mean higher quality images, you can be sure they won't impact your site speed.

We recommend keeping video files (.mp4) to less than 10MB for best performance across all devices and internet connection speeds. Autoplay videos that are short — around 5 to 10 seconds — work best overall, which will limit your .mp4 file size.

Image orientation (what's the best shape to use?)

There's no single image orientation or shape required for product or feature images.

In general, Context handles all image orientations and will adapt accordingly, whether your images are Square (1:1) (equal width and height), Landscape (3:2) (width greater than height), or Portrait (2:3) (height greater than width).

Learn about Context's Image aspect ratio setting below, which lets you crop your uploaded images to a single uniform shape.

That said, here's a few recommendations for your uploaded images:

For product images, often the best orientation to use is square (1:1) or portrait (2:3). But above all else, consistency is key: select one orientation or shape for your product photography to keep product grids looking uniform and professional.

For feature images, often the best images are landscape (3:2) or square (1:1). We recommend avoiding portrait images for sections that span across the page, such as the Slideshow and Full width image sections. Portrait images in these areas may look stretched, oversized, and force customers scroll down to see the whole image.

With exception, you will find recommended orientations for the following features:

FeatureImage recommendation

Collage

Landscape (3:2) for Small block Portrait (2:3) for Large block

Full width image

Landscape (3:2)

Slideshow

Landscape (3:2) or Square (1:1)

Popup background

Landscape (3:2)

Video featured image

Landscape (3:2)

Image settings available in Context

In Context, most feature sections include some image settings to adjust their size or shape and help your images look great.

The Image aspect ratio setting lets you crop your uploaded images to make them all Square (1:1), Landscape (3:2), or Portrait (2:3). You can select the Natural option to show all images with their original orientation.

The aspect ratio describes the relation between the width (w) and height (h) of an image, stated as w:h. For example, an image that is 400px by 200px has an aspect ratio of 2:1 because its width is twice as large as its height. All square images of any size, have an aspect ratio of 1:1 because the width and height are equal. To learn more, see Shopify's image editing guide.

Below is an example of how the Image aspect ratio setting can make your product photos with different original orientations look uniform and consistent.

See our articles about the Slideshow and Parallax slideshow sections to learn about additional image settings for Mobile-specific images and Image height for Desktop and Mobile.

Below you'll find a list of image settings available for all Context features and sections:

FeatureImage Settings

Logo

Custom logo width (70px - 370px) Recommended: set custom width to actual logo image width.

Blogs page

Image aspect ratio

Featured blog posts

Image aspect ratio

Collection product grid

Image aspect ratio

Collection list

Image aspect ratio

Recommended products

Image aspect ratio

Recently view products

Image aspect ratio

SectionImage Settings

Blog posts

Image aspect ratio

Collection list

Image aspect ratio

Featured collection

Image aspect ratio

Collage

Two Image block sizes (Small and Large)

Full width image

Image aspect ratio (3:2 or unconstrained)

Images with text

Image aspect ratio

Parallax slideshow

Mobile image Height (Desktop and Mobile)

Slideshow

Mobile image Height (Desktop and Mobile)

Testimonials

Icon width slider

Text columns with images

Max image width (slider)

  • Templates

  • Theme Settings