Why is browser-resized image crispy and manually-resized image blurry? I've come across this problem several times now and I can't really understand what causes it; my background is in Wordpress, not really in computer graphics.
I hope this is the right place to ask, I was in doubt with https://graphicdesign.stackexchange.com/.
I have a big initial image, say 1500x1017 at 300ppi, 566 KB. I upload it in my Wordpress site: the browser resizes it to a fixed width that depends on the site (in this case 718px), and it looks nice and crispy. See two screenshots.


In general you don't want to upload oversized images and let the browser do the resizing for you: I'm sure everybody here is familiar with the concept of Serving scaled images to optimise site performance. In a few words,

Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on low-powered (eg. mobile) devices.
You should use an image editor to scale images to match the largest size needed in your page.

Enter Photoshop (or sips or any other resizing tool). I open the image, resize it to 718px width, save without optimisation, i.e. to max jpg quality. I would expect this image to look as crispy as the big one once uploaded: I am just doing the resizing instead of letting the browser do it, right?
Not quite. The image's size matches the displayed size, but the image looks blurry.


What's the deal? Am I resizing with the wrong procedure? Is this about Wordpress media management with its billion of thumbnails?
There are many filters that can be used when resizing images. These filters have names like &quot;box&quot;, &quot;tent&quot;, &quot;gaussian&quot;, &quot;sinc&quot;, &quot;lanczos&quot;, and many others. Believe it or not scaling an image down in size is actually much more challenging then scaling it up in size. It is easy to lose high frequency information when resampling an image. Look for the filters in the scaling software, but most software does a good job of choosing default filters so unless you changed the filter then the issue might be...
The next possible issue: jpg is not a lossless format and choosing the right size to compression setting is a trade off. Usually with jpg images a medium quality setting gives the best compression to quality ratio and only makes the image a few k bigger. This is a potential culprit. Try a &quot;high quality&quot; setting for the jpg to see if that helps, or even try a lossless format to remove image format as a potential problem.
To be more direct...the jpg is being sent at a larger size, with more info in it, the browser resamples giving a nice crispy image. But if you resize then that extra info is thrown away and isn't available for the browser to resample it. This is why using a higher quality jpg may help.
&quot;Optimized&quot; jpg's only affect the size of the file, making it slightly smaller in size.
But serving images up from the web has a lot of middleware getting involved, and if these suggestions don't fix the problem then it may be the middleware which is beyond the scope of this forum.
BTW: the two images look almost identical in my browser.