Jetpack: Tiled Galleries: Blurry images on the carousel

[happychait]

Images on the gallery carousel are being stretched, losing clarity and becoming blurry.

Steps to reproduce the issue

Click on a gallery image, so it opens on the carousel.

What I expected

Clear images with the same clarity as they were on the gallery.

What happened instead

Images on the gallery carousel are being stretched, losing clarity and becoming blurry.

Example sites:
https://saramakdessi.com/illustrations/
https://hfxart.com/

Chats and tickets: 215297-hc 3100136-t 233958-chat 233966-chat

Possibly related to p1489076574206964-slack-triage

[georgestephanis]

I think I've fixed it wpcom-side with r152553-wpcom

I believe the cause of this traces back to https://github.com/Automattic/jetpack/pull/3680

[withinboredom]

@georgestephanis

This looks like an issue with image sizes, actually:

Current img tag example with irrelevant parts stripped and original url removed:

<img
data-orig-file="img.jpg" 
data-orig-size="2048,1365"
data-medium-file="img.jpg?w=300" 
data-large-file="img.jpg?w=1000"
src="https://i1.wp.com/img.jpg?w=524&h=349&crop&ssl=1"
width="524"
height="349" 
data-original-width="524"
data-original-height="349"
itemprop="http://schema.org/image"
style="width: 162px; height: 107px;"
srcset="https://i1.wp.com/img.jpg?w=524&h=349&crop&ssl=1&zoom=2 2x"
scale="2">

All the attributes look correct except data-medium-file and data-large-file, which are lacking the height and crop information. When the size of the viewport is small enough, the image is replaced with an image that is not cropped to size, therefore looking squashed and out of proportion.

[jeherve]

@chaitanyamsv Could you confirm that this is now fixed on WordPress.com, like in your example?

[georgestephanis]

@withinboredom The missing h and crop shouldn't be a problem, as Photon should just scale to the respective width and let the height match the original ratio.

[withinboredom]

Without the crop, here's some examples:

Without the h and crop:

This would look distorted in a square aspect ratio.

With the h and crop:

If you look carefully, data-medium-file and data-large-file aren't going through Photon as well.

[adennisphoto]

Hello all, I have no coding experience, just using the Sketch theme from Wordpress so relying on the theme to be corrected to sort this pixelated issue... Has anyone had any new revelations or can suggest another sophisticated way of showing photos in Sketch that does a similar thing without rendering my photos pixelated?

Many thanks

www.angela-dennis.com

[jeherve]

@adennisphoto We haven't made any progress on this just yet, but we'll update this issue when we do!

[cecoates]

I've got another report of the same thing:

https://michaelglancyglassworks.com/work/

This one also using the tiled gallery, but "square tiles".

321013-chat

[ryanmarkel]

I (apparently) ran into this problem today; this gallery is forced to using 700px-wide images in the carousel, and as a result, the carousel images look really bad even though there is a very high-res original available:

https://ryanmarkel.com/84139/destiny-2-month-one-gallery/

Access to the site is available upon request. :)

[liviopv]

Reported in #1336286-hc as well using the Sketch theme

[KZeni]

I'm not sure if we have exactly the same issue, but I was able to resolve this problem for myself with the following added to my functions.php file:

// Tell Jetpack that image galleries and the content width should be considered larger (make it so images within image galleries don't get shown too small [what tiled_gallery_content_width controls] as well as making sure the sizes="(max-width:***)" doesn't pull a size smaller than desired [what jetpack_content_width controls])
function jetpack_overwrite_image_width() {
    return 1920;
}
add_filter( 'tiled_gallery_content_width', 'jetpack_overwrite_image_width' );
add_filter( 'jetpack_content_width', 'jetpack_overwrite_image_width' );

This removed the sizes code from the tag and other aspects within Jetpack's internals which had Photon serving up the incorrect size.

[nellofn]

A user reported this issue on their site using the Soho theme. It seems that the issue is present on these two blog posts:

(Purple flower)
https://esthergeerlingsphotography.com/2017/06/27/flowers/

(Imagine picture)
https://esthergeerlingsphotography.com/2016/08/02/nyc/

I'm curious that on both posts the affected image reported by the user is the first one, but it could be any image, I just can't tell whether it looks blurry or not.

Reported in: #1488255-hc
Follow up ticket: #890817-zen

[vparkhere]

Reported here
Theme: Twenty Fifteen

963651-zen

[joeboydston]

Another report in #1293358-zen
Theme: hemingway-rewritten

[donalirl]

Also reported in #446376-hc on the theme Blask

[tijosh]

Also reported in #1639059-zen
Theme: Canape

[coder-karen]

Potentially related: #1723608-zen (Jetpack site) using Blaskan theme

[StefMattana]

I believe Karen's ticket at #1723608-zen is indeed affected by this bug: they have the same problem even if switching to a default theme :(
I suggested the user a workaround to resize and reupload the images, and let's see how it goes.

[GeoJunkie]

Also happening in 1924944-zen on the Dara theme.

For this one, it's only happening on older images (the two most recent are showing sharp, but the earlier images show sharp initially, but then get blurry). There may be varying effects, though as some saw the opposite (reference p1554133194209400-slack-C03TY6J1A for details).

[erricgunawan]

User in 1924944-zen is back and saying that they don't have the blurry issue anymore.

Although they're not really sure if they had anything to do with it.

They just add one new image to the media library and to the gallery, but didn't adjust anything in the existing galleries.

[dericleeyy]

1954009-zen

Any updates on when the fix for this will be implemented?

[jeherve]

@dericleeyy No updates, no. This issue will be updated once someone starts working on it. For now, we don't have an ETA for a fix.

[cecilearkay]

I have the opposite issue with my user. The images are crisp when opened in the carousel but in the gallery they are blurry. Would it be related?

This is the gallery pic: https://clairecime.files.wordpress.com/2019/05/aperccca7u-expo-aufi.png?w=1478 (blurry)
This is the carousel pic: https://clairecime.files.wordpress.com/2019/05/aperccca7u-expo-aufi.png?w=1153&h=&zoom=2 (crisp)

[jeherve]

@cecilearkay This is most likely not related, no. WordPress.com uses its own custom solution to handle image resizing, and does not rely on Photon (used on Jetpack sites).

I would recommend opening a ticket on wpcom.trac for your issue.

[damiannep]

User reported this issue also in #5822729-hc. They would like to know when the issue is resolved.

[happychait]

Another report in #12938692-hc

[pjtfernandes]

Hi, I am also experiencing this issue on my page.
https://www.blushingbride.co.za/weddingdresses/a-line/caitlin/

[KZeni]

Is this a matter of a bug/shortcoming in the themes being used (since they could/should use what I proposed at https://github.com/Automattic/jetpack/issues/6625#issuecomment-354378034 to accommodate Jetpack's Photon functionality) rather than being an issue with Jetpack itself? Or is this actually a bug/issue that Jetpack itself should look to avoid? I'm thinking it's honestly the former since Jetpack's currently intentionally grabbing $content_width for this max image size and has hooks to overwrite this behavior as needed (per my comment above & what I linked to here). What more would you expect Jetpack to do/provide?

It seems like Jetpack has made a decision on how this acts & it's acting as expected (not an issue/bug with Jetpack). This thread seems to be people reporting problems with the themes they're using not playing nicely with Jetpack (unless something regarding how Jetpack intends to handle this ends up changing.)

I'm thinking people should be reporting this problem to their theme developer instead of here.

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[lancewillett]

Closing due to inactivity.