| |
| |
| |
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. |
| |
 |
| |