Image Resize, Crop, and Rotation Problems with Photon

  • packingforseven

    (@packingforseven)


    7 years, 5 months ago

    Hi,

    I’m experiencing a number of bugs with photon for jetpack. They are:

    1) Some photos that display in the correct orientation on my site when jetpack is not enabled do not display in the correct orientation when jetpack is enabled. I believe this has to do with an EXIF rotation-related bug. I can work around this issue by “cleaning” my JPEGs before uploading. (I hadn’t been… but since my site is new this isn’t much of a problem).

    2) Jetpack’s override of WordPress’ default cropping is a real problem. I have WordPress setup (using the add_image_resize() function, as per https://developer.wordpress.org/reference/functions/add_image_size/) to crop my images “top, center” — I often add text on my images and a “center, center” crop just doesn’t work for me. Why can’t photon just cache the thumbnails I’m already serving? Or at least start with those thumbnails when regenerating differently-sized images. WordPress is cropping them them cropped.

    3) This last issue is a little harder. My theme resizes images to fit 100% on the page if they are at least as large as the page and they are not aligned to either the left or right (they are “aligned none” when I insert them). For some reason Photon is serving up an image cropped to 768pixels wide, when my available space on the page is larger than this. I cannot figure out why this is happening but when I disable photon, the pictures served up are full-size.

    It’s also worth noting that one of the reasons I upload oversized images is so that they will look even better on retina laptop displays. Apparently photon doesn’t respect retina-readiness when it comes to images, preferring to crop the image to exactly the size in pixels it thinks should be displayed.

    I’m going to keep plugging away because I certainly think the concept of a low-cost way to distribute image serving is a great idea… but this is definitely lacking from where it needs to be to be really good.

    You can see my page at http://www.packingforseven.com – but for now I have photon disabled because it’s screwing up too many displays.

    Thanks for all your hard work on the plugin though. Don’t mean to sound ungrateful. WordPress is amazing and I really do enjoy the other features of Jetpack.

    Fred

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter packingforseven

    (@packingforseven)

    7 years, 5 months ago

    UPDATE:

    On #3, I seem to have figured out how to fix this by changing some code in my theme. Jetpack is now selecting a better image to serve that correctly fills the page.

    On #2, the cropping issue is kind of a big deal and I’m not thinking I’m going to find an easy way around this. One solution in the interim would be to enable an option so that photon simply didn’t serve up thumbnail images and instead left that to the server itself. Unfortunately, without such an option I’m kind of at a loss.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    7 years, 5 months ago

    Thanks for getting in touch!

    Some photos that display in the correct orientation on my site when jetpack is not enabled do not display in the correct orientation when jetpack is enabled.

    Do you have some examples we could share, so we can see if we can handle this better from our end? It could be that orientation is not stored in a standard way in your image’s EXIF, but we might be able to work around that.

    Jetpack’s override of WordPress’ default cropping is a real problem. Why can’t photon just cache the thumbnails I’m already serving?

    We’ve opted to always start from the original image as the additional thumbnails don’t always exist in the size Photon needs.

    That said, you could customize the way Photon crops specific thumbnails by following the instructions here:
    https://jetpack.com/2013/07/17/use-photon-to-serve-post-thumbnails-with-custom/

    For some reason Photon is serving up an image cropped to 768pixels wide, when my available space on the page is larger than this. I cannot figure out why this is happening but when I disable photon, the pictures served up are full-size.

    Photon uses your theme’s $content_width value by default. We realize it’s not always ideal, and are currently discussing other options in this GitHub issue:
    https://github.com/Automattic/jetpack/issues/4175

    Apparently photon doesn’t respect retina-readiness when it comes to images, preferring to crop the image to exactly the size in pixels it thinks should be displayed.

    The size will change depending on the device, so you should be okay there. This is covered by the zoom parameter:
    https://developer.wordpress.com/docs/photon/api/#zoom

    I hope this clarifies a few things!

    Thread Starter packingforseven

    (@packingforseven)

    7 years, 5 months ago

    OK. I’ve taken two screenshots that demonstrate the problem and uploaded them to my site. The screenshots are from the following page:

    http://www.packingforseven.com/bird-kingdom-niagara-falls-canada/

    Around the middle of the page there is a picture of a bat. That picture should be landscape orientation. Here’s a screenshot of that section of the page with photon disabled:

    http://www.packingforseven.com/wp-content/uploads/2016/11/bat-cage-exhibit-correct-jetpack-disabled.jpg

    Here’s a screenshot with photon enabled: (Note, I cropped it short because my theme blows up a portrait picture very big…) You can see that the picture has been rotated from landscape to portrait.

    http://www.packingforseven.com/wp-content/uploads/2016/11/bat-cage-exhibit-incorrect-jetpack-enabled.jpg

    And here’s the actual, original picture file, which you can examine to see if there is strange EXIF properties.

    http://www.packingforseven.com/wp-content/uploads/2016/10/bat-exhibit.jpg

    I am taking this photo with a Samsung S5 phone. Then I am rotating it using Jasc Paint Shop Pro v. 8.10 (an admittedly older photo editor, but it’s served me well for my simple blogging needs).

    It’s worth noting that Windows 10 ALSO thinks that the bat picture is incorrectly rotated. (Jasc PSP 8.10 shows it rotated, but windows doesn’t).

    But for some reason Chrome knows how to display it properly when it is loaded directly from my page – but after processing by Jetpack, Chrome no longer loads it properly and shows it rotated. Like I said, I have found a workaround for this issue by just processing the image differently on my end, but it might be nice if Photon was able to handle this anomaly and actually repair the issue!

    I am looking forward to examining the link you provided for custom cropping with Jetpack. I am very excited that this might work for me!

    Fred

    Thread Starter packingforseven

    (@packingforseven)

    7 years, 5 months ago

    Oh Man! I just noticed something even WEIRDER.

    When PHoton is DISABLED, the picture looks fine in the post in which it is inserted, BUT if you load the picture directly in Chrome (by clicking the link above) it shows up Portrait, which is incorrect. I have no idea why Chrome is correctly displaying it IN the post, but when the picture is opened on its own, it is rotated incorrectly!

    You can see this behavior by looking directly on this page (around 1/3 of the way down)

    http://www.packingforseven.com/bird-kingdom-niagara-falls-canada/

    And then right-clicking the picture of the bat and hitting “open image in new tab”. On the new tab it will be displayed incorrectly — in portrait!

    I’m fascinated.

    I’m sorry that I’m not more help than this… I know a decent amount of code but web programming isn’t my forte – I’m still learning and it is mostly a hobby. Maybe you’ll look at this and see why it’s doing it immediately.

    Fred

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    7 years, 5 months ago

    That’s interesting!

    Image orientation is not an easy thing to handle, as there are different ways to store that information in images, and different places where that data can be read and used:

    • In WordPress when uploading the image, resizing it, and adding it your library while creating meta data (your server and its configuration also have an impact here, as different image processors have different ways of reading that data.)
    • In your browser, whichever one you’re using.
    • In Image CDNs like Jetpack’s Photon module
    • In your camera.
    • In your image editor.

    To understand what’s causing the issue, we would need to narrow things down a bit. As a start, could you avoid editing one of your images with Jasc Paint Shop, and upload it to your blog as is? What happens then?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image Resize, Crop, and Rotation Problems with Photon’ is closed to new replies.