Uploading images

You can use different types of images, such as your company logo, product images, slideshows, banners, and blog post images. You can also transform your images with crop and resize actions, and customize your media settings in your theme to change the border or shadow on all media displayed on your store.

To display images in your online store exactly as you want them to, you need to use the correct image aspect ratio. Images are automatically optimized for your storefront with the Shopify Content Delivery Network (CDN).

Note

Images don't need to be manually compressed prior to uploading. Always upload the best quality images that you can provide.

Upload an image in the theme editor

You can add images to your theme in the theme editor. You can also upload images in the Content > Files section of your Shopify admin. To learn more, refer to Uploading and managing files.

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize for the theme that you want to upload an image for.
3. Optional: If you want to add an image to a page on your store other than the home page, then click the Home page drop-down menu, and then select the template that you want to edit.
4. From the theme editor sidebar, click the section or block that you want to add an image to.
5. In the Image field, do one of the following:
   • To upload an image from your computer, complete the following steps:
     1. Click Select image > Add images.
     2. Find and open the image on your computer.
     3. Click Done.
   • To use a free stock image from Burst, complete the following steps:
     1. Click Explore free images.
     2. Find an image that you want to use.
     3. Click Select.
6. Click Save.

Adding images using metafields

If you have metafields set up for your images, then you can use the dynamic source picker to add an image to your online store. For more information about metafields and supported image formats, refer to Adding values to metafields.

Setting a focal point on an image

You can use focal points to define the most important part of an image on your online store. When you set a focal point on an image, you make it the area of focus. Focal points always display in frame, even if you have a theme that crops your image to fit the layout. Focal points give you more control over the way your image displays on varying screen sizes, and in cases when themes use different aspect ratios.

You can only have one focal point per image, but you can change the focal point or remove it at any time.

Focal point compatibility with Shopify free themes

You can set a focal point on the following versions of Shopify's free themes:

• Colorblock version 3.0.0 and higher
• Craft version 5.0.0 and higher
• Crave version 5.0.0 and higher
• Dawn version 7.0.0 and higher
• Origin version 1.0.0 and higher
• Publisher version 1.0.0 and higher
• Refresh version 2.0.0 and higher
• Ride version 3.0.0 and higher
• Rise version 1.0.0 and higher
• Sense version 5.0.0 and higher
• Spotlight version 0.0.1 and higher
• Studio version 4.0.0 and higher
• Taste version 4.0.0 and higher
• Trade version 1.0.0 and higher

If you use a third-party theme, then check your theme's documentation to find out whether your theme supports using focal points.

Add a focal point to an image

If you add a focal point to an image, and then use the image in multiple places on your online store, then the same focal point applies wherever you use the image.

Depending on the way your theme crops and resizes your images, the focal point might not always be visually centered.

Steps:

1. Click an image from any of the following locations in your Shopify admin:
   • In the Content > Files section.
   • In the theme editor.
   • In the Media section of your product listings in the Products section.
   • In the Shopify Email editor.
   • In the Metafields section of any resource that has a File reference type metafield for adding an image.
2. To select the part of the image where you want to set a focal point, either click the image or drag the blue dot.
3. Click Save.

Note

You can move a focal point by opening the image again, and clicking a different area of the image to set a new focal point.

Remove a focal point from an image

Steps:

1. Click an image from any of the following locations in your Shopify admin:
   • In the Content > Files section.
   • In the theme editor.
   • In the Media section of your product listings in the Products section.
   • In the Shopify Email editor.
   • In the Metafields section of any resource that has a File reference type metafield for adding an image.
2. Click Remove.
3. Click Save as new.

Image formats

The following image formats are supported:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP
• AVIF

Note

Shopify automatically detects which image formats are supported by your customer's browser, and then automatically displays the image in the best format available. Learn more about Shopify's image transformation capabilities.

Using JPEG images

