Is loading the same .jpg in different qualities a waste of data?

Question

I'm building a web site and I want to use a big background image. Because of speed considerations, I thought that it would make sense to send a low-res version of the image the user first (for fast page loading and smooth user interface experience), and when the page finish loading, use JavaScript to load the higher-res version of that same image.

Do the server and the client's web browser know that it's the same image, and load just the "rest" of the data (delta of the low-res and the high-res)? Or does the server send the bigger image unrelated to the smaller image sent before?

Answer 1

No, neither the server, nor the client know that it is the same image. The images are unrelated to each other as far as anyone can tell. That's the factual reality.

What you need is progressive jpeg. For example, here: https://www.thewebmaster.com/dev/2016/feb/10/how-progressive-jpegs-can-speed-up-your-website/

A progressive JPEG is an image created using compression algorithms that load the image in successive waves until the entire image is downloaded. This progressive loading technique gives the visual perception to the website visitor of the images loading faster as the user can see the whole image straight away, as opposed to the usual way which JPEGs load, which is gradually from the top to bottom line by line.