Magento – the best image fromat and size for products in magento

configurable-productcsvimport

I am new on Magento and as per my requirements, I have to import the products data along with images using CSV files and my all of products images are placed in a remote location, let say http://www.xxxxxxx.com/magentoimages/.

I have below question here.

  1. Which image format(JPEG,PNG,GIF etc.) should use for better performance in remote location.
  2. What should be the max image file size for each and every image for better performance.
  3. What should be the max height and width of image for better performance.

I have gone through the below link and he suggest the below ideal Size & resolution for magento product images.

File Format: JPEG
Max. Width: 1600 pixels
Max. Height: 1200 pixels
Max. File Size: 200 kb

I am not sure on this so please help me or guide me as I have to provide the above information to my Client as soon as possible.

Best Answer

File formats
Personally I find JPGs to be perfectly fine for use across Magento unless you need transparency, then 24bit PNG would be the way to go. Keep in mind PHP will compress the file when it dynamically renders the image, so you should supply the highest quality JPG you can (set quality to maximum when exporting from Photoshop or similar).

If you are exporting from Photoshop, make sure you choose "Save as for web", as this will produce much smaller file sizes for the same quality image as it strips out EXIF data and optimises the image for web. See here for more information.

File size
File sizes will completely depend on the dimensions of your images. There's no maximum allowed filesize but your server will need to process the image to generate resized version so don't use huge files. What you have mentioned in your question is fine.

Dimensions
Magento (see Mage_Catalog_Helper_Image) will automatically resize your images to the correct dimensions as specified in your template files. You should upload images with dimensions greater than or equal to the largest instance of it on your site. For example, if you have a main product image that can be displayed in a zoom panel that requires it to be 1500x1500 then you will need to supply an image at least 1500x1500. If the same image is used for the category page at 200x200 then PHP will resize it appropriately.

You can control the quality of the rendered image by adjusting your PHTML files:

$this->helper('catalog/image')->init($_product, 'image')->setQuality(90);

There are also additional PHP libraries other than the default gd2 that you can use that would provide higher quality rendering of images.

ImageMagick seems to be a popular one for better down scaling and avoiding artefacts like moiring

Related Topic