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:
- The image URL.
- 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:
- 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' );
- 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!
