O'Reilly logo

Browser image loading by Nick Doyle, Yoav Weiss, Guy Podjarny, Tim Kadlec, Colin Bendell, Mike McCall

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Browser Image Loading

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 will serve primarily as a foundation for advice.

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.

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 1-1 and Figure 1-1).

Example 1-1. Simple <img> tag
<img src="book.jpg">
hpim 0701
Figure 1-1. Result of Example 1-1

The full ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required