Enhancement: Site Accelerator ignores custom image size from Elementor

danjjohnson commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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&ssl=1" title="Desert-blue" alt="Desert-blue">

jeherve commented 2 years ago

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 commented 2 years ago

I added that using the Code Snippets plugin: