HTML How to get image to load with less quality

Question

So I have an image (PNG file) that I want scaled at say, 90%, relative to my webpage. However, this PNG file is very big, and so when it is scaled, not only does it take several seconds to load, but it eats up RAM (My computer has given me warnings that it is low on memory). I do not need all this picture quality in that instance, so how to I let the image render with less quality (to speed up load time) while preserving the scaling and not altering the original file?

~ Thanks

Answer 1

HTML cannot load an image "with less quality". You need to use image editing software if you want the image to load faster, as the browser will load it first with full quality before scaling it down.

Answer 2

You could scale the image proportionally to itself with just HTML and CSS but the browser would still load the whole image into memory. You would need to use some photo editing software to change the resolution of the image and image format to JPEG, which has a better compression algorithm than the PNG image format.

HTML:

<div class="img_resz">
    <img src="img.jpg">
</div>

CSS:

.img_resz img 
{
    width: 90%;
}