====== Optimize an image for the web ======
Even though most people(today) have ADSL, fiber.. it still continues to be useful to optimize one own's images for the web so that they are as small as possible(byte wise). This allows people accessing the site via 3G or satellite to not spend their package quote at one's((OBS: For those who have a quota of data per month(3G and satellite), you can [[https://Addons.mozilla.org/en-US/firefox/addon/image-block/deactivate the display of images on the web]].)) to be able to make the display more fluid(including large connections). What is the advantage of having ADSL if we see the images loading slowly? Well, some sites forget this simple rule. Let's try to do better, shall we!

What is the "right weight" for an image?
  * For a very large image(like a wallpaper), 100 kb is a big maximum not to be exceeded. And doing less, far less(50 KB) is even better.
  * For an average image, as an illustration for an article, 10-20 kb is the ideal(we can go up to 50k).
  * For small images(vignettes, buttons, decoration bars) it is necessary to stay below 10kb. In general these images make 1 or 2 kb.

It is considered to keep a display as fluid as possible, the sum of the images(of a page) should remain below 100kb(in fact, the complete page must weigh only 100 kb(to the max being loaded). This is a difficult rule to follow when you test with an adsl connection of "good quality", one does not realize that this can be an "hardship" for other people.

How do we do it then?

===== Playing with pixel sizes =====
An image of 1200*700 pixels weighs heavier than an image of 800*600. Making a smaller image in height and width is the easiest way to reduce it's "weight" in kb.

Under [[http://www.framasoft.net/article1054.html|Gimp]], go to ''Image''/''Scale and image size'', vary the width or height.. leaving the string on the side(of the values) ​​in order to keep the ratio.

One can also play on the resolution, but it is not what makes the weight vary the most. If the image is at 75 dpi, putting a lower resolution can only perhaps save a few bytes, rarely more.

===== Playing on the recording format =====
There are three main image formats for the web: [[wpfr>jpg|jpg]], [[wpfr>Graphics_Interchange_Format|gif]] and [[wpfr>Portable_Network_Graphics|png]].

The "jpg" is the format that easily can win the most byte, but it has two limitations: It does not support transparency and it does not support animations. But for most images, this is not a concern.

The png handles transparency, which makes it very useful for buttons and some banners, but it is also(at the same time) heavier than jpg. This is an image format that preserves more information(quality).

The gif also handles transparency but also allows animations(animated gif's). According to the image in question, it is sometimes more or less interesting than the PNG.

With a bit of practice, you can optimize an image in any format, but the automatic settings of Gimp are already enough to win kb simply by changing the format of the image.

===== Reduce even more with the jpg =====
Under Gimp, export to jpg, compress to 55, then in the advanced options, check "optimize", and vary the softening slider. All other options must be unchecked. The image will lose some sharpness but will remain very readable. A [[kh>home/img/spad5.jpg|image of 1 299px * 675px]], making 158ko at the base, was thus brought to 86ko(without changing it's size in pixel).
{{tag>Web Graphisme}}