High Performance Images

Chapter 7. Browser Image Loading

Guy Podjarny and Yoav Weiss

Before we discuss image delivery, we should discuss how browsers load images. We’ll cover several performance best practices as we do so, but this chapter will serve primarily as a foundation for advice in later chapters.

Referencing Images

The primary two ways a web page can load an image are:

• An HTML <img> tag

• A CSS background-image

Both techniques will trigger the download and display of an image, but each has some important unique characteristics, which we’ll explain next.

It’s worth noting there are several newer ways to load images, focusing on the “responsive images” practice of downloading images sized appropriately to the current display. These include the image-set CSS property, <picture> element, and srcset attribute, all of which will be discussed in Chapter 11.

JavaScript Image Object

Another often-used technique to load an image is using the JavaScript new Image() constructor. While this constructor is standardized and widely supported, it’s actually just another way to create an HTMLImageElement, and is functionally equivalent to document.createElement("img").

<img> tag

The simplest way to load an image is to use the HTML <img> tag. This tag requires only a single src attribute (which points to the image location), and doesn’t even need to be closed (see Example 7-1 and Figure 7-1).

Example 7-1. Simple <img> tag

<img src="book.jpg">

Figure 7-1. Result of Example 7-1

The full <img> tag supports ...