High-growth stores are built on a strong foundation. Meet Cornerstone →

Image guide

The best images for the web are those that balance looking good and loading fast on any screen. Achieving this balance may seem daunting, but the good news is that Shopify and Spark will automatically optimize, resize, and adapt your uploaded images for all devices and screen sizes.

By following a few basic guidelines, you can have images that look great and load quickly on all screen sizes with minimal 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.

Watch tutorial

Get tips for optimizing images for your online store.

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 should focus on the content, composition, and orientation of your photos.

There are many excellent guides for product photography, such as Shopify's guide to smartphone product photography. To simplify matters, we've picked out four of the best tips for taking and editing web-ready photography:

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

    When taking product photographs, it is important to leave room around the main subject to allow for cropping. Keeping photographs simple will also ensure the subject remains the main focus.

    You can enhance your image by following the "Rule of Thirds," which involves using your phone's grid setting to place the subject along one of the horizontal or vertical lines. This technique prevents unwanted cropping and makes for more interesting photos. For more information on the "Rule of Thirds," see Adobe's article on the rule of thirds.

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

    Using landscape (horizontal) photos for full-width and hero images can prevent unwanted cropping or needing to scroll down to see the entire image.

    For mobile devices, consider using square images 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 included in images may appear stretched and be cropped when resized. Using Spark's Heading blocks, however, will ensure all text is properly positioned and resized for any 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)

When it comes to image size, there are really two questions: how many pixels wide and how many megabytes? Answering these questions will help make sure that your images are both high quality and load fast.

But the answer isn't about exact measurements: what matters is that your images are above a minimum pixel width and below a maximum file size. Shopify and Stiletto will handle the rest and automatically optimize and re-size your images for your visitor's screen or device.

For optimal image sizes, you can follow these two simple guidelines:

  1. Use a minimum pixel width of 2500 px for optimal quality on all screens.

    You don't need very large pixel widths for high quality images. In fact, larger pixel widths rarely makes a noticeable difference in quality.

  2. Use a maximum file size of around 2 mb for optimal loading speed.

    You don't need to worry if images are a bit over or under the maximum file size.

Image file formats

When saving your images, you'll want to consider what format (or file type) to use. Shopify supports the most common file formats, which are equally great choices for your online store: JPG, PNG, WebP, and GIF.

These formats are popular because they balance size with quality and are widely supported across all browsers.

That said, each format has different benefits and common uses 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
SizeMin 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
SizeMin pixel width: 2500 px.
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
SizeMin pixel width: 2500 px.
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 (horizontal) images can prevent unwanted cropping or needing to scroll down to see the entire 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
SizeMin pixel width: 2500 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.

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.

You can enhance your image by following the "Rule of Thirds," which involves using your phone's grid setting to place the subject along one of the horizontal or vertical lines. This technique prevents unwanted cropping and makes for more interesting photos. For more information on the "Rule of Thirds," see Adobe's article on the rule of thirds.

Logos and icon images

Text columns with images
Text columns with images
Recommended
SizePixel width: 70px - 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 70px - 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.