Resize images to rendered dimensions

Benefits

This attempts to resize any image to its rendered dimensions on the web page. Unlike resize_images it ignores any width and height attributes specified for the image. If the same image appears more than once on the page it is resized to the biggest rendered dimensions of the image. Similar to resize_images, the original image is replaced only if the image file is smaller after resizing. Image resizing is lossy by nature, regardless of image file format.

Note: It also strips color profiles and metadata even if strip_image_color_profile and strip_image_meta_data are disabled.

By default resize_rendered_image_dimensions injects JavaScript that uses a beacon to report back the rendered dimensions of all the images. It takes a few accesses of a page for the data to be reported back and processed but eventually the rendered dimensions for all the images will be known and will be used for resizing the images.

The use of beacons can be disabled using the CriticalImagesBeaconEnabled directive. If they are disabled, resize_rendered_image_dimensions will not apply.

Note: If both resize_rendered_image_dimensions and resize_images are enabled then resize_rendered_image_dimensions takes precedence.

Configuration

Enable pagespeed EnableFilters resize_rendered_image_dimensions
Disable pagespeed DisableFilters resize_rendered_image_dimensions

Risk Classification

Unclassified

Example

soon available