having images that are too small or too big – or even worse: having images that are all different sizes – can ruin a customer’s shopping experience. product images are your best shot at getting a user to convert. it’s vital that you present a professional and frictionless user experience.
Google’s brand marketing manager Bruno Delfino says: “as users get more used to digital tools and products due to the pandemic they will get better at interacting with ads and demand a better user experience. That means no broken links. confusing CTAs. slow pages. or desktop-only websites.”
in other words: shoppers have developed a very clear standard for an online shopping experience and have become impatient with sites that fall short.
as Delfino mentioned: slow pages are unacceptable. a big culprit of slowing website pages down are large media files (aka large photos and videos). that doesn’t mean resizing or compressing images until they’re tiny is the answer either. there’s a necessary balance between an image that’s large enough and high quality enough that users can zoom in for details and being small enough that your site doesn’t take forever to load.
filling your shopify store with high resolution images that maintain their integrity when the zoom function is being used is another important element of having the right images sizes. images that are too small or too big become distorted when zoomed in on.
Shopify image best practices
Shopify stores don’t have many restrictions when it comes to uploading images. however: there are a few best practices you should follow when it comes to file size. pixels. aspect ratio. style. and consistency.
what even is a pixel anyway? a pixel is the smallest point of a digital image. pixels are to images what atoms are to people: individual elements that create a completed picture when clustered together. pixels are what become blurred when an image is too big or too small. pixels (or px) are what make up aspect ratios. 500 x 500 = 500 pixels wide; 500 pixels tall. Shopify images can be any size up to 4472 x 4472 px however they recommend 2048 x 2048 px for square images.
when it comes to creating content for your Shopify store a big consideration is your content style. the first step to having a cohesive style to your content is figuring out how you want to represent your brand’s personality: is your brand full of bold colors and interesting angles? or do you learn more toward soft pastels? or maybe you prefer minimalism and understatement. knowing your brand’s personality is the key to creating consistent and cohesive Shopify store content. not sure what your brand style is? try taking a brand personality quiz for guidance.
another key to a cohesive store experience is making sure all of your content looks consistent. this goes beyond keeping within your brand personality. this is making sure when you add new images or videos the quality. style. editing. and coloring are an exact match to what has been on your site before (unless you’re undergoing a complete branding overhaul!). a stable brand is a consistent brand and that’s a cue customers will pick up on quickly.
there are 6 content types to consider when creating content for your store. including these types of content will not only elevate your store but provide a better and less risky shopping experience for your customers.
the most common image you’ll see on ecomm stores are product-only images. these are simple photos of the product sitting dormant against (usually) a white backdrop (think: Amazon where product-on-white images are a requirement). these types of images are a great way to give customers an initial 2-D look at your product. we dare you to be adventurous with your product-only images: try adding props. shadows. or a colorful backdrop. these types of images are a great start but you should follow up with more content that gives additional context to your product.
lifestyle images don’t get the same investment as product-only images. and these types of images can often be the reason a consumer becomes your customer. it comes down to this: seeing your product in a way that allows them to imagine using it in their life — or seeing it in a life they would like to have — causes conversions. this is your chance to tell a story with your product. so make. it. count.
think about your shopping habits. when you see a product you’re interested in at the store do you immediately decide to buy that product without examining it further? or. do you pick it up. turn it over to read the packaging. give it a couple of stretches or test out a specific feature?
when someone is shopping online they don’t have the luxury of doing their product testing routine so they have to rely on your images to give them that same satisfaction. this is why product-in-use images are so important. you should follow up your product image with several images showing all the ways it can bend. stretch. fold. adjust. etc. show off what makes your product different from the rest.
think of slideshow images as your window display. these images should be fun and uniquely your brand (remember: let your brand personality shine!). get creative with how you show off your product here: add pops of color. show your product in use with a model. highlight your entire collection of products.
there are a few technical considerations when it comes to choosing content for your slideshow. a major pain point of Shopify users who utilize the slideshow feature is cropping. to help out their users: Shopify did several UX tests and discovered a few best practices to remember. first and foremost they recommend using the “adapt to first image” setting to determine the height of the slider. while this approach definitely helps with the obscure cropping – you may still need to play with the ordering of images to ensure all of your slider images are optimized correctly for desktop and mobile layouts. Shopify has an excellent example of how this can change the look of your slider.
collections on Shopify are a great way to get creative with how you present your products in order to get customers to buy. buy. buy. Shopify recommends collections based on gender. sale. size. color. type. and seasonal. also consider collections that show related items or entire product lines. for example if you are a beauty brand that has a skin or hair care line where each item can be bought individually and don’t necessarily rely on each other to be effective – showing the shampoo. conditioner. heat protectant. and styling cream as one collection exposes more products to your customer and increases the likelihood of a higher conversion rate.
video is the closest an online customer can get to actually demonstrating the product themselves before they commit to a purchase. consider all the things customers might have wanted to test out with your product: if it’s a beauty product – like a lotion – have a quick video featuring a model rubbing in that lotion; show how long it takes to be fully absorbed and what the skin looks like once the lotion is rubbed in. putting in the investment to show those sorts of details are what’s going to take the fear out of semi-blind buying for customers.
image formats for Shopify products
Shopify accepts most common file types: JPG. PNG. GIF. .MP4 and .MOV. but which file type should you use for your store? here’s a breakdown of each type and their benefit:
a JPG is the most commonly used image type and probably the one you’re most familiar with. for Shopify: your header image. logo image. and product images should all be JPG or PNGs (more on the difference between the two below). JPG stands for Joint Photographic Group which are commonly used for images on the web. these file types are smaller but maintain good quality.
PNG stands for Portable Network Graphics. Shopify also accepts PNG files for header. logo. and product images. the biggest difference between JPG and PNG files are PNG files have a “lossless” compression (meaning it reduces file size without reducing quality) element to them that ensures file quality. PNGs take up more data space but tend to be better used for digital art – like logos.
if you’ve used the internet at all in the last few years you are probably very familiar with the term GIF. but what does it mean? GIF stands for Graphics Interchange Format. like PNGs: GIFs have a lossless element to them that supports both static and animated images (where PNG only supports static images). if you plan to use GIFs on your website: Shopify recommends embedding the GIF by uploading it to a GIF making tool (like Giphy.com) to get the embed code. then you just copy and paste that code into the rich text editor of your store where you want the GIF to show up. easy peasy.
there are two ways to approach adding a video to your Shopify store: direct upload or embedding from a video hosting provider. if you are uploading your video directly to Shopify: it is recommended you use an .mp4 file because it’s the most widely supported video format. secondly: your video file must be less than 20MB. if your video meets these requirements then you can upload it by going into your settings > files > upload files. Shopify will give you a URL to the video once the upload is complete. copy that URL. then go to the HTML rich text editor of where you want to add the video. you’ll need to add a little bit of code along with that file URL you copied. find the code you need in this community post.
if your video file is more than 20MB you will need to use a video hosting platform like YouTube or Vimeo. you’ll need to copy the embed code of your video once you upload your video to whichever provider you decide on. you’ll paste that code into the HTML rich text editor of where you want your video to appear on your site.
image sizes for your Shopify products
slideshow images. collection images. and product images all have different size requirements you need ensure are met before you upload any images to your Shopify store. this will help you avoid having to resize your images over and over before you find the right fit.
Shopify slideshow image sizes
slideshow images are going to have a shorter height and a wider width. think of them fitting a widescreen format on your TV. Shopify recommends these images fall in between 1200px to 2000px wide and 400px to 600px tall. it’s important to note you will see a change in how the images are cropped to fit the slideshow retainer when switching between desktop and mobile to accommodate the difference in screen size. Make sure to middle-align your images when setting up each slide so when this cropping occurs the image stays centered while the top. bottom. and sides are adjusted.
Shopify collection image sizes
Shopify collection images can be any size up to 4472 x 4472 px or 20 MB. besides the size limitations there’s no specific size for collection images – only that the image must be square which means the width and height must be the same.. However: Shopify typically recommends images stay around 2048 x 2048 px to ensure high-resolution square images.
shopify product image sizes
similar to the requirements for collection images: Shopify product images cannot exceed 4472 x 4472 px or 20 MB. the recommended size is 2048 x 2048 px for square images – this gives a nice uniformed look to all your product images. the recommended size also allows your image to maintain a high-quality when the zoom functionality is being used. the zoom feature will not work on images 800 x 800 px or smaller.
if you’re feeling overwhelmed by where to start to get professional images to really set your Shopify store on fire – don’t be. there are great options that will work for any budget.
Shopify has their own stock photo library called Burst. there’s a wide range of options and they are free to download. this is a great option for when you need non-product specific images.
if you are in need of high-quality product images and videos but don’t want to break the bank or feel intimidated by the creative process of creating content – soona is the place to go. get high-quality content for $39 per photo and $93 per video clip. not near a soona studio? not a problem. all you have to do is create your booking. ship your product to a soona location (they offer free shipping on your first label). join your shoot and collaborate with the soona team as you watch your photos appear on your soona dashboard in real time. then you only buy what you love. edited content is delivered to you within 24 hours of checkout.
soona even has a Shopify app that makes booking your photoshoot super easy. once you’ve purchased your content: soona then sends you your edited content that meets every Shopify standard file size and resolution requirement. no downloading. no resizing. you just add the images from the soona app directly to your store.