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?

  • What do you mean by the "delta"? – jonrsharpe Jan 15 '17 at 23:00
  • 2
    Hmm I think there are image formats that do exactly this on their own. They got us through the modem age. – candied_orange Jan 16 '17 at 1:29

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.