Carousel: poor image rendition

even though my photos would EASILY fit into the browser window, Carousel resizes some images by a very small amount, rendering them rather mushy, soft and unattractive.

I had a look at your site, but once my browser is larger than your original image the image stops being resized on my end.

Would you mind using your browser inspector to try to find out more about what happens on your end? If you inspect the image when looking at the Carousel view, what’s the image being used? On my end, it seems to use the original image, but I would like to know if there are any other parameters added on your end:
https://i.wpne.ws/YFHL

Thanks!

Hello Jeremy,

thanks for looking into this. I used the browser inspector. I should have done that yesterday, because the image I looked at when posting yesterday looks fine today – this is driving me nuts! ??

I had a look at the NEXT image in the gallery however, and I noticed the same softness:
https://www.alex-kunz.com/portfolio/dunes/#jp-carousel-6552 (= https://www.alex-kunz.com/portfolio/dunes/sands-of-time/)

Upon inspecting the element, I see a parameter in the URL that actually causes UPSIZING of the image, from it’s native 534×800 to 535×802 pixels in my case. No wonder the result looks bad. When I manually remove the URL parameter, I get the nice and crisp image that I expect.

This is the code that I see for the image linked above:

<img src="https://i1.wp.com/www.alex-kunz.com/wp-content/uploads/2014/09/Sands-of-Time_20140907-DSC_4353.jpg?resize=535%2C802" style="width: 100%; height: 100%;">

Hope it helps…
Alex.

I see a parameter in the URL that actually causes UPSIZING of the image, from it’s native 534×800 to 535×802 pixels in my case. No wonder the result looks bad. When I manually remove the URL parameter, I get the nice and crisp image that I expect.

Could you make a screenshot of what you see, with the opened browser inspector? I don’t get the upsize on my end (most likely because my laptop’s screen resolution is different from yours.

You can use https://snag.gy/ to post your screenshot here.

I added the screenshot to the Dropbox folder above:
https://www.dropbox.com/s/t18eq8f3g1pp0d9/scrn4-inspector.jpg?dl=0

That’s interesting. I see it too now. Chrome itself seems to think the image is 535×802 pixels. I only see the correct size when downloading the image and viewing it on my laptop:

https://i.wpne.ws/YFHX
https://i.wpne.ws/YFZK

Did you use an image editor to change the image size before to upload it to your site?
If so, could you try to upload a new image, that wasn’t edited, and see if you experience similar issues?

Let me know how it goes.

I only upload low-resolution files. Like all other images on the site, I exported the image from Adobe Lightroom and then uploaded it to the site via WP’s Media Library. The attachment metadata in den Media Library shows the size as 534×800, which is the export size (800 pixels on the long side) that I’m using for web uploads.

Could it be that this resize-parameter in the URL is somehow passed on/inherited from the Tiled Gallery thumbnail grid? I’m seeing the exact same resize thing in the thumbnail grid when I use the browser inspector:

https://www.dropbox.com/s/ogd1u3cbokyn5ya/Screenshot%202014-10-28%2014.32.09.png?dl=0

What exactly do you want me to try?

Alexander.

Could it be that this resize-parameter in the URL is somehow passed on/inherited from the Tiled Gallery thumbnail grid?

It could be, yes. I’ll ask one of our developers to take a look, and I’ll get back to you as soon as we understand the issue.

Thanks!

Any news on this one?

Thanks!

Nothing yet, I’m afraid. I’ve asked our developer in charge of Carousel for some news, and I’ll let you know as soon as I have something.

My site is still suffering from this. ??

I’ve published a post with a pano just now, and because it’s a pano I added the image as a gallery to the post so that people can view it larger (the upload size is 1500 pixels on the long side).

This is the post: https://www.alex-kunz.com/2015/08/sycamore-stand/

I’m using a 24″ screen with a resolution of 1920×1200 and my browser window is about 1400×1100 usually. My observations:

• open the image in Carousel – horrible quality (soft, as if the image is simply scaled up from the Tiled Gallery “thumbnail”)
• switch browser to fullscreen – quality remains horrible, ie. Carousel does NOT reload the image to match the higher resolution
• close Carousel, THEN switch browser to fullscreen
• open the image in Carousel – tadaaaa, it looks good!

So it appears that Carousel does NOT render/reload the image to fit the resolution (better).

This REALLY bugs me, Jeremy – if the wrong circumstances come together then images really look piss poor. How does PhotoMatt cope with that? ??

Thanks
Alexander.

It’s still a problem, and we haven’t found a solution yet.

Could you try to deactivate the Photon module for a few minutes, and let me know if it helps? I believe this could be a conflict between Photon and Carousel.

Let me know how it goes.

Hello Jeremy,

I deactivated Photon and it indeed helps. When I open the image from the above post to view it with Carousel the blurry version appears first, but is quickly replaced by a proper rendition of the photo.

Thanks for your help
Alexander.

Thanks! That confirms my suspicions. I believe Photon serves the wrong image size in some specific browser sizes.

Could you try the following:

1. Access your site via FTP, and locate the following file: /modules/carousel/jetpack-carousel.js
2. Replace that file by this one: https://i.wpne.ws/cCIS

Then reactivate Photon, and let me know if it helps.

Hello Jeremy,

I replaced the file like you told me, but it doesn’t help. I purged the server-side cache and tried with three different browsers locally to make sure it’s not a caching issue.

I’ve deactivated Photon again for the moment.

Thanks for your help
Alex.

Thanks for giving it a try. We’ll keep looking into this. I’ll let you know as soon as I have some news.