- [Instructor] I cannot stress this enough.
Images are the leading cause of the slow web.
According to stats gathered by the HTTP Archive,
images contribute twice as much to the weight
of the average webpage as the next culprit,
which is JavaScript.
To be direct, the stats on images
and their impact on the web are quite damning,
as you can see both in the 2020 HTTP Archive Web Almanac
and in their ongoing tracking of page weight.
Why do images have such a huge impact
on page weight and performance?
The answer is pretty obvious in this example site here.
The web is a visual medium
and big, high resolution images spanning the full width
of the viewport make for big, high resolution visual appeal.
Images also play a significant role
in successful communication,
and one of the huge benefits of the web
is how it enables us to share images with other people.
We have two conflicting needs here.
We want to post high quality images online,
but also want our websites and apps to be performant,
and images are the main reason they are not.
So how do we solve this conundrum?
The answer is with a multi-pronged approach,
ranging from compression to careful selection
of image formats, to how we mark up
and load images in our applications.