HyperText Markup Language/Images

Let us start with a quick minimum example:

<img src="turtleneck-sweater.jpeg" />

And let us also have a look at more extended example:

<img src="turtleneck-sweater.jpeg" alt="Photograph of a Turtleneck Sweater"
     title="Photograph of a Turtleneck Sweater" />

Images are normally stored in external files. To place an image into an HTML source, use the img tag with the src attribute containing the URL of the image file. To support browsers that cannot render images, you can provide the alt attribute with a textual description of the image. To provide a tooltip to the image, use the title attribute.

The space before the /> in the examples is there on purpose. Some older browsers behave strangely if the space is omitted.

Placement

Per default, images are placed inline to their surroundings. To place the image as a block or float instead, you can use Cascading Style Sheets.

Alternative text and tooltip

A video describing accessibility challenges for digital documents. Although this video pertains to PDF and word documents, the concept applies to HTML as well.

The HTML specification requires that all images have an alt attribute. This is commonly known as alt text. Images can be split in to two categories:

• those that add to the content of the page;
• those that are purely decorative, e.g. spacers, fancy borders and bullets.

Decorative images should have empty alt text, i.e. alt="". Images used as bullets may use an asterisk, alt="*".

All other images should have meaningful alt text. Alt text is not a description of the image, use the title attribute for short descriptions. Alt text is something that will be read instead of the image. For example,

<img src="company_logo.png" alt="???"> makes the best widgets in the world.

The alt text should be the company's name not the ever popular 'Our logo', which would give the sentence 'Our logo makes the best widgets in the world.' when read in a text only browser.

The alt attribute stands for alternate which screenreaders for the blind, as well as non-graphic-capable browsers (such as Lynx) may use to better enable its user to understand the purpose of the image. Fully and accurately using alt text is essential for the following reasons:

• Allows blind and vision impaired users to understand the content of your website.
• Assists robots and search engines in understanding the content of your website.

Tooltips

An example of a tooltip

Some older browsers incorrectly use the alt attribute' tag to produce image tooltips. However, the title attribute should actually be used for this.

Width and height

To have an image appear smaller than it is in the external file, use the attributes width and height. When only one or the other is specified, images will scale to keep the same overall ratio.

Format

Most images for the web will be made using a limited number of formats. Below is a simple list of commonly supported formats.

• jpg / jpeg
  • Useful for photographs.
  • Near universal support.
  • Does not recreate images perfectly, leading to visible issues with many simple logos and illustrations.
• webp
  • More efficient alternative to jpg.
  • Also supports animation and transparency.
• png
  • Useful for images with transparency.
  • Good for simple or flat colors, such as cartoons, such as logos.
• svg
  • Vector format with infinite resolution.
  • Great for logos and simple geometry.
  • Not useful for photographs.
• gif
  • Supports animated images.
  • Very limited in color and resolution support.
  • Very inefficient format.

• 
  JPG images are ideal for still photographs or detailed paintings.
• 
  JPG is not ideal for simple graphics. Here a lossy JPG is compared with a lossless PNG.
• 
  Raster graphics (left), compared with SVG (right)
• 
  A comparison between lossless PNG, lossy JPG, and lossy Webp, including filesizes. The lossy formats are much smaller then the lossless PNG. The Webp delivers better visual fidelity then the JPG at about the same file size.