Optimizations photos with Xnview to integrate them into your online store

Step 1: Preparing images for integration into your shop for ecommerce

We saw in our previous post: How to optimize photos for your ecommerce product info
the need to rework your photos for fast loading of pages and so navigation on your site is more fluid.

Indeed, although 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'm not talking about your clients n 'having no ADSL!

We will see how to rework your images to have a quick loading of your pages using a great 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 the product installation that does not present any particular difficulties).

Go to the Tools menu -> Convert multiple:

In Add or Add directory, you can add your files or your photos directory to convert.

In Directory specify the destination directory of your photos converted.

In Format, select JPG as JPEG / JFIF.

Click the Options button and choose a quality of 70 (which gives you a rapid charge for reasonable quality of photo).

Click the Transformations tab, choose Resize Pictures in and click the Add button:

Indicate in the Width and Height maximum size you want for your picture but checked: Keep the proportions. The software will automatically choose the smaller of two sizes and adjust the other keeping the proportions of the image.

Add Change DPI and then leave the defaults 72 x 72 which is largely sufficient for an image on the Internet, but it is not essential.

You just have to click on Start then to retrieve your images in 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 photographs, I suggest you use the other menu option Tools -> Convert Sequence:

That will allow you to do the same operation as for multiple conversion, but more of it add a 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 photo 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 of multiple Xn-view, we get an image of 222 x 600 pixels and a resolution of 72 dpi, which gives us a file with a size of 14 kb. Ais I selected a portion of the photo 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.

Items on the same subject:

1. Optimization of photos of items in your shop with Gimp Feel free to sign up for RSS feeds do not miss any 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 and so ...
2. How to prepare to create your online store with Magento or Prestashop Feel free to sign up for RSS feeds do you want to miss any article.Vous launch in ecommerce and implement an online store, two options are available 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 feeds do 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 ...