Reduced image quality when resizing images

[Roboonl]

Just started using your project, setup using docker was simple and easy. Awesome!

After some testing I noticed the image quality is greatly reduced when resizing it using the w parameter, even with the q parameter set to 100

Is this a known issue? I tried searching for existing issues / in your documentation but I wasn't able to find any information about it.

Please see image below, where the left one is the original. I've added no extra parameters beside w and q. TBF, the resolution of the original image is 960px*960px, in the example below the original image is scaled down using the width attribute on an <img> element. It's a JPEG image btw.

Cheers!

[kleisauke]

It's not a issue that I'm aware of. I noticed that the above images are larger than 100 pixels wide. Perhaps your zoom level within the browser is not 100% (i.e. 1:1 ratio)?

Note that I found this image on Pixabay (whose images are licensed under the Pixabay License), and that I could not reproduce this using: https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=100

[Roboonl]

I'm pretty sure my zoom level is set to default. I've setup an example on jsfiddle using the same image: https://jsfiddle.net/mgyxwp95/

Is the browser just so much better at resizing? :)

For reference I'll include a screenshot of the result as well:

[raramuridesign]

@Roboonl try removing the quality flag from the URL and see what happens. I tested this on your link

[raramuridesign]

@Roboonl just a thought, if you use the exact same code you have for the original, the image looks better.

<img src="https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg" width="300" />
<img src="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg" width="300"/>

Note the width and quality flag have been removed.

However the purpose of the w=300 flag will allow you to use the exact size. Which means the image is being processed and I guess might loose some quality, but marginal. I am not sure if at 300px vs 960px you would always get the same result, as the image from 960px is scaled down... as opposed to being rendered at 300px.

Hope this helps.

[kleisauke]

@Roboonl I still could not reproduce this.

I suspect this is due to the zoom level of your browser/OS, causing all images to be scaled up. The first images should be 70 pixels wide, but both images are 140 pixels wide on the screenshot you provided (i.e. 200%, 2:1 ratio).

[kleisauke]

Note that for the <img> tag, you could use the srcset attribute in combination with the x descriptor and our &dpr= parameter.

For example:

@@ -2,10 +2,13 @@
 70px
 </h3>
 <img src="https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg" width="70" />
-<img src="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=70&q=100" />
-
+<img
+  src="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=70"
+  srcset="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=70&dpr=2 2x" />
 <h3>
 300px
 </h3>
 <img src="https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg" width="300" />
-<img src="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=300&q=100" />
+<img
+  src="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=300"
+  srcset="https://wsrv.nl/?url=https://cdn.pixabay.com/photo/2014/10/24/22/37/plane-501873_960_720.jpg&w=300&dpr=2 2x" />

For a device pixel ratio of 2, the image with that &dpr=2 parameter is used. I deliberately removed the &q=100 parameter because the standard quality of 80 usually produces good results.

[Roboonl]

Err my bad, I just checked on a lower res screen and the srcset seems to have fixed the issue. Thanks a million @kleisauke !