Optimizations photos with Xnview to integrate them into your store

Step 1: Preparation of photos to incorporate into your shop for ecommerce

We have seen in our previous post: How to optimize the pictures of your ecommerce product info
the need to rework your images for fast loading of pages and so navigation on your site to be more fluid.

Indeed even now most users have ADSL, it is impossible for one of your prospective buyers to wait several seconds before displaying a page of your site and I do not speak your clients n 'having no ADSL!

We will see how to rework your images to have a quick loading of your pages using a very good product developed by Pierre-Emmanuel Gougelet: Xnview you can download here . This product is free for non-commercial use, otherwise it will cost € 26 (the date of this post).

After downloading and installing the product, run it (I do not dwell on installing the product does not present any particular difficulties).

Go to the Tools menu -> Convert multiple

In Add or Add folder, you can add your files or your pictures folder to convert.

Specify the directory in the destination directory of your photos converted.

In Format, select JPG or JPEG / JFIF.

Click the Options button and choose a quality of 70 (which gives you a fast loading for a satisfactory quality of photo).

Transformations tab, select Resize Pictures, and click the Add button:

Width and Height specify in the maximum dimensions you want for your image leaving checked: Keep proportions. The software will automatically choose the smaller of the two dimensions and adjust the other keeping the proportions of the image.

Then add Change DPI and let the default values ​​that are 72 x 72 more than sufficient for an image on the Internet, but it is not essential.

No more then just click Start to get your images into your destination directory.

Note for users of Magento :

If you are a user of Magento and want to generate your 3 photos in the same folder and name your three different sizes of photos, I suggest you use the other menu option Tools -> Convert Sequence:

That will allow you to do the same operation as for converting multiple, but it added a more common name, as here global600 × 600.

Testing the gain obtained:

To give you an idea of ​​the gain you can expect from this operation, we do a little test. Take a picture of an object with a digital camera, we get the picture below:

We have a picture of 855 x 2304 pixels and a resolution of 230 dpi, which gives us a file with a size of 717 kb.
After passing through the conversion system multi-view of Xn, we obtain an image of 222 x 600 pixels and a resolution of 72 dpi, which gives us a file with a size of 14 kb. I ais selected part of the picture to show you that the large display of the photo you will not see or can the difference.

Before:

After:

You see the best gain you can get if you do this for all photos of your shop.

We will see in our next post how to perform the same operation with other software: The Gimp.

Articles on this topic:

1. Optimization of photos of items in your shop with Gimp Please sign up for RSS feeds do not miss article.Nous have seen in our previous post, it was necessary to rework your photographs to get a quick loading of pages of your ecommerce site and so ...
2. How to prepare for creating your online store with Magento or Prestashop Feel free to sign up for RSS to not miss any article.Vous want to engage in and develop an ecommerce online store, two possibilities you: You already have a business and want to develop your ...
3. How to improve the display of photos in lightbox with Magento Feel free to sign up for RSS to not miss any article.Lorsque designing your online business site, the visual aspect of your site is very important. This is the first impression that will make you want to or not ...