Will PNG image lose quality when resized using HTML or an APP

Question

For a PNG image 1920x1080, which is better in quality?

<img src="the-png-image.png" width="640">

Using app (e.g. windows photos) to resize it to width 640.

<img src="the-resized-png-image.png">

Which is better in quality in Human's eyes? Will png images resized using app lose quality?

Answer 1

Try it out and see if you can tell a difference.

If the image has a lot of details, you should be able to tell "the-resized-png-image.png" would look worse than the original. Now, this is assuming my past experience with chrome, the quality may vary from browser to browser due to differences in the way they downscale images.

There is also a possibility of browsers changing the way they downscale images in updates, so it may also vary with browser versions.

Here are other questions that are consistent with my findings:

• Why does image lose quality when resized on the source but does not when resized using html

• Make Firefox image scaling down similar to the results in Chrome or IE

• Blurry downscaled images in Chrome

• Has image downscaling improved in Safari 6 and 7? (5 used to be slightly blurred)

Doing your own downscaling:

• HTML5 Canvas Resize (Downscale) Image High Quality?

So, to answer your question: Depends on the browser/app.