Image Formats for Websites

The internet is a global network and you want to provide content all over the world. Connections are getting faster and faster and with faster connections there are more possibilities for images, videos, etc. Compared to videos images do not need that much bandwidth but as a webdeveloper you should take care about the sizes of the images on your website and of the format you choose.

In general image formats that are typically used in the web, are highly compress to save bandwidth of the user.


The following image formats can be used in your website:



The JPEG format is prefereable when ever you use real photos on the web. It compresses your picture and with modern image tools you can also choose the compression rate that is used for your JPEG file. JPEG is also often used for digital cameras.



The GIF Format is preferable when you show sketches or drafts and no real photos. The compression is designed to contain the color palette of the image, which is limited to 255 colors.

A unique feature of gif's is, that they can contain multiple layers and can be used to animate over these layers.


PNG was born as an alternative for GIF because you need to created them with a licenced tool. Nowadays these patents are obsolete and you can use GIF and PNG.
The advantage of PNG compared to GIF is, that you can have a color depth up to 16 bits, the disadvantage is, that PNG does not support aninmations.

In short: When you don't need animations, you should prefer PNG

Note: When you embed images into your website, keep in mind, that most of the websites are stored on linux/unix webservers. On these webserver, the filesystem is case sensitive, so your upper and lower letters should exactly match to the file name, that contains the image.

Embedding an Image into your HTML site

To embbed an image source into your website, your can use the img HTML tag:


<img src="image.gif" /> 

With the img tag the image "image.gif" will be shown on your website. To achive this, the image file musst resist in the same folder, as your HTML file.

When you want to use the image multiple times or store all images in one folder it is also possible to use absolute or relative pathes to the image. You should prefer relative pathes, because when your website will be stored on a webserver, the absolute image pathes might be wrong.

Using an absolute path would look like this:

<img src="/var/www/images/myimage.gif" />

Using a relative path instead, would look like this:


<img src="./images/myimage.gif" />

So far, so good, but what will happen if you transfer your website including all folders to a webserver?

You can try it our. I will work for you, wenn the files still exist on your local computer, but not if you delete them. The absolute path is only valid on your computer, others will have no file on the same location.

So keep in mind: Use relative image locations

Besid relativ and absolute locations, you can also use domains. An example would be:


<img src="" />

Adding the url is required, when you want to include pictures from another domain. You should ask the owner before i he allows you to include these files.

Adding alternative texts to you img tag

Because the user needs to wait for the delivery of some images an blind people can also imagine what is the content of an image, you can add an alternative description to the image.

This will be showen, when the image could not be loaded or when the user hoovers with the mouse over the image. In addition this is also a pro for search engines because they can categorize the content of the image.

The folllowing HTML Snipped shows an image with alternative text in the alt attribute:

<img src="test.gif" alt="my test image" />

You can use the border attribute or css to add a border to your image.

Adding a border to the image

To add a border to the image, the first possibility is the border attriubte. The width is passed in pixels.


 <img src="test.gif" alt="my test image" border="1" /> 

Instead of the border attribute, borders can also be defined by css with the style attribute:


 <img src="test.gif" alt="my test image" style="border: solid 1px;" /> 

Changing width and height of images

It would also be nice if we could change the height and width of an image.

You can do this with the width and height attribute, or with the css attribute width and height:

 <img src="test.png" width="100" height="100" />
 <img src="test.png" style="width: 100px; height: 100px" />

Adjusting the width and the height should only be used for small adjustments. When the image is to large in general, you should resize it, to save bandwidth.

A key functionallity of the www are links. With links you can get from one website to another website. The user can click on them and browse through the pages.

On the next page you will learn, how you can use links on your website to referr to another page.