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.
The primary two ways a web page can load an image are:
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.
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
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).
<img> tag supports ...