How to load images gracefully?

I want to know what are the ways to load images gracefully in a html website. I'm sure you know what I'm talking about. There is plenty of websites where images load slowly, slow down loading of the website core/content and make user experience really bad.

• I'm looking for ways which let the website core/content to be loaded first, and images to be loaded last.

I found this while searching:

Javascript/jQuery preloader tutorial

Working example of above tutorial

However, this seems to be cosmetic, it doesn't actually pre-load anything and doesn't boost performance either. It simply displays a .gif until 开发者_开发百科the image has fully loaded.

• I've also seen websites where images first appear very croppy and their quality improves over a couple seconds. How is this done?

---

It is called lazy loading.

There are a lot of results about it on google.

---

I've also seen websites where images first appear very croppy and their quality improves over a couple seconds. How is this done?

This happens when the images are interlaced. PNG files, among other types, can be interlaced.

Wikipedia Link for Interlacing

This is done when the image is created/saved.