Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Image guide and recommendations

The best images for the web are those that balance looking good and loading fast on any screen. It's a fine balance but here's the good news: Shopify and Spark will optimize, re-size, and adapt your uploaded images to best fit your customer's device.

By following a few basic guidelines, you can have images that look good and load quickly on all screen sizes without much effort.

We'll start with best practices for taking and editing web-ready photos, selecting the best image size, and deciding which file formats to use.

Once you get the basics down, our image guide for Spark offers specific recommendations for Spark's sections and an overview of Spark's advanced image settings for fine-tuning the size, position, and style of your images.

Best practices for web-ready photos

Images on the web are designed to be responsive: they will change size, position, and sometimes be cropped to best fit a user's device.

Before considering technical details like image size, you'll want to focus on the content, composition, and orientation of your photos.

There are many excellent guides for product photography, like Shopify's guide to smartphone product photography. We've condensed the top best practices for taking and editing web-ready photography to four key tips:

  1. Position your main subject towards the middle of the frame.

    Leave room for cropping around the main subject. Keep product photography simple to ensure that the subject of your image is the main focus.

    You can follow the "Rule of Thirds" by using your phone's the grid setting. This involves placing your subject along one of the horizontal or vertical lines for an enhanced look and to avoid unwanted cropping. See Adobe's article on the rule of thirds if you'd like to learn more.

  2. Use Landscape orientation for full-width images and Square for mobile images.

    Using landscape (Horizontal) for full-width and hero images can help avoid unwanted cropping or making customers scroll down to see a full image.

    Consider using Square images for mobile to fill more of the screen and ensure they stack uniformly when repositioned.

  3. Do not add text directly to images use heading blocks instead.

    Text on images will appear stretched when re-sized and may be cropped. Spark's Heading and text blocks will automatically adapt their size and position to the current device.

  4. Use Spark's image settings to set the focal point of your images.

    Use the image focal point option and add mobile-specific images to avoid cropping the key area of your image.

Image size (pixel width and memory)

There are two key questions when it comes to optimal image size: how many pixels wide and how many megabytes?

When it comes to quality and speed, the best image size is about staying within the limits rather than exact measurements.

In general, you can follow these two simple guidelines for uploaded images that look great and load quickly:

  1. Images with a minimum pixel width of 2500 pixels will ensure your images can span largest screen sizes.

  2. Images with a maximum file size of around 2 megabytes will ensure your images balance precision with speed.

If you keep within these size ranges, Shopify and Spark will handle the rest. For larger images, Spark and Shopify will re-size your images when loaded and will use alternative formats, such as WebP, when possible.

Note, however, that images with a larger file size rarely show a noticeable difference in quality and can impact load times.

Image file formats

When saving your images, you'll want to consider what format (or file type) to save it as. The most common file formats supported by Shopify for images are equally great choices for your online store: JPG, PNG, WebP, and GIF.

These formats are popular because they balance size with quality and have the widest support across all browsers.

That said, there are different benefits and common uses for each format that are worth considering when creating your images.

FormatCommon use
JPGThe most widely-used format for still images with excellent balance between size and quality.
PNGHigher precision yet large file size than JPG. Best for small images (e.g. icons and logos) with transparent backgrounds.
WEBPA relatively newer format with increasing browser-support and superior compression to JPG and PNG. Great for precise images and animation sequences.
GIFIdeal for small, simple images and animations.
TIFFUncompressed image file often used for scanned photographs with metadata. Typically avoided for web content.

icon-like images found in the Quotes, Images with features, and Text columns with images sections, we do recommend using 160px by 160px images.

Image guide for Spark

The best image size, shape, and orientation will depend on how it's used: background and hero images will need different dimensions than a logo or icon.

Our image guide for Spark combines what we've learned about image size, image format, and best practices for photos. Below you'll find recommendations for choosing and editing images for different theme sections and uses on you online store.

Product images

Product page gallery
Product page gallery
Recommended
SizeMax pixel width: 2500 px.
OrientationSquare or Portrait (vertical) — choose one for consistency
FormatJPG or WEBP
Theme sectionsProduct pages
Collection pages
Featured collection
Featured collection row
Featured Product
Shoppable image
Shoppable feature
Complementary products
Recommended products

Product images appear on Product pages, Collection pages, and product listings used in theme sections.

There are no specific required dimensions. We recommend choosing one shape and orientation for all your product photography to keep product grids looking uniform.

Product pages display images added to your product inventory in the Shopify admin. You can customize the Gallery style in the theme editor. Select one of three layouts (Grid, List, or Thumbnails) and adjust the Gallery size.

Product listings (or product grids) appear on collection pages and in some theme sections. You can customize the aspect ratio and size of all product images in product listing theme settings.

Product listing
Product listing

Collection images

Collections list
Collections list
Recommended
SizeMinimum 2500 pixel width.
OrientationSquare or Landscape (horizontal)
FormatJPG or WEBP
Theme sectionsCollection list page
Collection page banner

Collections images are used for Collection banners and collection listings used in theme sections. In the theme editor, you can choose to use the feature image added in Shopify admin.

