Support » Plugin: Jetpack by WordPress.com » Photon: image width/height

  • Resolved wpweaver

    (@wpweaver)


    I’ve had Photo activated for quite a while.
    I have a widget with 3 images that have been serving from the Photon site for quite some time. I have not touched or changed the source or configuration for some time.

    Then “all of a sudden” (really, I didn’t change anything), the images have apparently been regenerated on the Photo server with new sizes.

    Normally, the height and width are only “suggestions” to any browser I’ve ever used, but are used to determine aspect ration. So out of convenience, I often have images with width=16 height=9 to serve 16:9 images. This is what was on my link to some images in a sidebar with simple, direct html – not generated by the Media Library, but stored in the library.

    As I said, these images have been serving just great from Photon for some time. But I today noticed that for whatever reason, these images have apparent been re-generated in Photo, and were being served at a literal 16px by 9px.

    My only explanation is that there was some new “optimization” to the Photon handler, and images were re-generated using the literal height/width values. This is a pretty radical change if so, and if true will likely have broken lots and lots of sites.

    I had to fix the problem by reloading images with new names since the user can’t force Photon to reload the cache (bad feature, IMHO).

    Is this true – Photon now generated the cached image using the height/width and not the actual image? Why change something that will break sites that use non-standard but functional variants of height/width?

Viewing 1 replies (of 1 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    We’ve indeed made a few changes in the last Jetpack release; until then, Photon would only be used in your posts and pages, as well as with the images loaded via your theme. Text and Image widgets, however, did not rely on Photon.

    Since Jetpack 4.7, if the Photon module is active, it looks at the content of your text and image widgets, searches for image tags, and serves the images it finds via Photon.

    To build a Photon image, the module looks at different things. The 2 things that interest us here are:

    1. The image URL.
    2. The width and height parameters available in the image tag.

    It uses that data to serve an image that matches just what the widget needs.

    Let’s take an example:

    • Before Jetpack 4.7, you may have had an image tag that looked like that in one of your text widgets: <img src="https://d2svke4rezsrcy.cloudfront.net/wp-content/uploads/2015/10/04084309/jpa001.jpg" width="257" height="170" />. The image was nicely displayed, but in practice, every time one of your readers was accessing your site they had to load a huge image (2570x1700px in our example, 1.3Mb) that was then resized with CSS to fit the dimensions specified in the width and height parameters. That’s pretty bad for a site’s performance.
    • Since Jetpack 4.7, that same image tag is transformed into the following: <img src="https://i0.wp.com/d2svke4rezsrcy.cloudfront.net/wp-content/uploads/2015/10/04084309/jpa001.jpg?resize=257,170" width="257" height="170" />. It looks the same on the page, but we’re now loading an image that’s a lot smaller (257x170px, 3.4Kb), and loads a lot faster.

    This works out quite well for almost everyone. And since the image uses Photon, it means we’ll serve larger images on Retina / HiDPi devices, so everyone gets the image they need.

    Unfortunately, and as you mentioned, you’re using custom width and height parameters. Photon doesn’t know that, and generates image tags that match the given parameters. That’s a problem.

    Unfortunately, we don’t really have a way to detect when width and height parameters are in fact not meant to be used as width and height parameters for an image.

    There are 2 ways around this:

    1. Stop Photon from doing anything with your Text widgets. To do so, you can paste the following in your theme’s functions.php file, or in a functionality plugin:
      
      /**
       * Force all Text Widgets not to use Jetpack's Photon module.          
       */
      function jeherve_rm_photon_text_widgets() {
              remove_filter( 'widget_text', 'jetpack_photon_support_text_widgets' );
      }
      add_action( 'init', 'jeherve_rm_photon_text_widgets' );
      
    2. Change the width and height parameters used in your widgets’ image tags to use real values.

    I hope this clarifies things a bit! Sorry for the inconvenience!

Viewing 1 replies (of 1 total)
  • The topic ‘Photon: image width/height’ is closed to new replies.