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.
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
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