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 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?
