Support » Plugin: Jetpack - WP Security, Backup, Speed, & Growth » Photon is incorrectly resizing full-size images in pages

  • Resolved Dylan McCall

    (@picklesworth)


    When I enable Photon, all of the full-size images in one of my pages end up like this:

    <img class="size-full wp-image-1088" title="North Light Images" src="http://i0.wp.com/www.dylanmccall.com/wp-content/uploads/northlightimages.jpg?resize=640%2C399" alt="">

    As you can see, the image is incorrectly resized and the img tag is missing its width and height attributes (which can result in jarring layout changes when the page loads).

    When I disable Photon, these images are served correctly at their native size, and with the width and height attributes filled:

    <img class="size-full wp-image-1088" title="North Light Images" src="http://www.dylanmccall.com/wp-content/uploads/northlightimages.jpg" alt="" width="706" height="440">

    In posts, full-size images _also_ have a resize parameter in the URL, but in their case the size is correct so the image doesn’t get squished.

    Has anyone else encountered this? Any idea what’s going wrong?

    http://wordpress.org/extend/plugins/jetpack/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Contributor designsimply

    (@designsimply)

    We’ve already made some updates to fix that problem for Jetpack 2.0.1, which should be out this week.

    If you’re comfortable patching the code on your own, you can try applying this changeset to your Jetpack 2.0 plugin:
    http://plugins.trac.wordpress.org/changeset/622713

    Or you can wait and update to 2.0.1 once it has been released.

    I’ve applied the changeset (photon.php) but the header image is still resized incorrectly: http://i0.wp.com/&#8230;../files/Header_OnHover.jpg?resize=940%2C198 (correct dimensions are 980×400).
    Of course, I’ve cleared browser cache and tried direct download with wget CLI utility.

    Same here, but the problem began to show up only AFTER I updated to Jetpack v2.0.1!

    Thread Starter Dylan McCall

    (@picklesworth)

    Darn, I’m still seeing this with 2.0.2, exactly as described earlier. Is there something else I should do, or should the fix work right away?

    Plugin Contributor designsimply

    (@designsimply)

    There are still a few scenarios that aren’t covered, but we’re continuing to work on them! Custom cropped images is one area that still needs some work, and it sounds like that might be the issue you’re running in to. We should be able to get to it in the next major Photon revision we do.

    Moved my question to a new thread.

    I also have an issue here – my full size images have a 685px width. When served by photon they are all resized to 620px – I haven’t rummaged around the whole site, but I haven’t noticed it on smaller images.

    I switched off Photon and they were all 685 again…(?) Think I’ll stay switched off until we have something a bit more consistent.

    Plugin Contributor designsimply

    (@designsimply)

    @billnanson, can you link to a live example?

    Plugin Contributor designsimply

    (@designsimply)

    Let me also follow-up to clarify some things which I probably should have explained in more detail before.

    First, note that the image width and height are removed intentionally. See this related note from the Jetpack Photon help page:

    Is there any way to keep the “width” and “height” tags in the replaced HTML?
    We remove the width and height arguments to prevent your images from skewing when the resized image doesn’t have the same dimensions as the original. This is particularly important when you switch from one theme to another, and the new theme is narrower than the previous theme. One of the benefits of Photon is that it will automatically resize your images so they don’t exceed the width supported by your theme. This means, though, that we don’t know what the new dimensions are.

    Source: http://jetpack.me/support/photon/

    In posts, full-size images _also_ have a resize parameter in the URL, but in their case the size is correct so the image doesn’t get squished.

    The resize parameter is normal, Photon will always have that. It uses those instead of width and heigh attributes to make it more flexible.

    Regarding images getting squished or looking skewed, what Photon does is try to figure out what dimensions are best based on a few factors. It looks at the image width and height attributes, but it also looks at the containing element’s size or the $content_width set by the theme. Would it be possible for you to link us directly to the post or page where we can see the image you originally posted about? Also, can you check to see if your theme sets a $content_width in its functions.php file?

    Well, of-course it’s switched off now, but the ‘header’ image on this page is already sized to 685px width (basically max for the page) but with photon enabled changes to 620px – I have many similar with photon enabled.
    Good luck!!!

    http://www.burgundy-report.com/summer-2012/nuits-saint-georges-village-profile/

    Plugin Contributor designsimply

    (@designsimply)

    @billnanson, I looked at http://www.burgundy-report.com/summer-2012/nuits-saint-georges-village-profile/ and I see that the post content area is set to 700px in the CSS, and that seems wide enough to me.

    For reference, here is the HTML for the first image in the post:

    <img src="http://www.burgundy-report.com/wp/wp-content/uploads/2012/11/nuits01.jpg" alt="" title="Turn of the (20th) Century Nuits St.Georges" width="685" height="385" class="alignnone size-full wp-image-28616">

    Would you mind switching Photon back on long enough to copy the new image source and paste it in a reply here? Also, what is your theme’s $content_width set to in the functions.php file?

    I will leave it switched on for 24hrs so you can see (same URL – but it happens all-over…), but you will note the image is now resized to 620px from the 685px original:

    <img src="http://i2.wp.com/www.burgundy-report.com/wp/wp-content/uploads/2012/11/nuits01.jpg?resize=620%2C348" alt="" title="Turn of the (20th) Century Nuits St.Georges" class="alignnone size-full wp-image-28616" />

    I don’t have a content width defined in my functions.php…
    Best

    Thread Starter Dylan McCall

    (@picklesworth)

    Aha! That explains it for me. I was using a custom theme and at some point I had set my content width to 640. Changed it to 920 and that solved my problem – assuming I never try to show images larger than 920px across. Just in case, is there a way we can get Photon to ignore the content width variable?

    While I love Photon in some ways, I’m also having problems with it.

    I am using the Soliloquy Slider to display photos no my front page, here http://etchedinpixels.com/
    and Photon is messing with the image links. For some reason Photon is changing all the images to width=705. Like this:

    http://i2.wp.com/etchedinpixels.com/blog/wp-content/uploads/2012/11/Middle-Falls-68_70_HDR.jpg?w=705

    This doesn’t match up with the settings in Soliloquy, which are being overridden. 705px also doesn’t seem to correspond to the width of my page elements. There seems to be no choice but to disable Photon.

    Is there any way to disable Photon on a per-page basis? This would be really super. If anyone knows the Custom Field argument to do this I would be grateful.

    After updating today some images were shown cut off left/right or in wrong sizes (too small or in original size – too big for the post). I deactivated photon for now, but I’d love reactivate it if there was a solution to the problem.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Photon is incorrectly resizing full-size images in pages’ is closed to new replies.