Images types & how to code them properly


Be careful when using images on your website, and here’s why:

  • People surfing on mobile devices might still have images turned off
  • Visitors of your site might be blind or visually impaired
  • Other visitors might be from a different culture and not understand the icons you use.
  • Search engines only index text, they don’t analyze images (yet), which means that information stored in images cannot be found and indexed.

Image File Types

JPEG (Joint Photographic Experts Group)
JPEG (typically represented by a .jpg file extension) on an image is a file type typically reserved for photographs. Its main benefit is its ability to compress images making them lighter in physical weight than normal and thus giving them the ability to be downloaded faster.
PNG (Portable Network Graphics)
PNG files are normally identified by their .png file extensions. They are the “Swiss Army Knife” approach to web images. They can compress files similar to PNGs, they can also allow transparent colors (like GIFs). While early browser support was limited, modern browsers fully support PNG files.
GIF (Graphic Interchange Format)
This file uses a .gif file extension. It has been widely used for many years as the file type of choice for line art. It supports both color transparency and animation, but does not support compression. Its main drawback is support for only 256 colors.

Script File Types

SVG (Scalable Vector Graphic)
An SVG is an image written in XML. Its main benefit is that it is high quality regardless of page zoom.
Canvas is not so much an image as a location where JavaScript can be used to draw an image. The images are produced by the script on the fly and are the result of the scripting engine executing the code.


There are two main ways to add images to a document: content images using the img element and background images applied to elements using CSS. When to use what is dependent on what you want to do:

  1. If the image is crucial to the content of the document, for example a photo of the author or a graph showing some data, it should be added as an img element with proper alternative text.
  2. If the image is there as “eye candy” you should use CSS background images. The reason is that these images should not have any alternative text

Providing a text alternative with the alt attribute

The <img> element displays the image fine, however, it fails to be best practice because the img element needs an alt attribute. This attribute contains text that is displayed if the image is not available for some reason. The image may not be available because it could not be found, loaded or because the user agent (normally a browser) does not support images. In addition, people with visual disabilities use assistive technologies to read web pages to them. These technologies will read the contents of the alt attribute of img elements out to their users. It is therefore important to write good alternative text to describe the contents of the image and put it in the alt attribute. In addition, the alt text can contain keywords about your content to help with SEO.

Adding nice-to-have information using the title attribute

Most browsers will display the value of an img element’s title attribute as a tool-tip when you hover your mouse cursor over it (see Figure 2.) This can help a visitor learn more about the image, but you cannot rely on each visitor to have a mouse. The title attribute can be very useful, but it is not a safe way of providing crucial information. Instead it offers a good way to, for example, write about the mood of the image, or what it means in context.

Web Images 3

Unlike the previous versions of HTML and XHTML, HTML5 does NOT provide for a longdesc attribute. In HTML5, the longer description (if needed) should be in a text block preceding or following the image. Or, as an alternative, the image could be wrapped in a figure element and the lengthy description included in a figcaption element.

You can tell the user agent to allocate the right amount of space for the images before they load by giving it the image’s dimensions using the width and height.

Image size is important depending on what screen it will be viewed on. You can use adaptive images that quickly recreates the original.


The img element and its basic attributes:

  • src for the file location of the image
  • alt for text that should be available when the image is not loaded or cannot be seen
  • title for interesting (but not essential) additional information
  • figure and figcaption to provide a more detailed description of an image
  • width and height to tell the browser how large the image is and therefore how much space to allocate for it




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s