Image transformation
The VIP File System performs core image processing with a built-in service similar to Photon. Many of the same filter parameters as Photon can be applied to an image for resizing, cropping, and processing successive transformation functions.
To dynamically resize an image, add width (w=
) or height (h=
) parameters to an image’s source URL. For example:https://docs.wpvip.com/wp-content/uploads/sites/2/2021/02/VIP-Team-2020.jpg?w=600
Multiple parameters can be applied to a single image URL. In this example crop
is applied, followed by a resize
function, and then a filter
at the end:https://docs.wpvip.com/wp-content/uploads/sites/2/2021/02/VIP-Team-2020.jpg?w=800&crop=100px,60px,450px,400px&resize=200,200&filter=sepia
This image transformation method allows a theme or plugin to load a modified image from the site’s /uploads/
directory. Requests for images with newly modified parameters are processed and served at the time of the request, and then cached on the VIP Platform edge cache servers. Cropping, resizing, and other effects can be applied to source images without having to process those effects on all source images in advance.
Limitations
- Transformation functions can only be applied to image files in a site’s /uploads/ directory.
- If the size of an image is not specified, VIP will default to:
- The value of
content-width
if defined by a site’s theme. - If
content-width
is not defined by the theme, the default width will be set to1024
.
- The value of
- The default logic for image size output is defined by the
image_resize()
function in VIP MU plugins.
Override default settings
The default parameters applied to images can be overridden with the vip_go_image_resize_pre_args
filter. The filter should be added to a plugin in client-mu-plugins/
so that it loads as early as possible, but the filter can also be located in plugins/
or themes/
.
This code example demonstrates how to override the default quality
parameter value (which for JPEGs is 89%, PNGs 80%, and WebP images is 80%) with 75
(75%):
function my_image_quality_filter( $args ) {
$args['quality'] = 75;
return $args;
}
add_filter( 'vip_go_image_resize_pre_args', 'my_image_quality_filter', 999 );
Jetpack Photon’s default settings
By default, all images loaded from paths within wp-content/uploads/
on the VIP Platform will utilize the VIP File System’s image transformation service to perform core image processing and leverage the VIP Platform’s CDN.
While not recommended, sites can leverage Photon, Jetpack’s image transformation service with the WordPress.com CDN infrastructure. If Photon is enabled, a site’s images with be loaded from the i0.wp.com
domain instead of the site’s domain.
Configure a site on the VIP Platform to transform images with Photon by defining WPCOM_VIP_USE_JETPACK_PHOTON
as true
:
define( 'WPCOM_VIP_USE_JETPACK_PHOTON', true );
If WPCOM_VIP_USE_JETPACK_PHOTON
is defined as true
:
- Photon’s default parameters applied to images can be overridden with the
jetpack_photon_pre_args
filter. - Photon will only load transformed images from the
i0.wp.com
domain if the referenced source domain for the image is different from the VIP site’s domain.
Reducing image size
Serving smaller image sizes can increase the speed at which an image will load and reduce the bandwidth required to load it by the end user. By reducing the size of an image, users can receive a 200kB download in 100ms instead of a 28MB download in 20s. This is especially important for users viewing a site on a mobile device. Instead of serving a 5000×3000 image displayed in a 500×300 area, use transformation parameters to serve the image at a size more appropriate to the device.
Optimizing the size of a requested image is also important for native mobile apps. If a JSON payload to a mobile app contains a URL for an image at its original size, apply the necessary resizing parameters within the application to display the image at a smaller, more appropriate size for the end user.
Last updated: May 20, 2023