FROM CACHE - en_header

Product Image Size

PRam
New Member
6 0 0

Hello,

I wanted to have some opinions about the file size and dimension required for shopify store images.
As am aware images can slow down the site, I wanted to know what's the perfect size that will help me improve the site speed?
By images am referring to Product images

Thanks 🙂

Replies 3 (3)
oscprofessional
Shopify Partner
12558 1937 2488

@PRam ,

The perfect size for product images is 500 x 500. and use PNG images. 

PNGs are great for graphics. This includes logos, icons, and other site graphics.

PNGs have what is called lossless compression.  A compressed PNG file has the same quality as the uncompressed file. PNG images offer excellent quality and transparent elements, 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
speedboostr
Pathfinder
116 19 24

@PRam  it depends on your website. The information oscprofessional gave is factually incorrect.

 

Image Type

PNG is best for graphics, but for photographic images JPG is the much better because the image format is the same but the file weight is significantly lower. We've done tests and found that for photographic images, using PNG can make files up to 5x heavier in file weight.

 

On the converse, for graphics (not photos), PNG files tend to be lighter and sharper quality.

 

Image Size

The best strategy for this is to use the srcset attribute to set responsive image scaling depending on the user's device size. Here's a guide on that if you're not familiar: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

 

A simpler, but less optimal way is to make your product images 1x - 2x the maximum size of the image container. 1x if you want to maximize load speed, 2x if you want to make sure images are high resolution when viewed on retina displays.

 

If you need help from Shopify optimization experts feel free to reach out to my team at speedboostr.com/contact.

 

If you prefer to handle it in house, feel free to use our free Shopify Analyzer tool to see what can be optimized, then the linked free guides from there to see how to fix the issues.

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
Cedcommerce
Shopify Expert
290 32 48

Hi @PRam

 

Product images are as significant as slideshow things. High-quality product images are a key to attracting buyers. It is suggested tha you should upload the product images in square form because square images are friendly to mobile phones. In addition, the image size for product images is 800 by 800 pixels. 

 

Follow these steps to fix the product image size. 

 

  1. Logging to your Shopify store’s admin and go to themes. 
  2. Click on Customize. 
  3. Click on the product template in the Admin sidebar and you can select one out of the 3 predefined image sizes. 

 

Additional tips that you can follow - 

 

  1. Keep the consistency in the height-to-width ratio among images. 
  2. Check how images look on mobile phones. 
  3. Check whether your theme comes with a guide. 
  4. Compress all images in your store. 
  5. Write down the image sizes that are ideal for your store. 

 

Try following the steps mentioned above and we are sure you will get a positive response. In any other case, feel free to connect with us. We would be happy to help you! 

 

All The Best, 

Team CedCommerce. 

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here