Check out a free preview of the full Web Performance Fundamentals course:
The "Loading Images Q&A" Lesson is part of the full, Web Performance Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Todd answers a question about loading low quality images first and replacing them with higher quality images once the page is loaded.

Get Unlimited Access Now

Transcript from the "Loading Images Q&A" Lesson

>> A fantastic question in the chat, that I want to address. Victor asked about, loading low quality pictures first, and then replacing them, with higher quality pictures. A lot of big websites do this, you might notice that on medium, I think is the one that, comes to mind immediately, but I've seen this pattern, lots and lots of places.

[00:00:20] That's really interesting because this is gaming the psychology of waiting that we talked about, because you're actually needing to send more bytes over the wire and making it slower in total, because you have to send first the low resolution image, and then later you send the full resolution image.

[00:00:39] However, because you've shown something to the user sooner, you've indicated to them that this page is done, you can go about your business, don't worry about it it'll fill in later. You know what to expect. And so even though you might have deferred the total wait time to be slower than what it would have been, the user is gonna feel like it's faster.

[00:01:04] This isn't a one size fits all technique. You shouldn't always do this because you are slowing down the absolute time. And it's gonna require a bunch of pre-process, it's gonna require some work to do all this to all your images. It's not a matter of running a magic script and it's all just done.

[00:01:23] But in certain circumstances where you have big images that really add value to your content, and the user is waiting for it, this gaming this technique by using that psychology can add a lot of value to the perceived performance of your page.