Blurry images on big screen

[jbelien]

I'm not sure what is the exact reason of this effect but on my (big) screen, all images are blurry (despite the original size of the image).

On the following example, the original image is 1173px × 683px and is resized 800px × 466px on the website.
I think that the resized image is not big enough and that's why the image is blurry but making it bigger will impact the load time.

[auloin]

The image is still in 1173px x 683px.

The resizing is via css using object-fit: cover which keeps the original aspect ratio while filling the container. But it's compressed using webp.

What's the result if you view the image in a new tab and compare it with the image stored in the repo?

[jbelien]

Here is the link of the image : https://okbe-website.netlify.app/static/b07b7a5cc50ddb9752f13fd812f5536d/bc8e0/equalstreetnames.brussels.png

It is indeed resized to 800px × 466px.

EDIT: But the "full size" version seems to also be available : https://okbe-website.netlify.app/static/b07b7a5cc50ddb9752f13fd812f5536d/525fc/equalstreetnames.brussels.png

Why isn't that one displayed ?

[auloin]

Which browser are you using?
I'm getting this image https://okbe-website.netlify.app/static/b07b7a5cc50ddb9752f13fd812f5536d/fa858/equalstreetnames.brussels.webp

Also do you have the same issue with other activity pages?

[jbelien]

Screenshot is from Mozilla Firefox 83.0 but it happens on Google Chrome and Microsoft Edge as well.

Might be due to the size/resolution of the screen (2256px × 1504px) ?

[auloin]

gatsby-image allows the browser to pick the image, I'm looking at the configuration of the sizes attribute.

[auloin]

I can't figure it out. When I look into the network tab, only the image in the original size is loaded and I'm seeing all the images in the same quality. Whether its the one on github (not formatted) or the one loaded on the website... Tested on mobile and getting the same result.