Product Image Size

[PRam]

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 🙂

[oscprofessional]

@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, 

[speedboostr]

@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.

[Cedcommerce]

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.