There are no specific required dimensions. We recommend choosing one shape and orientation for all your featured collection images.

Full-width feature images

Full width mosaic image
Full width mosaic image
Recommended
SizeMax width: 2500 pixels
OrientationLandscape (horizontal)
FormatJPG or WEBP
Theme sectionsMosaic grid
Slideshow
Shoppable image

Full-width feature images span the entire section or screen and are often added as section blocks.

Using landscape images can avoid unwanted cropping or making customers scroll down the page to see a full image. We recommend avoiding portrait images, which may appear stretched or make customers scroll down to see the whole image.

Feature block images

Social proof with block images
Social proof with block images
Recommended
SizeMin width: 1250 pixels.
Max height: 1406 pixels
File size: 2 MB (max 20 MB)
OrientationSquare or Portrait (Horizontal)
FormatJPG or WEBP
Theme sectionsMosaic grid
Image hero split
Image with text
Image with features
Shoppable feature
Social proof
Text columns with images

Many sections include feature images with adjustable sizes, layouts, and positions. These sections often best highlight product and editorial photography.

Consider using Portrait (vertical) images in the Image with text section and vertical blocks in the Mosaic grid.

Hero images

Image hero with headings
Image hero with headings
Recommended
SizePixel width: 1280 px to 2500 px
Pixel height: 720 px to 900 px
OrientationLandscape (horizontal)
FormatJPG or WEBP
Theme sectionsSlideshow
Video hero

Hero images are like full-width images but are typically shorter in height. Horizontal (landscape) images work best and you might consider using a wider aspect ratio like 16:9.

Hero images are often used with text, so simple images with minimal, well-positioned content are best.

You can follow the "Rule of Thirds" by using your phone's the grid setting. This involves placing your subject along one of the horizontal or vertical lines for an enhanced look and to avoid unwanted cropping. See Adobe's article on the rule of thirds if you'd like to learn more.

The Image height and image focal point settings are useful for ensuring the whole image can be viewed without scrolling and its subject remains visible and centered.

Logos and icon images

Text columns with images
Text columns with images
Recommended
SizePixel width: 50px - 300px
File size: 1 MB
OrientationSquare or Landscape (Horizontal)
FormatPNG (Transparent background) or GIF (animation)
Theme sectionsHeader
Footer Info popup
Inline features
Logo list
Text columns with images

You can add your store's Logo to the Header, among other sections like the Footer.

In the Header settings, we recommend setting the Custom width to the actual pixel width of your logo image (between 50px - 100px).

If you enable Spark's transparent header, we recommend adding an alternate logo with different colors that contrasts with the background color or image.

Image settings in Spark

Spark's advanced image settings let you control the size, shape, position, and general appearance of your images.

Use these settings to make your images fit the sections and look their best. Available image settings will vary between different sections.

Image aspect ratio

Example products shown with different aspect ratios
Example products shown with different aspect ratios

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.

We recommend using this option in the Collection product grid settings to make your product grids and collection pages uniform.

NOTE

The aspect ratio describes the relation between the width (w) and height (h) of an image, written as w:h. For instance, an image that's 400px by 200px has an aspect ratio of 2:1 because its width is twice as large as its height. All square images have an aspect ratio of 1:1 because the width and height are equal.

Mobile-specific images

Using Mobile-specific images helps avoid cropping on smaller devices by using alternate images.

Consider using Square mobile-specific images to fill more of the screen and ensure they stack uniformly when repositioned.

Image height

The Image height setting can help keep images full visible without needing to scroll and avoid cropping. Choose to display the image with a Custom or the Original height (without cropping).

The Height is the percentage of the window height on your customer's device. When Custom height is set to 50%, the image will always display at half the height of the customer's screen.

Image width

The Image size setting lets you control the max width of block images. Use this setting to change an image from 1/2 to 2/3 of a section's width.

Image focal point

Use Image focal points to specify the main focus of your images. Using focal points are a useful way to avoid unwanted cropping. When the layout of your site changes to fit different screen sizes, the focal point of your image will remain centered and within frame.

You can specify a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.

From image

To specify a focal point to an image file when used anywhere on your store, use Shopify's image editor.

After you've uploaded your image, click Edit. Click (+) Add focal point. Click and drag the blue focal point to specify the main focus of your image. Click Save.

To use the image file's focal point, the Image focal point setting must be set to From image.

From Section or Block

To specify a focal point for an image used in a specific section, use the Image focal point setting to select the area for your focal point.

Overlay colors

Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and image. These settings help make your text readable.

Click the Overlay gradient option to add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.

Text size and alignment

Spark's text size and alignment settings can help headings and captions work well with your images.

Do not add text into your original images. Text will become distorted and cropped when adapted to different screen sizes.

Animation

Spark uses animation effects for section images to create a more engaging user experience. For instance, when first visiting or scrolling down a page, images are loaded dynamically: images slide, shimmer, fade, zoom, or ease into position.

Animations play an important role to delight and inform your customers, which can make them stick around longer and keep coming back.

That said, you may want to turn off animations for reasons of load time, style, or accessibility.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.