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
<imgsrc="book.jpg">
Figure 7-1. Result of Example 7-1
The full <img> tag supports ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
