I have a large png image (950x500px) which I have been scaling down using CSS to 500px wide (and 263 high). Before putting this webpage online I decided to scale the image using GIMP as scaling images with CSS is bad practice. However there is a noticeable reduction in image quality when I scale the image using GIMP rather than CSS in Google Chrome even though both images are png and have identical dimensions. I have tried using all four compression methods offered by GIMP (None, Linear, Cubic and Sinc (Lanczos3)) and none of them match the image quality given by Google Chrome.
What compression method does Google Chrome use to give such high-quality image scaling and how can I achieve this offline?
You may get the answer to your question here: How web browsers resize images
Chrome seems to be using several algorithms depending on the scaling factor:
With a very slight downscale (557 to 555 pixels), Chrome uses the same linear interpolation as when upscaling. (The fact that this graph is disconnected is an artifact of the way ResampleScope works, and has nothing to do with Chrome.)
But look what happens if we downscale just a bit more, to 543 pixels: […] We get a completely different result: clearly a 3-lobed Lanczos filter. Chrome’s strategy may be to use Lanczos when reducing an image by more than 2.5%.
If you have to do it yourself (to get more control on the result), Cubic is usually the best bet scaling up and Sinc (Lanczos3) for scaling down.
If you scale the image yourself, you know how it will look on all browsers.
Note: There are more and more computers equipped with high resolution displays (around 4 times the pixel density of a classic display). You may want to check how images look on those computers. There is a high chance they are scaled up by the browser.