Using Paint.Net

paint.net logo You can download Paint.Net for free here.

This short tutorial is for all those who ask the question...."my images are too big, what can i do to get them smaller?"
Im going to select an image, and show you step by step exactly how to optimize it, ready to upload to your website. So, either find one yourself, or steal this one from the page, and follow along. (right click on the image below, and choose save as). paint demo

Image File Size

The first thing to understand, is the difference between the file size, and the physical size of the image. The picture I'm using here, is 371 x 278px in size. That's the height and width of the image....it has absolutely NOTHING to do with the file size.

The file size of this image is about 35kb. We want to have it as low as possible, while still having good quality. So lets aim for 20kb or less.

Crop The Image

So let's make a start. Open up your image in Paint.Net. paint-demo2 Cropping an image in this program is'nt hard, once you know how to do it, so let's crop a bit off this image. look just below File, in the main top menu....see the drop down menu named Tool? Open that, and look for the tool called "Rectangle Select". Use that to select the area of your image that you wish to keep. Once that's done, there will be a black and white dotted line around the area that you have selected. paint-demo3 Now, look on the top menu again, and find Image/Crop To Selection. This will now remove the unwanted area of your image. If you preferred to have an oval image, you could have used the Ellipse Select instead....that's a nice option to use for a change.

Resize The Image

Okay, now the image has been cropped, its time to change the physical size of the picture. Remember, this has nothing to do with optimzing it for you web page, its simply how large an area you want it to occupy on the page. So, go to Image/Resize. My recommendation is to change it by percentage only, unless you know what your doing. I have used 80% in this example. I changed absolutely nothing else in the options. All very easy, huh?

Save And optimize The Image

Now the last part....finding a compromise between file quality, and size. remember, we wanted our image to be less than 20kb? Even less than that, if there isn't too much quality loss.
So go to File, and choose either save, or save as. (use "save as" when you wish to change the file type. perhaps from png to jpg, or whatever)

You will be asked to select a folder to save the image to, and once you have THEN you get the option to reduce the save quality! There is a slider that will go from 100% quality, right down to 0. Around 80% will be fine, a big reduction in the file size, with no noticable difference when you view the image.

The Finished Image

paint-demo4 So take a look at our finished image, and compare it to the one at the top of the page.
Firstly, we cropped a little of the unwanted part off. Then reduced the physical size to 80% of the original. Then we saved it at 80% quality. Its a little smaller to look at, but the file size is actually under 10kb. Which means we could have 3 images like this on our page, and still have a quicker load time than the original 35kb image.

I hope this has been helpful to you. How to make a simple header with paint.net shows how to use transparency, text effects, and a few other simple techniques.




Copyright© SBI-Help 2007-2009