0

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.

Crispy image, resized by the browser Browser resizing

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. Blurry image, intrinsic width = displayed width enter image description here

What's the deal? Am I resizing with the wrong procedure? Is this about Wordpress media management with its billion of thumbnails?

10
  • Hi. Welcome to GDSE. What resampling method are you using to rescale in Photoshop? Have you tried "Bicubic Sharper (reduction)"? Also can you post a link to the original image? Not sure this can be answered just with screenshots.
    – Billy Kerr
    Feb 8 at 13:26
  • Also, does the computer you are viewing this on have any system scaling enabled? If so, try switching it off.
    – Billy Kerr
    Feb 8 at 13:33
  • Assuming the resized picture looked good before you uploaded it to Wordpress I would try to open the image in a new tab just in case. If it's still blurry in the new tab, it could be some image compression by Wordpress (or a plugin). If the image looks good in the new tab, then it could be some css setting that makes it look blurry (I doubt it, but who knows). If the image looked blurry before you uploaded it, then it's probably something you did wrong in Photoshop.
    – Joonas
    Feb 8 at 13:50
  • 3
    Are you using like a 4k resolution or something or are you perhaps zoomed in on the browser window? Because in the screenshot you took, the actual width of the image is 1021px, which could be why it's looking blurry, if the size is going from ~700px to ~1000px.
    – Joonas
    Feb 8 at 13:59
  • 1
    @joonas that's what I suspect too, looks like some system scaling is going on. Also good advice to check the files before uploading. It could be Wordpress that is messing up an otherwise good image, possibly recompressing it.
    – Billy Kerr
    Feb 8 at 14:20

This site is temporarily in read only mode and not accepting new answers.

Browse other questions tagged .