An Introduction To HTML Images

Images are one of the fundamentals of the web. Gaining an understanding of the intricacies of the HTML <img> tag is something often neglected by web developers. In this article we’ll talk you through the fundamentals.

1. The Image Tag

The HTML Image tag is what is known as an ‘empty’ tag, because it is a single tag entity and only contains attributes.

<!-- Single entity image tag -->
<img>
<!-- Comparison paragraph element which has an opening and closing tag -->
<p></p>

You may sometimes see a forward slash in the image tag like this: <img/> instead of this: <img> and in such instances the browser will just ignore this forward slash and treat it as an <img> tag. The <img/> tag version is used to make the tag complaint with XHTML and XML, but for standard HTML, and for this tutorial, we will use the <img> version.

The Image Tag Is An Inline Element

The <img> element is what is know as an inline element, which means when you use it, the element will show on the same level as the parent element in the document flow.

To change it to a block level element you must use ‘display:block’ or ‘display:inline-block;’ on the relevant images in your CSS. A lot of developers will change the <img> element to a block level element so it behaves in a more intuitive way and allows for greater manipulation with CSS.

2. Image Attributes

The four most important attributes for an <img> tag are the ‘src’, ‘alt’, ‘width’ and ‘height’ attributes. All four attributes should be included on every <img> element.

src

The ‘src’ attribute contains contains the file path to the image, without it no image will show.

alt

The ‘alt’ attribute contains the text description of the image, which is used by assistive technologies such as screen readers.

<img src="/images/building.jpg" alt="a large building on a sunny day in a city centre">

When using the ‘alt’ attribute there is no need to use phrases such as ‘image of…’ or ‘picture of…’ because the screen reader will do that task for you.

If the image being used is purely for presentation, and not a key part of your content, you should set the alt attribute to be empty e.g. alt=” ”

Width and Height

Setting the ‘width’ and ‘height’ attributes improves site performance and prevents the layout visually jumping. When using the ‘width’ and ‘height’ attributes we omit the ‘px’ or any other unit value.

<img src="/images/building.jpg" alt="a large building on a sunny day in a city centre" width="300" height="200" >

You should aim to set the width and height attribute values to those of the original image, or the same aspect ratio.

3. Captioning Images

If you wish to add an image caption, the most semantic way to do this is to wrap the <img> tag in a <figure> element and use <figcaption>.

You can position the <figcaption> either above or below the <img> element. This is particularly useful is you are showing an image that represents a concept or information that needs an explanation. In the example below we have placed the <figcaption> below the image in the HTML, then tweaked the positioning in CSS so the caption sits in the top right corner.

<h3>An Image With a Fig Caption</h3>
<figure>
    <img src="//inset.agency/wp-content/uploads/2020/01/facebook-ads-images-tonal.jpg" alt="Building on a sunny day" width="270" height="128">  
    <figcaption>Office Lease</figcaption>
</figure>

figure {
    margin: 0
}
figcaption {
    padding: .5px;
    background: white;
    padding: 10px; 
    background: white;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

4. Image Formats

JPEG

The JPEG (Joint Photographic Experts Group) image format is best suited to photographic images and is the most popular image format on the web. JPEG files can use either the .jpeg or .jpg file extension.

SVG

SVG (Scalable Vector Graphics) are ideal for icons and graphical work on the web. They use maths to draw vectors and line art and maintain their high resolution when scaled up to larger sizes. SVGs can be created in software applications such as Affinity Designer or Adobe Illustrator and can result in surprisingly small file sizes.

PNG

PNG (Portable Network Graphics) files are most often used for graphical work such as icons and logos. With the advent of SVGs on the web they are used less than in the past, but are still a go-to format for many designers.

WebP

WebP is a modern image format that provides excellent lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Developed by Google, Webp is an excellent file format for the web, although WebP’s browser compatibility is less than other file formats such as .jpg and .png.

AVIF

The AVIF image format is the latest image codec to be used on the web. AVIF is an optimized image format which was created to make images smaller whilst keeping the same lossless quality. The AVIF image format is derived from the AV1 video format developed by the Alliance for Open Media (AOM).

Just like with the WebP image format you should keep up to date with AVIF’s browser compatibility.

The file size savings with AVIF are impressive, with workable files being up to 75% smaller than their .jpg or .png equivalents and this will no doubt become a major player with web images once browser compatibility increases. The file extension for AVIF is .avif .

5. Compressing Images

For web developers large images are a major factor on site performance and can cause your website to take a real hit when it comes to load times. Although some file formats can produce small files (e.g. graphics work done in SVG), photographic images can cause problems. The best way for a web designer to address this is to compress the images.

You can compress images in software packages such as Affinity Photo or Photoshop, or with online tools such as Squoosh by Google. Using a tool where you can monitor the visual quality of an image during compression gives you the added benefit of being able to compress image file sizes with little or no visual loss of quality.