As an online seller, you understand the importance of having high-quality photos and videos for your Shopify storefront.
The most successful Shopify stores understand the significance of using clear, zoomable images for their products.
This post will help you understand Shopify’s size requirements for images and videos and learn how to optimize those images and videos through best practices. You’ll be well on your way to creating a visually stunning Shopify store that captures your brand essence and converts customers.
Shopify image sizes at a glance
Here are some general Shopify image size guidelines to start with:
- Maximum image file size: 25 megapixels and 20 MB; Shopify says to aim for no larger than 200 KB
- Product media can be images, 3D models, and videos
- Maximum of 250 images, 3D models, or videos to a product
- Aspect ratio: 3:1 aspect ratio is recommended for rectangular-shaped media.
{{shopify-table-1="/background-videos"}}
Here’s an overview of the most used Shopify image sizes for other specific image types:
{{shopify-table-2="/background-videos"}}
{{shopify-table-3="/background-videos"}}
Shopify image sizes
Overall, the ecommerce platform recommends using Shopify images that are at least 2500 pixels wide so they can stretch full-screen across a browser without distortion. Smaller images may get cut off awkwardly or render blurry.
{{resizer-ad="/external-components"}}
Shopify product image size and guidelines
As far as product images on Shopify go, keep the following requirements in mind:
- File type: PNG and JPG recommended; PSD, TIFF, BMP, GIF, SVG, HEIC, and WebP also accepted
- Resolution: 5,000 x 5000 pixels, or 25 megapixels; Shopify recommends 2048 x 2048 pixels for square images; must be larger than 800 x 800 pixels for the zoom feature to function
- File size: up to 20 MB
When it comes to product variants, you can only add one image to each variant. You won’t be able to use other types of media like 3D photos or videos.
📷 Looking for stellar Shopify product images? Our Shopify starter pack includes everything you need to get started with high-quality product photography for your store. Our team of expert photographers and editors will work with you to create stunning visuals that grab customers' attention and help you stand out from the competition.
3D images on Shopify
Shopify supports 3D images, though not for product variants. You can use 3D or 360-degree photos elsewhere on your Shopify site. Keep the following guidelines in mind:
- File size: up to 500 MB. If your file exceeds 15 MB, Shopify will optimize the file to reduce file size and increase loading speeds.
- File type: GLB or USDZ
If you want to use 3D images, you’ll need to ensure your theme supports this media type. Not all Shopify themes allow 3D images.
Image block
Some themes and designs also allow for an image block. The image block can be any width you choose between 50 pixels and 200 pixels, though it must be a multiple of 5. Shopify’s default width for image blocks is 100 pixels.
Collage
Each Collage section has three blocks, and you can use images, products, collection pages, or videos for each of those blocks. You can also add or remove Collage sections as needed.
Shopify uses the media already uploaded to your website, but will optimize the content to an aspect ratio of 2:3 or 1:1 for Collages.
Shopify slideshow image size and guidelines
Shopify also allows for slideshow images and sections which can display a carousel of up to 5 images on a page in your store. You can use static or dynamic slideshow images.
Slideshows can display the full width of your media or a grid view with padding on either side. The height of your slideshow can either adapt to the height of the first of your slideshow images, or you can choose from small, medium, or large. Each media will show for a minimum of 3 seconds up to a maximum of 9 seconds, depending on what you choose.
Slideshow images and media should be free of text. Instead, use the theme editor to add text and links to your slideshows. Choose simple images so this text is easy to read.
Shopify collection image size
You can add a list of collections that you want to highlight. You can add up to 16 collection blocks to a collection list. There’s a minimum of one column and a maximum of five columns. Other specs are as follows:
- Aspect ratio: 2:3 or 1:1
- Small banner image: desktop: 420 pixels, mobile: 280 pixels
- Medium banner image: (default) desktop: 560 pixels, mobile: 340 pixels
- Large banner image: desktop: 720 pixels, mobile: 390 pixels
📏 Resize your product photos for free! Make your images pixel perfect for Shopify and wherever you sell with the soona image resizer >
Shopify banner image
The image banner section allows for either one or two images, as well as a text box with buttons. If you use two images, they’re displayed side by side on desktop. On mobile, you can choose whether the images display side by side or in a column.
On desktop, the text box partially covers the image. On mobile, the text box displays below the image. You can change the text alignment between right, left, or center for both desktop and mobile.
Shopify also recommends using image files that are 300 by 200 pixels or 970 by 90 pixels and less than 5 MB.
Shopify background image size
The background image is the biggest image on your Shopify website. Here are the specs for Shopify background images:
- Max image width: 2500 pixels
- Max image height: 1406 pixels
- Aspect ratio: 16:9
- File size: less than 20 MB
Hero image
The hero shot is usually about half the height of the background image. This image type is great if you need to display more text on the screen right away without requiring users to scroll to see it.
The hero photo specs for Shopify are as follows:
- Max image width: between 1280 pixels and 2500 pixels
- Max image height: between 720 pixels and 900 pixels
- Aspect ratio: 16:9
- File size: less than 10 MB; ideally smaller (without sacrificing image quality)
Shopify blog image size
If you have a blog on your Shopify site, you’ll also have image guidelines to keep in mind for your blog header or featured blog image. Blog images on Shopify should be:
- Max image width: 2240 pixels
- Max image height: 1260 pixels
- Aspect ratio: 16:9
- File size: up to 3 MB; smaller is recommended
Shopify logo image size
Your logo is also going to be an image file. Shopify recommends using a PNG for your logo. Here are some other guidelines to know:
- Min image width: 512 pixels
- Min image height: 512 pixels
- Aspect ratio: 1:1, 2:3, 4:1
- File size: up to 1 MB; smaller is recommended for your Shopify logo image size
- File format: PNG or JPG
Cover image
Shopify has two key requirements for cover images:
- File format: PNG or JPEG
- 1920 x 1080 pixels is recommended
.webp)
Image formats for Shopify
There are a few formats you can choose from when you upload images and content to Shopify. We’ve broken down each of these file formats, and their benefits, so that you can choose the best fit for you:
- JPG/JPEG: This format is one of the most widely used image file formats because of its small size and broad color range. It’s easy to compress, which lets you reduce the file size while maintaining a balance between image quality and file size. Shopify specifically recommends using JPG files for products, banners or slideshows, pages, and blog posts.
- PNG: If you’re looking to upload logos and graphics, PNG is a great choice because it retains good image quality across various image sizes. It also supports transparency, which gives you more flexibility to create custom designs. The only downside of this format is the image file sizes of complex imagery can be very large because of lossless compression. Shopify recommends using PNG files for logos, icons, borders, and trims.
- GIF: GIF is the most popular format for adding animated images that can be recognized by all browsers. In Shopify, the format compresses and reduces product images to 256 colors, making initially large GIFs smaller.
Shopify accepts several other image formats, such as TIFF or HEIC, but they're not as widely used. To ensure better page speed, Shopify serves WebP images in browsers that support this format.
The complete list of accepted file types for images on Shopify is as follows:
- JPEG
- Progressive JPEG
- PNG
- GIF
- HEIC
- WebP
- AVIF
📸 Let’s shoot your shots! In need of a more comprehensive photography solution? Look no further than our Shopify plus pack. This package includes everything in the Shopify starter pack, plus bonuses like lifestyle photos and 360-degree product videos. Work closely with our team to showcase your brand’s unique personality in every photo and video. Take your store's visuals to the next level and create an unforgettable shopping experience for your customers.
Shopify videos
- Video length: up to 10 minutes
- Video size: up to 1 GB
- Video resolution: up to 4K (4096 x 2160 px)
- Video file type: .mp4 or .mov
- Display: 480p, 720p, or 1080p
Video section settings
The video section on your Shopify site has its own set of guidelines:
- Small, medium, or large heading text
- Optional custom cover image
- Alt text
- 0 pixels to 10 pixels of padding above and below the video section
How to add video to Shopify
There are two ways you can add video to your Shopify homepage:
- Embed a YouTube or Vimeo video URL
- Upload a video file directly to Shopify
1. Embed a YouTube or Vimeo URL
The Shopify video banner section is available on all Shopify themes, and can be added to any page type. You can find this in the Native Video Section. To embed a custom video on your page, navigate to Themes > Customize.
Select the relevant page in the top drop down bar, then skip to the bottom of the tool bar, and select AddSection. From here, you can select the Video option.
You can move this video banner section across your toolbar based on where you want to feature your interactive content on the page. Make sure you also include a custom thumbnail for your video, as the content won’t load until the play button is pressed.
2. Upload a video file directly to Shopify
You can also upload your own media directly if you have the video file.
On the right hand side, click the Select a video button and upload your media. You can add images and videos in this section to work with any display or carousel specified by your site’s chosen theme.
Note: While uploading your own media decreases buffering from the offset, it won’t support adaptive streaming, such as with a link from a video streaming service.
What size is a video banner?
Video banners are a great way to professionally display your products in a captivating way. If you’re uploading video banners directly, you’ll need to stick to the following guidelines:
- Video length: up to 10 minutes
- Video size: up to 1 GB
- Video resolution: up to 4K
- Video file type: MP4 or MOV
Note: Your video will need to follow these requirements if you’re uploading directly. Vimeo and YouTube URLs won’t need additional resizing.
🎥 Put your products in motion! Make your product the star of the show with the soona Shopify video pack, the newest addition to the Shopify pack family. The Shopify video pack highlights your product and how to use it. We created this pack to be the perfect solution to showcase your product in action, and to tell your brand’s story.
Best practices for adding photos and videos to your Shopify store
Shopify stores may consider the following tips and best practices when it comes to product images and videos for their websites.
Add alt text and image attributes
Image attributes are user-friendly pieces of information that make your website accessible as well as easier to navigate and use. Image attributes refer to the characteristics or features that describe an image. These attributes provide information about the visual content of the image and are often used in image analysis, computer vision, and machine learning applications.
Image alt text refers to the alternative text associated with an image. This text is used to describe the content of the image and is primarily intended for accessibility purposes. Image alt text is important for people who may be using screen readers or other assistive technologies, as it provides a textual description of the image content. Image attributes and alt text are essentially interchangeable.
For online stores on platforms like Shopify, including descriptive and accurate alt text for product images is important for the following reasons:
- Accessibility: Users with visual impairments who rely on screen readers can benefit from well-crafted alt text to understand the content of an image.
- Search engine optimization (SEO): Search engines use alt text as one of the factors to understand the content of an image. Including relevant keywords in the alt text can improve the SEO of your product pages.
- Browser display issues: In cases where an image cannot be loaded or is blocked, the alt text may be displayed instead, providing users with information about the missing image.
To add or edit image alt text for your products on Shopify:
- Log in to your Shopify admin.
- Navigate to the product for which you want to add or edit alt text.
- In the product editor, find the section for images.
- Click on the image for which you want to add or edit alt text.
- Look for the "Alt text" field and enter a descriptive text that accurately represents the content of the image.
- Save the changes.
It’s good practice to make alt text concise, descriptive, and relevant to the content of the image. This not only improves accessibility but also enhances the overall user experience and can potentially positively impact your store’s SEO.
Streamline your sizing
Using a consistent aspect ratio for all the images of a particular type means those photos will render the same size side-by-side. This makes your site look cleaner, organized, and congruent.
Other benefits of streamlined image sizing on Shopify include:
- Aesthetic appeal: Consistent Shopify image sizes create a visually cohesive and professional-looking website. When product images are uniform in size, it creates a visually pleasing and organized presentation, enhancing the overall aesthetics of the online store.
- User experience: A consistent layout and image size make navigation and browsing more predictable for users. Customers can easily compare products when they’re presented in a standardized manner, leading to a smoother and more enjoyable shopping experience.
- Brand identity: Consistency in product photo sizes helps reinforce your brand identity. It presents a unified and recognizable style, making your brand visually distinct and memorable to customers.
- Mobile responsiveness: A consistent image size facilitates better responsiveness on different devices, especially on mobile devices. Responsive design is critical for providing a seamless experience across various screen sizes.
- Convenience: Managing and updating product images becomes more straightforward when they are consistent in size. It simplifies the process of uploading, organizing, and maintaining your product catalog.
- SEO: Consistent Shopify image sizes contribute to a well-organized and structured website, which can positively impact SEO. Search engines often prioritize websites that provide a seamless user experience and well-optimized content.
- Social media and marketplace integration: If you share product images on social media platforms or sell on third-party marketplaces, consistent sizes ensure a cohesive and attractive presentation across various channels, reinforcing your brand identity.
Complement photos with video
Research shows that 88% of shoppers say video helps them better understand products, while 90% say they're more likely to buy a product if they can see a product video. Another 79% of consumers make a purchase after watching a branded social media video. Talk about persuasion!
Video content is visually appealing, easy to digest, and has become the go-to source for learning and services. It showcases your product features, benefits, helps your brand create an emotional connection with your customer, and plays a huge role in increasing conversion rates.
Video marketing went from a nice-to-have to a must-have seemingly overnight. But they haven’t made still photography obsolete. In fact, the most successful ecommerce brands optimize videos and integrate product photography into their selling strategies.
Upgrade your Shopify video with soona
Are you a Shopify merchant looking to improve your online store's visual appeal? Look no further than our Shopify packs!
- Shopify starter pack: everything you need to get started with high-quality images and product photography for your Shopify store
- Shopify plus pack: everything in the starter pack, plus lifestyle photos and 360-degree product videos
- Shopify video pack: an edited video up to 30 seconds with a model, music, and graphics
Don't settle for subpar product photography on your Shopify store. Let soona help you elevate your online presence with our expertly curated Shopify photography packs. Contact us today to learn more and get started!
.webp)
Shopify product image size FAQs
What are the best image and aspect ratios for Shopify?
You can upload multiple types of images to Shopify. Keep to the guidelines below in mind when sizing your Shopify images.
{{shopify-table-1="/background-videos"}}
What is the best image size for Shopify product?
The best image size for Shopify products is less than 20 MB with a resolution of 5000 x 5000 pixels, or 25 megapixels. Shopify recommends 2048 x 2048 pixels for square photos. Product images must be larger than 800 x 800 pixels for the zoom feature.
What size should product images be?
The ideal size for product images can depend on several factors, including the layout of your website, the platform you're using, and the specific requirements of your theme or template. Here are some general guidelines:
- Resolution: at least 1024 x 1024 pixels
- Aspect ratio: consistent square aspect ratio (1:1) or a landscape aspect ratio (4:3 or 16:9)
Does Shopify resize product images?
Yes, Shopify resizes product images to fit the requirements of its platform and your chosen theme. Shopify automatically compresses images to fit within its guidelines.
How do I change the size of an image on my product page in Shopify?
Use the free soona image resizer to change the size of an image on your product page in Shopify. Then you can re-upload the image to Shopify.