Search code examples
javascripthtmlcss

What is the best alternative to the deprecated lowsrc for images?

I would like to use lowsrc with the img tag to show a low resolution image first (and faster) while the larger resolution image loads.

My large resolution images are @800KB and the low res versions @50KB.

Given that lowsrc has been deprecated and many browsers do not apparently support it I am looking for a solution that does the same thing, preferably with as little code as possible.

Is there a good replacement for lowsrc?

Solution

  • Credit to @Ultimater in the comments for the suggested change to prevent an infinite requesting loop.

    <img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">