1
$\begingroup$

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.

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?

$\endgroup$
1
$\begingroup$

Your browser and/or device are zooming the whole page by a factor of 2. The image that is supposedly 718 pixels wide on screen, is actually 1436 pixels wide in your screenshot (I measured). Probably it's an Apple device using a retina display? In any case, that's why it looks so blurry when you serve up an image that's only 718 pixels wide. In this instance, the original size of 1500 is actually much closer to the ideal resolution to serve for this device.

More broadly speaking, pixel sizes reported in browsers (for images and everything else) don't necessarily correspond to actual physical pixels on your display. They are a sort of virtual pixel that's independent of zoom and DPI. This is one reason why modern practice is to use an image with the srcset attribute to provide all the resolutions and let the browser choose which one to download—it will figure out the best resolution given the actual pixels on the screen.

$\endgroup$
1
  • 1
    $\begingroup$ Thanks, the issue was indeed about the retina display $\endgroup$
    – DavideL
    Feb 18 at 10:38
2
$\begingroup$

There are many filters that can be used when resizing images. These filters have names like "box", "tent", "gaussian", "sinc", "lanczos", 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 "high quality" 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.

"Optimized" 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.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.