HTML5 tutorial - the img element

The img or image element

As you no doubt know there are many kinds of image files. Images edited in PhotoShop are saved as ".psd" by default, Microsoft's Paint saves images as ".bmp" and so on.

Images on the web are one of three types: JPEGs, GIFs and PINGs – each of which we will look at in turn.

JPEGs (.jpg), GIFs (.gif) and PINGs (.png) files are much smaller than others as they are compressed (or "zipped") by sophisticated algorithms.

How the <img> element works is unaffected by the filename extension (ie. .jpg, .gif or .png). It simply downloads whatever file you tell it to. However the extension does matter to the browser as it tells the browser which algorithm to apply to decompress ("unzip") the file – the reverse algorithm the images editor employed to compress the file in the first place.

Lake Atitlan, Guatemala
Lake Atitlan, Guatemala (atitlan.jpg – 10.2kB)

To compress an image you just save it as a JPEG, GIF or a PING. Your image editor implements the compression algorithm when saving the file. JPEG applies lossy compression, GIF and PING apply lossless compression.

"Atitlan.jpg", the photograph to the right, is 5% the size it would be were it saved in PhotoShop, "atitlan.psd" (211kB) or in MS Paint, "atitlan.bmp" (210kB).

This is important because "atitlan.jpg" takes 5% the time to download than it would saved as .psd. One of the biggest mistakes web designers make is creating pages that take too long to download. People do not want to wait. Bore them for an instant and they're gone.

Lake Atitlan, Guatemala
An overly compressed version of atitlan.jpg. (atitlan-resized.jpg 5.5kB)


Lossy compression works best for photographs. At 10.2kB, atitlan.jpg (above) loads quickly while still looking good.

There is always be some loss of detail (hence "lossy"), but don't apply too much compression or you end up with an image like what you see here. You do save 4.7kB in file size, but the tiny gain in page load speed is not worth the loss in quality.

However, apply too little compression and the image file is unnecessarily large. You are wasting server bandwidth, not to mention your visitor's time.

With the correct amount of compression you end up with a photo that for all practical purposes is identical to the image before it was zipped.


In general, use lossless compression on anything other than photos. Logos are almost always GIFs or PINGs.

HTML5 logo saved as a GIF
An example of a GIF. (html5-badge.gif – 1.2kB)

To the right you can see the HTML5 badge saved both as a GIF and a JPEG. While I over-compressed the JPEG version to make a point, there is always a degree of distortion that comes with JPEGs, while GIFs and PINGs are clean and sharp.

HTML5 logo saved as a JPEG
The same image saved as a JPEG.
(html5-badge.jpg – 1.1kB)
The photo of Lake Aitlan saved as a GIF.
The photo of Lake Atitlan saved
as a GIF. (atitlan.gif – 17kB)

On the other hand, GIFs tend not to be good for photos. When I save the lake photo as a GIF it looks like this. JPEGs can utilize millions of colors while GIFs are limited to a maximum of 256.

As for GIFs versus PINGs, I use GIFs more – but I'll admit to being old school. GIFs were around well before PINGs and I got used to working with them way back when.

In theory PINGs are better than GIFs. In practise browsers (in particular IE – no surprise there) and image editors have been slow to fully support PINGs. Many competent web designers might disagree, but I recommend learning GIFs first.

Photo with transperant gif
A transparent GIF on top of a JPEG.

There is one other important advantage to GIFs and PINGs in that areas in the image can be set to be transparent.

To the right you see atitlan-front.gif on top of atitlan.jpg. When I saved atitlan-front.gif in my image editor I made all of it transparent except for the text in dark blue. Then with CSS I set atitlan.jpg as the background image. You can see the CSS I used to do this in the source code of this page.

In image editors the use of the word "resize" has confused many – myself included. When you want to "resize" an image you would logically think you were changing an image's dimensions, its height and width; not so – at least not in PhotoShop, CorelDraw and a number (but not all) of other image editors. Changing height and width is what they call "resampling". * They call "resizing" compressing the file with one of the compression algorithms (ie. saving it as a JPEG, GIF or a PING).

Lake Atitlan, Guatemala
Here I "resampled" atitlan.jpg down from 300 pixels
wide by 240 pixels high to 150px by 120px. (6.2kB)

"Resample" seems an odd word to use, but it's better than using "resize" in the same context with two different meanings. I don't have a better word, so "resample" it is ...except in those image editors that do use "resize" in the same context with two different meanings.

This is not the place to go into great details about how to edit images. I had a friend once tell me all you had to do to get a photo web ready was resample it and bump up the contrast. He's a nice guy, but not much of a photographer. I also have friends who spend hours agonizing over every pixel. They are great photographers, but don't get much work done. Find an image editor you like and put the time into learning how to use it properly – but efficiently.

There are those that swear PhotoShop is the only way to go – and with some reason. It truly is a powerful program, but it's expensive and difficult to learn. If you know PhotoShop you are way ahead of the game – but if you don't there are all kinds of options, not the least of which are some quite good editors you can download and install for free.

PhotoScape – This editor has a weird interface (for example the save button is on the lower right) but once you figure it out it's quite powerful.
IrfanView – As an image editor IrfanView is limited. However, it may well be the handiest little program ever written. I can't imagine owning a computer without it.
GIMP for Windows – I got an email from someone recommending it and I liked it. It's quite powerful.
GIMP for Mac – I am not a Mac guy (if for no other reason than that there is no Mac version of IrfanView) but I read some reviews online and GIMP seemed to be the most popular free Mac editor. If you have a better suggestion please contact me.

Images are an essential part of any website. A good working knowledge of a competent image editor is important, but there is a lot to learn – just as there is with HTML and CSS. Get the basics down and with time your skills will improve. For now, let's get back to some HTML.


An algorithm is a step-by-step procedure for calculations.

filename extension

A filename extension is a suffix (separated from the basefilename by a dot) to the name of a computer file.

kB or Kilobyte

A unit of memory or data equal to 1,024 bytes.


A group of binary digits or bits (usually eight) operated on as a unit.

byte cont.

  • 1 byte = 8 bits (b)
  • 1024 bytes = 1 Kilobytes (kB)
  • 10242 bytes = 1 Megabyte (MB)
  • 10243 bytes = 1 Gigabyte (GB)
  • 10244 bytes = 1 Terabyte (TAB)


pixel or px

Short for "picture element", a pixel is a single point in a graphic image.
wikipedia· webopedia

* For more information on resizing and resampling go to