Choosing the right image types for your website

In this article we are going to discuss about the types of images that are recommended to use on a website and how to use images when creating a website.

So, what type of images are good to create a website?

Note: If you don't know what type of images exists, you can read this article on wikipedia: http://en.wikipedia.org/wiki/Image_file_formats

To create a website it is recommended that you use three types: JPG, PNG, and GIF images if you must.

Why only three type of images? Of course that are a lot more types of images, but these three are the most used on the web.


Lets discuss about these types of images:

     JPG (JPEG Joint Photographic Experts Group - full name) this format is used by your camera to save the picture you take. This type of image I recommend that you use for the photos you use to create your website; and by photos I don't mean navigation buttons in your website, for that is another type of image that you can use.

     PNG (Portable Network Graphics) this type of image is best used for your web-site's graphics, and by graphics I mean: images for the web-site's navigation menu, logos, backgrounds, and others images used to create the template of your website.

     GIF (Graphics Interchange Format) a image type that was replaced by the PNG type, but still used for creating websites. GIF images supports only 256 colours and are very ineffective if you have detailed images. I recommend you use this type of image as rare as possible. If you use this type of images, use it for simple images like a line, a bullet or something like that.


How is it best to use images when you create a website.

     - First of all do NOT use big image files on your website. If an image is bigger than 200 Kb do not insert it directly in your web pages, first resize it and then use it. For example if you have photos from your camera that you want to appear on your website,  first resize them and then upload the to your website.

     - Second do not resize your images with HTML code. It is recommended that you add the width and height of your image in the HTML code, but do NOT use this to resize your images. This is a very bad way to resize your images because this actually does not resize the images it just shows them at the dimension you specified but the images are still big and take a log time to load, slowing your website.

width="300" height="200" alt="Your Image" title="Your Images" /> - the width and height should be the same with the image's width and height, not smaller neither bigger.

- Use sprites whenever possible. Sprites are images that contain multiple images. For example if you have buttons on your website that have multiple states, this would be a good sprite:

Sprites are good to be used because they reduce the HTTP-Request of the website which leads to an increasing of the website's performances.

- Compress your images as much as possible. You can use RIOT (Radical Image Optimization Tool) software to compress with preview an image. Compressing your image files makes your website load faster.

RIOT is a free software for image compression. You can find a link to download RIOT in the web building tools section.

This is it with images. I hope this article help you better understand how to use and optimize images on your website or when you build a website.

Questions? Please feel free to comment...