A customer found the images on her WordPress website too blurry. All images were uploaded larger than needed. For example, the image is displayed 620px wide and was uploaded 800px wide to prevent upscaling. Anyway, the images were blurry. I couldn't make sense of this and created a simple static HTML page:
Max. width should be 620px. I uploaded the image with 620px width and 1800px width and scaled them down bei CSS: 620px to 619px, 1800px to 620px.
The large image did not look better than the smaler one. This was no surprise. What really surprised me is that the CSS scaled images look much blurrier than the ones reduced in size in Photoshop. And this is not a minor difference.
Is there a solution for that? Best practice would be to upload (or create automatically) a set of images that contains all image sizes that are used on the specific site. However, I've always thought, it's ok to upload an image slightly larger than needed. But this is obviously wrong.