Step 1: Preparing photos to incorporate into your shop for ecommerce

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

Indeed although now most users have ADSL, it is impossible for one of your future buyers to wait several seconds before displaying a page of your site and I'm not talking about your customers n which do not have ADSL!

We will see how to rework your pictures for 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 you € 26 (at the time of this post).

After you have downloaded and installed the product, launch it (I do not dwell on the product installation that does not have any particular problems).

Go to the Tools menu -> Multiple Conversion:

Xnview multiple conversion

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

In Directory Specify the destination directory of your converted photos.

In Format, select JPG as JPEG / JFIF.

Click the Options button and choose a quality of 70 (which allows you to get fast loading for a correct photo quality).

Click the Transformations tab, select Resize Images and click on the Add button:

Xnview resize

Indicate in the Width and Height maximum size you want for your image leaving checked: Keep proportions. The software will automatically select the smaller of the two dimensions and adapting the other by keeping the proportions of the image.

Add then Edit IPR and let the defaults 72 x 72 which are largely sufficient for an image on the Internet, but this is not essential.

Xnview change the dpi

You will not then have to click on Start to get your images into your destination directory.

Note for users Magento:

If you are a Magento user and want to build your 3 photos in the same folder and give a different name to your 3 sizes of photographs, I advise you to use the other option in the Tools menu -> Sequence conversion:

Xnview sequence conversion

Which will allow you to do the same operation as for multiple conversion, but also to add to it a common name, as here global600 × 600.

Test the resulting gain:

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

Oil lamp

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

Before:

ecommerce - Lamp Oil before

After:

ecommerce - Oil lamp post

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

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

    Articles on the same subject:

  1. Optimizing pictures of the items in your shop with Gimp Feel free to subscribe to the RSS feed to not miss any article.Nous have seen in our previous post, it was necessary to rework your photographs, to achieve a fast loading Pages on your ecommerce site and so ...
  2. How to prepare the creation of your online store with Magento or Prestashop Feel free to subscribe to the RSS feed to not miss any article.Vous want to get started 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 his photos in Magento with Lightbox Please feel free to subscribe to the RSS feed to not miss any article.Lorsque you design your online business website, the visual aspect of your website is very important. This is the first impression that will make you want to or not ...

2 comments why not let yours?

We do not bring support for comments for a technical problem with one of our modules. Thank you to contact us directly with our contact form!

To write a comment