How to create web-friendly images from a bitmap

For this tutorial you need:-

  • paint.net - this is a free graphics program

What is in this tutorial:-

  • How to create a jpeg
  • How to create a gif
  • How to create a png
  • Pro's and Con's of the different formats

Installing Paint.net

It is simple to install and use, follow the Get Paint links on the website - just download it to your computer and follow the on-screen instructions. Support and documentation for paint.net is available on the paint.net website.

Creating a Jpeg

To create a jpeg simply open the bmp texture in paint.net, from the File menu choose 'Save As' and select 'jpeg' from the list of file types. 

It will then open the compression preview window, you can adjust the slider to get the right balance of quality verses filesize. Jpegs and Gifs have a trade-off between quality and filesize, you can have optimum quality which gives good results which can be almost flawless to the casual observer, but that does mean the maximum filesize (still much smaller than the equivalent uncompressed bitmap however!). By making the file size as small as possible the quality does decrease and your image will become increasingly blotchy the smaller you make the image file size.

It is a good idea to avoid repeatedly saving jpegs - each time they are saved they lose quality and it requires higher and higher settings to try and reduce the damage, each time the actual file gets larger and larger. If you can, keep an original copy for safe keeping of anything you are putting on your website in case you need to create a new jpeg later on.

Creating a Gif

To create a gif is much the same as for a jpeg, from the File Menu choose 'Save As' and from the drop down list choose Gif. 

Note the top left settings refer to transparency which is only relevant to gifs that have see through areas - it'll make no difference to a non-transparent image such as the ones you can find on this site. 

The Dithering level affects the quality in much the same idea as for jpegs, the higher the levels the better the quality but the larger the filesize. Generally gifs are preferable to jpegs for static images only when the number of individual colours in an image is low (i.e. its a simple image with few colours, or a narrow range of colours). Otherwise they tend to produce larger filesizes for what tends to appear to be a lower quality image.

Creating a Png

To create choose the 'Save As' option from the File menu and select png from the drop down list. Png's are one of the native file formats of paint.net so there isn't a settings dialog box when re-saving an existing image into a png format.

Pro's and Con's of the different web formats

Png is becoming an increasingly common web format as it does render images in much higher quality than gifs or jpegs BUT the filesizes are much larger - my little pink flower pattern in the examples came out as 10.2kb for a high quality jpeg, 11kb for a reasonable quality gif and 38kb for a png for the same image. Since it has a narrow range of colours either the gif or jpeg is preferable, the extra filesize of the png would be wasted on something like this!

In general gifs tend to look rather lumpy, I use jpegs in preference for the vast majority of my web images here and on my other websites simply because on average they get the most useful results. There is a tendancy though for reds and pinks to be distorted in jpegs, this seems to get worse the wider the range of other colours there are in the image. In that respect it may be necessary to use a gif or a png in preference to a jpeg depending on the results you get. 

The best advice I can give you on this matter is to spend some time messing around with the different formats and settings to see what results you get, do consider those viewing your images when posting them online - small filesizes are helpful, but equally if you've got a very special image that should be shown in its full glory then don't worry about using the best quality. If the image is too big for comfort then you can always do as I do here, and zip it and provide a link for people to download it, or put a warning with the filesize so people with very slow connections can decide ahead of time if they want to view the image.

Privacy Policy

I will only use email addresses you provide when contacting me to answer your query. Such addresses are not used by me for any other purpose and are not shared with outside parties.

© Copyright: The Fat Strawberry 2005-2008 - All Rights Reserved