<p>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.</p>
<p>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 <a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/" rel="nofollow noreferrer"><code>srcset</code></a> 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.</p>

CC BY-SA 4.0
2021-02-18T10:38:57.633Z
Thanks, the issue was indeed about the retina display
DavideL
CC BY-SA 4.0
2021-02-14T23:39:12.583Z
2021-02-14T23:52:47.483Z
2021-02-14T23:52:47.483Z
Nathan Reed
<p>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...</p>
<p>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.</p>
<p>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.</p>
<p>&quot;Optimized&quot; jpg's only affect the size of the file, making it slightly smaller in size.</p>
<p>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.</p>
<p>BTW: the two images look almost identical in my browser.</p>

CC BY-SA 4.0
2021-02-14T01:58:41.020Z
2021-02-14T02:14:10.487Z
2021-02-14T02:14:10.487Z
pmw1234
<p>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.</p>
<p>I hope this is the right place to ask, I was in doubt with <a href="https://graphicdesign.stackexchange.com/">https://graphicdesign.stackexchange.com/</a>.</p>
<p>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.</p>
<p><a href="https://i.sstatic.net/BgeBR.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/BgeBR.jpg" alt="Crispy image, resized by the browser" /></a>
<a href="https://i.sstatic.net/qTZpJ.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/qTZpJ.jpg" alt="Browser resizing" /></a></p>
<p>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 <a href="https://gtmetrix.com/serve-scaled-images.html" rel="nofollow noreferrer">Serving scaled images</a> to optimise site performance. In a few words,</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>Enter Photoshop (or <code>sips</code> or any other resizing tool). I open the image, resize it to 718px width, save <strong>without optimisation</strong>, i.e. to max <code>jpg</code> 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?</p>
<p>Not quite. The image's size matches the displayed size, but the image looks blurry.
<a href="https://i.sstatic.net/kNIKR.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/kNIKR.jpg" alt="Blurry image, intrinsic width = displayed width" /></a>
<a href="https://i.sstatic.net/SO3AA.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/SO3AA.jpg" alt="enter image description here" /></a></p>
<p>What's the deal? Am I resizing with the wrong procedure? Is this about Wordpress media management with its billion of thumbnails?</p>

<transformations>
Why is browser-resized image crispy and manually-resized image blurry?
DavideL
# Why is browser-resized image crispy and manually-resized image blurry?

(Asked by: username_0 on 2021-02-06)

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](https://i.sstatic.net/BgeBR.jpg)](https://i.sstatic.net/BgeBR.jpg)
[![Browser resizing](https://i.sstatic.net/qTZpJ.jpg)](https://i.sstatic.net/qTZpJ.jpg)

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](https://gtmetrix.com/serve-scaled-images.html) 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](https://i.sstatic.net/kNIKR.jpg)](https://i.sstatic.net/kNIKR.jpg)
[![enter image description here](https://i.sstatic.net/SO3AA.jpg)](https://i.sstatic.net/SO3AA.jpg)

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

**Tags:** transformations


---

## 2 answers

### Answer by username_1 on 2021-02-14. Score: 1 | Accepted answer

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`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-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.

> **Comments:**
> **username_0**: Thanks, the issue was indeed about the retina display  

---

### Answer by username_2 on 2021-02-14. Score: 2

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.


---

