How to optimize image with gimp

ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY




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

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