Menu
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?
904
The lowsrc property sets or returns a URL to a low-resolution version of an image.
The srcset attribute allows you to specify a list of image file URLs, along with size descriptions. Yo ualso need to still use the src attribute to identify a “default” image source, to be used in browsers that don't support srcset .
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
The srcset attribute lets the browser select the best option based on its own circumstance — screen size, screen resolution, bandwidth speed. As browsers get smarter, they will include better decision-making about which file to use — and you will never have to worry about it.
<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">
This alternate version apparently prevents an infinite requesting loop in Firefox (credit to @Ultimater in the comments):
<img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
