There are many different kinds of images that you can use on your online store, including your company logo, product images, slideshows, banners, and blog posts images. Depending on how and where you want to use an image on your store, you might need to upload it in a certain size or format to follow the best practices described here.
Shopify supports the following image formats:
- JPEG or JPG
- Progressive JPEG
If you upload an image that is not a supported format, then Shopify will convert it to either JPEG or PNG. Most image formats will be converted to JPEG, and SVG files will be converted to PNG.
When to use JPEG images
JPEG images are ideal for photography and other still images with complex colors. The JPEG format offers a powerful palette with millions of colors, and lossy compression which can help to keep site performance high without a noticeable loss in image quality.
JPEG is an excellent image format to use for:
- product images
- banner or slideshow images
- images on pages and blog posts.
When to use PNG images
PNG images are ideal for graphics and icons with flat colors and without gradients. The PNG format is also able to support transparency.
PNG is an excellent image format to use for:
- borders and trims.
To keep load times low, Shopify compresses images when they're requested. Compressing an image means reducing its file size to allow for better website performance. With compression, more images can be stored in a given amount of disk or memory space, and the time required to access the images is greatly reduced. Compression might result in a change in image quality, depending on your image's format, size, and original quality.
Shopify's image quality levels after compression are:
- JPEG: Between 65 - 90
- PNG: 90
- GIF: no change in quality
For JPEG images, the quality level of a compressed image depends on the quality of the original JPEG image as well as the output size:
|Original quality||Output size||Output quality|
|86 or more||Height or width of 1024px or more||85|
|65 - 85||Height or width of 1024px or more||Original quality|
|64 or less||Height or width of 1024px or more||65|
|76 or more||Height and width both less than 1024px||75|
|65 - 75||Height and width both less than 1024px||Original quality|
|64 or less||Height and width both less than 1024px||65|
Image uploads to Shopify have restrictions in terms of both megapixels and file size (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 cannot not exceed either of the following limits:
- 20 megapixels
- 20 megabytes
When you view an image on your online store, the colors in the image might look different from those in the original that you uploaded to Shopify. This can occur when an image has a color profile, which is a set of data stored in a file with a
.ICM extension. Color profiles are often embedded into images to help standardize the way that the colors appear on different devices. When images are displayed on your online store, their color profiles are removed.
Color profiles are removed for a few reasons:
- Not all devices are able to read
.ICMcolor profiles, so keeping them intact can result in inconsistencies in image colors across devices.
- When an uploaded image doesn't include a color profile, sRGB (the most common color profile used to display images on the web) is assumed by the web browser. This ensures that your images look the same across all major web browsers and devices.
- Color profiles can take up large amounts of disk space, which can result in heavy loading times.
Remove the color profile from your image
You can remove the color profile from your image by saving it without the color profile before uploading it to Shopify. This process varies depending on your image editing program. If you use an Adobe product, then follow the steps below:
Remove a color profile using Adobe Illustrator or Adobe Photoshop
To remove a color profile using Adobe Illustrator or Adobe Photoshop:
Click Edit, then Assign Profile.
Select Don’t Color Manage This Document.
Remove a color profile using Adobe InDesign
To remove a color profile using Adobe InDesign:
Click Edit, then Assign Profile.
For RGB Profile and CMYK Profile, select Discard (Use Current Working Space).
For more detailed information, you can view the Adobe documentation on color profiles.
Best practices for slideshows and full-width images
If you use one of these themes or have a large slideshow or background image, then it's important to understand what types of images will look 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.
To make sure that your images work well with your theme, here are some things to keep in mind:
The "focal point" of the image, or the part that you want customers to look at, should be in the center. That way, if your theme doesn't show the edges of the image, then the important part will still be visible.
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 theme options (like Venture's Heading text and Subheading text in the slideshow options) to add text and links to your slideshows.
Images that you use for slideshows or backgrounds shouldn't be visually cluttered or "busy", because that will make text harder to read when it appears on top of the image.
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 (like a mobile phone or tablet):
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 (like a laptop or desktop):