|
|
|
How to optimize image with gimp |
|
How to optimize an image for your website with GIMP |
|
In this tutorial I will show you how to optimize your images for the web with the free software GIMP. |
|
|
Step 1
|
|
Let's assume that GIMP has been installed, if not download it here |
|
|
|
|
Step 2
|
|
Determine the image size for your web page
|
|
The first manipulation will consist in resizing the image to the dimensions adapted to your web page. |
It is indeed useless to integrate an image of 2000px wide to then display it on 200 pixels in your page |
|
If you have no idea what dimensions you need to set your image to, |
Insert your image into your page without sizing it and do some tests by sizing your image in HTML as |
in the example below: |
<img src="picture.jpg" width="300px">
|
It is then enough to vary the value of width until you have the desired result, |
You will know the display width of your image. |
|
You can also experiment with the height attribute, but be careful not to put a value for the height |
and a value for the width at the same time because in this case you could distort the image. |
|
|
Step 3
|
|
|
Resize your image
|
|
Now that you know the width you want for your image, just open your image in GIMP, then go to |
the Image menu --> Image Scale and Image Size, in the window that opens, enter the desired width |
or height then validate with the Scale button. |
|
|
| | |
|
Step 4
|
|
Export the image for web
|
|
|
The image is ready, it must now be exported in a format suitable for the web. |
The main formats used for the web are .png, .jpg or .gif. |
To export your image, click on the File / Export As menu. In the window that opens, click on the arrow |
in front of the text Select file type, then choose the export format you want |
to use and click on Export. |
|
|
| | |
A window containing the parameters corresponding to the selected format will then be displayed |
|
|
jpg Format
|
|
If you choose the .jpg format, you will be able to determine the compression rate of your image. |
Before playing with the Quality slider, check the Show preview in image window box so you can see |
the effects of compression on the final result. |
Adapt the quality of your image to your liking while observing the indication on the file size which varies. |
When you are satisfied with the result, you can click on Export. |
|
|
|
| | |
|
png Format
|
|
If you export your file as .png, always use maximum compression. |
Compression will have no effect on image quality or display time, only the duration of the export. |
|
|
| |