Using Images

An Image’s Purpose

The reason to add images to your web page is to show content that is difficult, or impossible, to explain through textual descriptions. A picture is worth a thousand words, as they say. At the level of HTML, you should only be using images elements for content. If you can’t provide a proper relevant caption for an image that fits it into your content, then that’s a hint that the image is not important to the content.

Categories of Images

• Icons: icons that often stand in for an action: Save, Open, Close, Play, Stop, etc.
• Logos: an icon that specifically references a company or group.
• Illustrations: any image (drawing, painting, photo, 3d model, etc.) that illustrates a concept
• Animations

Image Optimization

Images make up a large percentage of Intenet traffic. I wouldn’t consider the HTML Hobbyist to be an image intensive site, and I go through great pains to optimize the images to be as small as possible for their intended purpose using properly sized images and using the most advantageous file type for compression. Even then, images make up about 75% of the site’s file space.

Files size can be made as small as possible through a combination of using the appropriate image size and the appropriate compression format. Modern devices have the ability to crop, resize, and export photos into the needed formats. You can use just about any image application for these basic functions: Microsoft Paint is free on Windows or Photos.app comes preinstalled on Mac.

Image Size

You want to deliver an image as close as possible to the dimensions that the visitor is going to see. Putting a 12-megapixel photograph directly on your page is just a waste of bandwidth.

Cropping

Crop out the portions of the image that aren’t necessary.

Resizing

Figure out how large the image will be on your page, and resize it down to just the size that you need. You can even create different versions for different devices. A small version for mobile, and a larger version for desktop.

Image Formats

Choosing the right format for the job helps make smaller files sizes without degrading the image.

GIF

A lossless color-indexed image format that also supports transparency and animation. It only supports one level of transparency. This used to be the preferred format for most logos and buttons, until SVG came along.

JPEG

Great for photos. It’s lossy compression, meaning that every time you edit and save a version the quality gets worse.

PNG

Lossless compression for photos that can also use an alpha-channel for transparency.

SVG

A vector image format. It uses code to make a drawing, so that it can be resized without losing definition. Simple SVGs, such as might be used in icons, can be very small, compared to their raster image counterparts. The code for an SVG can also be written directly into an HTML page, and looks very similar to HTML code.

WEBP

WebP is a modern image format that can do the compression of a JPEG, the transparency of a PNG, and the animation of a GIF. On top of all that, it also tends to compress better than any of them. Its one drawback used to be that it isn’t supported in Internet Explorer, but now all current active browsers support it.

Image Elements

Once you have the images that you want to put on your page, there are a number of HTML elements that you can use to actually get them on your page.

Using height and width attributes on your images helps to prevent layout shift.

<img> element

Use the src attribute to point to an image using the same rules as you would use to link to another html document.

Add the alt attribute to the element to provide alternate content in the absence of images. In the early days some visitors would web surf with images turned off, for faster page load times and decreased bandwidth usage.

<img src="/images/logos/html5.svg" height="100" width="100" alt="HTML5" />

<picture> element

The <picture> element is an element that allows you to designate several image options and allows the browser to pick the best one based on the context. This would let the you serve the best optimized image to the browser. If a browser didn’t understand the WEBP format, it could provide a PNG fallback.

<picture>
  <source srcset="images/image.webp" type="image/webp" />
  <img src="images/fallback.png" height="100" width="100" alt="" />
</picture>

The <img> element is required to be in the <picture> element. It’s the image that will be served if none of the source images will work in the current browser. Any source images would use the text from the alt attribute for their description.

By adding the media attribute you can serve up different images for different criteria, one of those criteria could be the width of the screen.

<picture>
  <source media="(min-width:1280px)" srcset="images/large.jpg" />
  <source media="(min-width:768px)" srcset="images/medium.jpg" />
  <source media="(max-width:767px)" srcset="images/small.jpg" />
  <img src="images/fallback.jpg" height="100" width="100" alt="" />
</picture>

<figure> element

Strictly speaking the <figure> element isn’t just for images. The <figure> element is used to include visual information mentioned in your content. The <figure> element could contain anything: illustrations, maps, charts, code samples, tables, photos, video, blueprints, diagrams, etc. If you view the source code of this site, you’ll see I use <figure> element liberally throughout the website. Use the <figcaption> element to describe the contents of the figure. It’s a good practice to give them an id so that you can link directly to them.

<figure id="figure1">
  <svg viewBox="0,0 10,10">
    <circle cx="5" cy="5" r="4.5" />
  </svg>
  <figcaption>An SVG image written directly in the HTML</figcaption>
</figure>

<svg> element

SVG code can be written directly into your HTML page.

<svg viewBox="0,0 10,10">
  <circle cx="5" cy="5" r="4.5" />
</svg>