Phaedra Tech Blog
Published in

Phaedra Tech Blog

What are the right sizes for Shopify Images? All You Need to Know About Images in Shopify

shopify images

Have you ever gone to a store and could not find the product? In a physical store, it may happen because of poor positioning of product sections or categories.

But with online stores, like in a Shopify store, it may happen because of poor placement or optimization of Shopify images.

Whenever a visitor comes to your website, the first thing they look at is the pictures. And, a blurry or stretched out image may come in the way of their buying decision.

Now, what leads to this? It’s due to the wrong picture sizes.

Another thing you need to keep in mind is the compression of images. Non-compressed pictures might be good in quality, but they can affect your website’s speed.

Such things can affect both the appearance and speed of your e-commerce site.

In this blog post, we will tell you about using the right sizes for Shopify images. And how you can compress or/and resize them.

Keep reading!

Why Do You Need to Optimize Shopify Images?

People have really short attention spans these days because we are surrounded by technology. If a customer doesn’t like the look of your website, they will switch to another store instantly without a second thought.

Assume you are already investing a lot of time and money on your Shopify store, and a visitor doesn’t make a purchase because of a blurry image. Yes, all the effort goes to waste because of one bad image.

Let’s say you are selling a product for $100, meaning you will lose $100 that day. And, if it goes on for like 10 times a month, you will lose $1000 of sales in 30 days.

I know it sounds bad. That’s why Shopify store optimization is important for running a successful business.

Now let’s see the various reasons that make you understand why you have to optimize your images:

#1 To Amplify User Experience

Blurry or stretched pictures can ruin the e-commerce experience for a customer. No one is going to purchase if a product doesn’t look good in an image.

The goal of images is to enhance the user experience. Whether a potential customer visits your store through a desktop or a mobile device, the pictures have to be optimized for both platforms.

And, thanks to continuous improvements in mobile technologies, 70% of online shopping is done through smartphones.

That’s why mobile responsiveness for smartphones is vital more than ever. But one needs to make their store appealing for every device the customer will use to enter an e-commerce site.

#2 To increase site speed and SEO

Non-compressed or large photos can have an enormous impact on your site speed. According to Google, site speed is one of the most vital ranking factors.

Google derives results based on the specific search query (keywords). The faster the website is, the more quickly Google will put the search results on its top page.

It means even if you put a great effort into your SEO strategy, your store’s high loading time may ruin it.

If a website doesn’t load within 3 seconds, the bounce rate will increase to 32%. And, it will go up with every passing second.

So, good site speed is essential for both visitors and search engines.

We have a separate guide on increasing the conversion rate of your online business that you can check out after reading this post.

Every Shopify Image Size

So, here comes the moment you were waiting for. Let’s see, what are the perfect sizes for logos, banners, product images, etc.?

One size doesn’t fit all in the case of Shopify.

shopify images

Shopify Favicon Size

In case if you don’t know what a favicon is, it’s the small icon that appears on a tab above the URL.

Whenever you open Facebook, you may have seen its logo in white and blue colors with “F”. It shows the small logo of a brand.

Shopify can let you upload a favicon with 32 x 32px size.

Logo Size for Shopify

When you are setting up a Shopify store, the most crucial part for anyone is to decide a logo for their business.

A logo creates a brand identity for a business, so it has to be unique and different. Generally, a logo appears at the top, near the menu.

You can go up to 450 x 250px; it’s the ideal logo size for Shopify.

logo size for shopify

Haven’t decided your online store name yet? Check out our list of top 5 free Shopify name generator tools.

Shopify Header Image Size

Some e-merchants may want to add a header image, maybe for an upcoming sale, or put another logo for branding. In this scenario, Shopify allows you to set up (height) 250px. But it’s best to stick at 120px for most Shopify themes.

Shopify Mega Menu Picture Size

As you can see by the name, a mega menu image appears within a menu.

Megamenu images are brilliant for showcasing a product category within a menu. It helps with building consumer interest.

360 x 360px is recommended for Shopify mega menu picture size.

If you are having trouble with adding pictures in menus, read our article on how to set up the Shopify menu with images.

Full Shop Background images and Blog Banner Image Sizes

Now this one is tricky as it will depend on the theme you are using. A background image can make your website more appealing if it has your brand colors.

On the other hand, we can play around with blog banners, but we have to be careful with the sizes. Size does matter for Shopify.

For blog banners, you can use 1200x600px for most cases. But blog banner sizes in Shopify highly depend on your theme.

And, for shop background (minimum) 1024 x 768px to (recommended) 1980 x 1080px.

Newsletter pop-up and section image sizes in Shopify

If you have created a newsletter for your visitors to subscribe to, you will want to know newsletter pop-up and section sizes.

With a Newsletter option, you can inform your subscribers about upcoming sales or blogs. It’s a great way to engage with your audience, so it’s a decent functionality to have in your online store.

For Newsletter pop-up images 425x575px is recommended. While for Newsletter sections, you can use up to 1600x300 px.

Login background image size

Whenever a customer logs in to your store, a background image will look appealing to the eyes.

And, a little bit of spice up with your logo colors can make a difference. In short, It looks quite “cool”.

What’s the ideal image size for the login page? Use 1600x1000px for the login background image in Shopify.

Shopify product image size

At an online store, a customer cannot see the actual product. But they judge the quality of a product by images on the website.

So, the images have to be crystal clear to catch the eyes of visitors. Most store owners use stock photos for their stores, but they must consider that many other stores might be using the same pictures.

It’s better to get a decent photoshoot of your products from different angles to increase a buyer’s interest.

shopify product image size

Coming back to product image size, Shopify allows you to have a maximum of 4472 x 4472px for product pictures. Although, 2048 x 2048px is the ideal Shopify product image size.

