Image sizes and color profiles

Highlighted
Shopify Partner
3 0 0

Hello, I have 2 questions : 

I have read through the page on how to use images on Shopify, but I have not found a definitive list of images sizes for all types of pictures so that they render optimally. 

Question 1- I would like to know the optimal size for the banner images (both homepage and for product categories)

With regards to the color profiles, I have followed your instructions and removed the color profiles in photoshop, but the banner images are still quite dull and lifeless compared to the images I upload. 

They seem to be ok for product images, but the banners are strange.

Question 2 - I'm wondering if Shopify is adding some sort of grey gradient over the top banner images. If so, how can I remove it so that my banners are vibrant? 

 

Kind thanks! 

 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
241 8 36

Hi, Yanik!

Freddie here from the Shopify Support team, happy to help.

The answers to both of your questions, are entirely dependent on the theme you are using and what the settings of that theme are. Our platform does not by default put any gradient on top of photos or the slideshow banner, so if you do see this happening on your storefront, it would be a setting within the theme you're using itself.

As for the recommended sizes of your photos, this will also be dependent on the theme you're using and what image sizes it calls for. Which theme are you using? If you're using a third party theme (any theme that isn't downloadable for free from our Themes store) you would want to reach out to the developer of the theme you're using to see what they recommend will work best. However, for simply adding in product photos, you can find our standard recommended dimensions here.

If you are indeed using a free theme from our Themes store, we will have documentation for your theme within our help docs that will give you these dimensions. You can simply go to our help docs and search for your theme title, and it will pop up!

If you're wanting to ensure that you're uploading your images in the best recommended sizes so your theme is running at optimal speeds, I'd recommend you to read through this document here. In most cases, slow page speeds are caused by either images or apps, but it can still be caused by a number of different things. There are a few excellent tools that you can use that can help you determine what could be causing your theme to run slowly, and here are the two we recommend you to try:

  • Pingdom - This will check the page speed and how it measures up to other pages, as well as show the different assets on the page to give you an idea of what might be slowing down the page's load time.
  • Google Pagespeed Insights - a good resource for gauging how fast or slow your site is loading, however it's important to take this info with a grain of salt. I recommend you to read into this blog post here that goes into detail on why this is, and how to use this tool to the best of it's abilities with your Shopify store.

This blog post also gives some great advice and information on how to optimize your theme to ensure that it's performing to the best of it's abilities.

Let me know if this information is helpful, and if you have any more questions! Happy to help!

Best regards,

Freddie
Shopify Support - support@shopify.com

Freddie | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
3 0 0

Hi Freddie, 

 

Thanks for the quick response. I ended up changing the template from the default one to the Brooklyn template and it seems to be going well, now. THanks for your help 

0 Likes
Highlighted
Tourist
6 0 2

This solved my problems completely. 

https://www.lifewire.com/photoshop-save-for-web-tool-tutorial-1697537

Highly recommend you or anyone else checks it out to fix washed out coloring. 

 

0 Likes