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
.jpgfile 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
.pngfile 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
.giffile 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.
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:
- 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
imgelement with proper alternative text.
- 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
<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
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.
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
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
Image size is important depending on what screen it will be viewed on. You can use adaptive images that quickly recreates the original.
SUMMARY OF IMG
img element and its basic attributes:
srcfor the file location of the image
altfor text that should be available when the image is not loaded or cannot be seen
titlefor interesting (but not essential) additional information
figcaptionto provide a more detailed description of an image
heightto tell the browser how large the image is and therefore how much space to allocate for it