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).
On this page
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:
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:
- 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.
- To select the part of the image where you want to set a focal point, either click the image or drag the blue dot.
- Click Save.
Remove a focal point from an image
Steps:
- 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.
- Click Remove.
- Click Save as new.
Image formats
The following image formats are supported:
- JPEG
- Progressive JPEG
- PNG
- GIF
- HEIC
- WebP
- AVIF
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
.
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.
![Wide images on tall screens](https://cdn.shopify.com/shopifycloud/help/assets/manual/themes/other/wide-image-on-tall-screen-8af7933e011580d401db9fc2265bdcb99047d2ce49d9a420bb499aa6a761f447.png)
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.
![Tall images on wide screens](https://cdn.shopify.com/shopifycloud/help/assets/manual/themes/other/tall-image-on-wide-screen-5272f0cd9c26ccd50d84e429a907e8a32d9d1410e632d9199f7122c840d46fae.png)