Although, a picture size near these pixels will suffice for some themes.

But ensure your Shopify product images are not less than 800 x 800 px because the zoom feature doesn’t work correctly below this size.

And, if you want to add a video to the product image, don’t forget to see our blog post on this topic.

Gallery picture sizes for Shopify

Pictures help decrease the bounce rate on a website because whenever someone looks at an attractive photo, they are more likely to stay and look at it.

And, as it helps with creating interest, beautiful product images can make a visitor purchase your product.

Product galleries can be a great way to keep your audience engaged.

But using the perfect sizes for images is necessary as if photos look blurry or stretchy, it can fire back at you.

The ideal gallery picture size in Shopify is 800x800 px.

shopify gallery image sizes or shopify collections

Shopify slider and hero image size

Sliders or slideshows are fantastic to enhance user engagement. The customers are always ready to move around those sliders to view the product from various angles or slide through different products.

For product sliders 500–800 x 1200 px is fine. But for a more horizontal or sectional slider, use 1500 x 600px.

And, if you don’t like sliders, go with a hero image. With a hero image, you need to cover a bigger area of the screen. Anything from 1280 x 720px to 1920 x 1080px will be enough according to your preference.

Photo size for Contact page

Sometimes people won’t make a purchase immediately; they may need to ask a merchant for more information, like about a warranty. Or, they may want to know when you will add a product again that has been sold out.

A plain contact page can make a boring impression on your online store. On the other hand, a well-designed contact page brings more personality to a brand.

To make a good impression, using the right images with the right sizes is essential.

You can use up to 1800x800 px for contact page banner images in Shopify.

Checkout page image size

Like the contact page, you can add some customization to your checkout page as well. Adding a banner or an image for your branding can help.

The appropriate checkout page photo size is 1800x300 px for most themes.

Just make sure your image doesn’t come in the way of checkout page information and is properly aligned to the page.

Featured promotions pictures

Every online store runs some featured promotions. You may want to attract customers to special discounts with some beautiful images.

But a featured promotion has to be “just perfect” with all those good alignments and dimensions.

Opt for 840 x 840px max for most themes.

How to optimize images in Shopify?

Now you know all the sizes for all kinds of Shopify picture options. The next thing you have to do is to optimize the images for your online store.

Here we have 3 options that you can use to optimize photos in Shopify. Use the method that you are comfortable with.

Let’s move on to rectify your Shopify images.

Use Shopify’s Image Resizer

The first method is to use Shopify’s image resizer to change the dimensions of your store pictures. It provides you with three options:

  • Compact: 1024 x 1024px
  • Medium: 2048 x 2048px
  • Large: 4472 x 4472px

Just upload a picture, and change it according to your preferences.

But the problem with this is that you can resize product images only as it only supports the above-mentioned dimensions.

Photoshop or free online editing tools

If you want to have more customization regarding changing the sizes of images or compression, then Photoshop is great for you.

But you wouldn’t want to pay for just editing pictures for your online store unless you already have Photoshop installed.

So, here we can tell you about free editing tools that you can use to edit photos.

Image resizer tools:

  • Image resizer by Adobe.com
  • Smallseotools.com: Image resizer tool
  • Customize image size by befunky.com

Image compression tools:

  • Imagecompressor.com
  • Online image compression tool by TinyPNG
  • Compressor.io

Keep in mind that image quality does get lower when you decrease the pixels. That’s why try to choose or take pictures close to your desired image sizes.

Download third-party apps on Shopify

We got a third method for you as well. If you don’t want to use such editing tools, download third-party apps from the Shopify app store.

It has dozens of apps that can help you with resizing and optimizing pictures. Some good image optimization apps are:

  • TinyIMG
  • SEO Image Optimizer and Resizer
  • Bulk Image Edit — Image SEO

Check out these apps on the Shopify app store to optimize and resize your photos.

Concluding Thoughts

An image is a special ingredient for a successful online store recipe. If you mess it up, your efforts won’t be fruitful. Perfectly aligned, clear, and compressed images are beneficial in attracting customers and SEO.

63% of consumers believe that the visuals on an e-commerce store affect their consumer behavior most.

So, use good quality images with a few tweaks to adjust sizes and compression to hold more customers at your store.

Do you want to start a successful Shopify store or need help with the appearance of your current store?

Phaedra Solutions has helped many e-merchants with setting up Shopify stores, and running them at their best potential. Let us know to get help.

--

--

--

Phaedra Solutions make innovative tech solutions for its clients. What value would you get on our blog? We create the most exciting and fresh content related to technology, business, and e-commerce. Follow us to get the most updated tech and business knowledge in the industry.

Recommended from Medium

The host-read ad dominates podcasting, but ad tech is rapidly changing that

The Case of Booty Calling Your Email Subscribers

Crazy theory about app visibility

Content Strategy and SEO for Lead Gen: Strategy Pt. 1

Why Does Your Business Need a Blog?

Keeping up with your activism during the quarantine period 📢

5 Tips to Improve Website Visibility for Better Google Ranking USA 2021

5 Tips to Improve Website Visibility for Better Google Ranking USA 2021

7 Personal Selling Skills That Really Drive Sales.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Phaedra Solutions

Phaedra Solutions

Software development is the core strength of Phaedra Solutions. The company has been providing the innovative web and app development solutions since 2013.

More from Medium

WuliLessons from Wuli Grooming’s e-store development

Wuli Grooming brand hero image

How to build a powerful email tool on SendGrid to engage all event registrants

What is the Bert algorithm? What are the effects? + Answers to frequently asked questions

Founding a Company in the Tech Space — Lessons Learnt