Will Resizing images in HTML optimize and increase speed of page-loading?

Question

Hello!

NOTE (HTML\ course\ images): Large image may cause in slow page loading.

I want to know if we had for example an image 1920px * 1080px with 2MB size and then used:

<img src="img.jpg" height="500px" width="600px" alt=""/>

Does web browser or etc compress our image and result in improved, optimized and faster page loading?!

Or resizing has no effect neither image's 2MB size nor faster page loading and that NOTE just stands on we have to care about choosing image size?!

Thanks all.

Answer 1

Unfortunately nope.

In fact, the browser need to perform the resize on-the-fly to ensure the image displaying correctly in the container and thus cost more overhead.

Besides, it may generate some artifacts in the image due to the resizing algorithm if the scale factor is too large.

Bonus: You may be interested with the term "Progressive JPEG". Go ahead and Google it! 😉

Answer 2

You're welcome! 😉

Answer 3

Thanks Zephyr Koo.
Sure why not?! :D