JPEG images are ideal for photography and other still images with complex colors. The JPEG format has a palette with millions of colors. JPEG also has lossy compression, which can help to keep page loading times fast without a noticeable loss in image quality. Use the JPEG format for the following types of images:

• products
• banners or slideshows
• pages and blog posts

Using PNG images

PNG images are ideal for graphics and icons with flat colors and without gradients. The PNG format also supports transparency in images. Use the PNG format for the following types of images:

• logos
• icons
• borders and trims

Automatic image compression and format selection

To keep page loading times fast, Shopify automatically compresses images when they're displayed on your online store. Compressing an image means reducing the file size to allow for faster page loading.

Additionally, Shopify automatically determines the best possible file format to use when delivering your images. For example, when we detect that a customer's web browser supports modern image formats such as WebP and AV1 Image File Format (AVIF), your images are delivered in those formats.

To improve performance by reducing the file size, GIFs are automatically converted to the animated WebP format.

Image upload limits

Image uploads to Shopify have restrictions in terms of both megapixels, and file size which is measured in megabytes. Megapixels are used to indicate how many millions of pixels make up an image. Megabytes are used to indicate how many millions of bytes of memory or disk space an image takes up.

Images uploaded to Shopify can't exceed either of the following limits:

• 20 megapixels
• 20 megabytes

To find your image's megapixels value, you can use the following equation:

(pixel width x pixel height)/1,000,000

For example, an image with a resolution of 4900 px by 6930 px is 33.9 megapixels based on the equation: (4900x6930)/1,000,000 = 33.9 MP.

Note

There are different image and file size limits for uploading product images.

Image color profiles

When you view an image on your online store, the colors in the image might display differently from those in the original image that you upload to Shopify. This can happen when an image has a color profile, which is a set of data stored in a file with a .ICC or .ICM extension.

Color profiles are often embedded into images to help standardize the way that the colors display on different devices. When images are displayed on your online store, their color profiles are removed.

Color profiles are removed for the following reasons:

• Not all devices are able to read .ICC or .ICM color profiles, so keeping them intact can result in inconsistencies in image colors across devices.
• When an uploaded image doesn't include a color profile, then sRGB, which is the most common color profile used to display images on the web, is assumed by the web browser. This ensures that your images display the same across all major web browsers and devices.
• Color profiles can take up large amounts of disk space, which can result in longer page loading times.

Remove the color profile from an image

You can remove the color profile from your image by saving it without the color profile before you upload it to Shopify. This process varies depending on your image editing program.

View the Adobe documentation on how to Assign or remove a color profile (Illustrator, Photoshop) and Assign or remove a color profile (InDesign).

Best practices for slideshows, image banners, and full-width images

Many Shopify themes feature large images or slideshows that scale to the height of your browser or adapt to your screen size.

If you use one of these themes or have a large slideshow or background image, then you need to understand what types of images display best.

Because large images can't fit on all devices, Shopify sometimes displays only part of the image depending on the device you're using. If your image slideshow contains a lot of large images, then you might find that parts of the images aren't visible.

Considerations for using images for slideshows or image banners

To make sure that your images work well with your theme, keep the following points in mind:

• Images that you use for slideshows or backgrounds shouldn't have text in them. If the text is a part of the image itself, then it might get moved around, cropped, or adjusted based on your theme. Use the theme editor to add text and links to your slideshows and backgrounds.

• For images that you use in slideshows or as backgrounds, choose simple images so that any overlaying text is easy to read.

Wide images on tall screens

Wide images might be cropped on the left and right when the device used to view them has a tall screen, such as a mobile phone or a tablet viewed in portrait mode. In the example below, if the people are the most important part of the image, then you can place a focal point on the right side of the image.

Tall images on wide screens

Tall images might be cropped on the top and bottom when the device used to view them has a wide screen, such as a laptop or desktop monitor. In the example below, if the shoes are the most important part of the image, then you can place a focal point on the bottom of the image.