Enhancement: Site Accelerator ignores custom image size from Elementor

[danjjohnson]

Impacted plugin

Jetpack

What

Make site accelerator respect the custom image size set in Elementor

How

With Site Accelerator (Speed up image load times) disabled:

• Create a new page with Elementor and add an image with a custom size:

• View the page. The image is shown at the specified size:

• Now enable image "Speed up image load times" and view the page again. The image is not shown at the custom size:

Reported in https://wordpress.org/support/topic/image-rendering-3/

[jeherve]

By any chance, would you know what the HTML markup of the image looks like:

• in the editor
• on the frontend without Photon
• on the frontend with Photon

[danjjohnson]

Editor:

<img src="https://danielj18.sg-host.com/wp-content/uploads/elementor/thumbs/Desert-blue-p5y8y4mok1x4apla9gyekm61i35xer4fs9z0v5ar54.jpg" title="Desert-blue" alt="Desert-blue">

Frontend without Photon:

Same:

Frontend with Photon:

<img src="https://i2.wp.com/danielj18.sg-host.com/wp-content/uploads/2021/04/Desert-blue.jpg?fit=500%2C100&amp;ssl=1" title="Desert-blue" alt="Desert-blue">

[jeherve]

Thanks for the extra details. This seems to stem from the use of fit instead of resize in the query strings added by Photon. As far as I can tell, the fit parameter is added instead of resize because the custom size chosen does not match the thumbnail size option set in Settings > Media.

@danjjohnson Do you think you could try to add something like this to your test site, and let me know if that helps?

/**
 * Force images to use a resize parameter instead of fit,
 * when they are of a specific size (500x100).
 *
 * @param array $args Array of Photon Arguments.
 * @param array $details {
 *     Array of image details.
 *
 *     @type string    $tag            Image tag (Image HTML output).
 *     @type string    $src            Image URL.
 *     @type string    $src_orig       Original Image URL.
 *     @type int|false $width          Image width.
 *     @type int|false $height         Image height.
 *     @type int|false $width_orig     Original image width before constrained by content_width.
 *     @type int|false $height_orig    Original Image height before constrained by content_width.
 *     @type string    $transform      Transform.
 *     @type string    $transform_orig Original transform before constrained by content_width.
 * }
 */
function jeherve_force_photon_resize_on_size( $args, $image_details ) {
	if (
		isset( $args['fit'] )
		&& ( 500 === $image_details['width'] && 100 === $image_details['height'] )
	) {
		unset( $args['fit'] );
		$args['resize'] = $image_details['width'] . ',' . $image_details['height'];
	}

	return $args;
}
add_filter( 'jetpack_photon_post_image_args', 'jeherve_force_photon_resize_on_size', 10, 2 );

[danjjohnson]

I added that using the Code Snippets plugin:

But it still uses the 'fit' parameter:

I tried clearing cache, deactivating/reactivating Photon, and using a different image, but no change.

[jeherve]

Thanks for giving this a try!

I've created this patch to fix the issue in Elementor directly:
elementor/elementor#17181