Tiled Gallery shows low quality image size

This is not actually problem of Jetpack but of the size images you are uploading, which are too small for a full-width page template.

Images are being slotted into display areas well beyond 900 pixels wide and being displayed/stretched to 100% within those containers.

On my 1920 pixel wide monitor image IMG_9317.jpg (1000 px wide) is being stretched to 1200 px – so it ends up looking blurry

WordPress actually delivers and displays different size versions of each photo depending on screen width. The 600 pixel versions are for smaller screen width. If you right click an image in Chrome and select Inspect you will see the following code for the image.

<img srcset="https://i2.wp.com/jgoldsteinarchitect.com/newsite/wp-content/uploads/2020/12/IMG_9317.jpg?strip=info&w=600&ssl=1 600w,https://i2.wp.com/jgoldsteinarchitect.com/newsite/wp-content/uploads/2020/12/IMG_9317.jpg?strip=info&w=667&ssl=1 667w" alt="" data-height="667" data-id="569" data-link="https://jgoldsteinarchitect.com/newsite/projects/acadia-view-house/img_9317/" data-url="https://jgoldsteinarchitect.com/newsite/wp-content/uploads/2020/12/IMG_9317.jpg" data-width="1000" src="https://i2.wp.com/jgoldsteinarchitect.com/newsite/wp-content/uploads/2020/12/IMG_9317.jpg?ssl=1" layout="responsive">

srcset= are the smaller versions and src= is the full size, which will display if the area is big enough. As mentioned your problem is the image at 1000 px wide is too small for the 1200 display area on a big screen)

Solutions:
1. change the page template you are using just for that page or for the whole website – not full width as you currently have. In page edit – right side – under Page Attributes try out different Templates you may have with your theme.

or

2. Change the max width of the tiled gallery via css

.wp-block-jetpack-tiled-gallery {
    max-width: 1200px;
}

or

3. They are lovely photos – upload 2000px wide (or more) versions of all – let WordPress deliver the size accordingly via srcset= as it does. Turn on “Display images in a full-screen carousel gallery” in Jetpack settings/Writing/Media and give your viewers the opportunity to click on them for full screen carousel gallery viewing. This would be my preference.

While most internet viewing is on mobile devices where the issue you mentioned won’t really be a problem, be aware people are buying 4k monitors for desktops now so the full width template blurry image thing will be far more pronounced than what is seen on a 1920×1080 monitor. With that in mind I suggest you still define a max-width for the tiled gallery.

• This reply was modified 3 years, 11 months ago by NightL.

Thank you for your reply! I understand that the image is being stretched, since the container is larger than the image, but I am not sure I understand why a 600px or 667px wide version is being used when I have uploaded 900-1000px for every image. I want to keep the full width design, so switching templates it not a good solution for this website. I could upload all of the images again, much wider (though there are always at least two columns in this design, so I would not need to go as far as 2000px wide, maybe 1500px) but the problem is I am not convinced that these larger versions will even be displayed. Jetpack is not choosing the best available size to display if it is choosing 600px when I have 1000px available.

For example, see this page https://jgoldsteinarchitect.com/newsite/projects/duplex-gut-renovation/ – the first big image is uploaded at 1000px wide, but the 750px version is displayed, stretched to 1316px when I have my browser at full width (1976px on my desktop).

OK I see what you are saying – but I note that since you changed the first image, at a larger size, for acadia-view-house it is pulling in correctly.

If display areas/divs on a standard desktop monitor are being displayed at over 1300px wide why are you loading up at 900 – 1000? Even if it pulled in the 1000w image it would display blurry for being stretched.

I don’t know why it is not choosing the best option – but the 900 – 1000 options available are way off mark anyway.

You will go through all this issue again with the 4k monitors when using full width templates – that is why I always put a css max-width on the containing div

Thanks. I will upload the photos larger (I have a whole bunch of other pages with the same issue) and probably put a max-width on the whole site. Unfortunately, there are a lot of cases where I don’t have higher resolution photos to upload, as I’m redesigning an old website that had a fixed width, and in some cases those are the only photos that can be found, of certain projects. That’s why it’s frustrating that Jetpack will not choose the highest resolution available where appropriate. It seems like a bug.

Hi @rachelgoldstein71

It may be a problem here with the browser trying to display a lower resolution image on a HiDPI screen.

Some themes may also select smaller image sizes than they could and a recommended step here would be to increase the size of the image thumbnails on your site in the Media Settings page (Settings > Media). This should hopefully help, do let us know what you find with your troubleshooting here though.

The thing is, the sizes being selected don’t correspond at all with any settings on my Media Settings page. It doesn’t seem to matter which browser I use. I have adjusted most of the layouts now to try to avoid this issue, but I still would like to find a solution so I can display large photos in a full width layout and have the best image available to be displayed.
Thanks.

This may be an issue with the way your theme declares the content area, similar to this issue:
https://github.com/Automattic/jetpack/issues/7291

You can confirm that by temporarily switching themes to see if that resolves the issue.

There’s a larger discussion around this here:
https://github.com/Automattic/jetpack/issues/4175

If that’s the case, can you try something like this?
https://github.com/Automattic/jetpack/issues/4175#issuecomment-227282032