Image transformation

The VIP File System performs core image processing with a built-in image transformation service similar to Site Accelerator (previously Photon). By default, all images loaded from a site’s wp-content/uploads/ will utilize the VIP File System’s image transformation service and leverage the VIP Platform’s CDN.

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 filter parameters 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 to 1024.

The default logic for image size output is defined by the image_resize() function in VIP MU plugins.

Transformation parameters

Many of the same filter parameters as Site Accelerator can be applied to images for resizing, cropping, and processing successive transformation functions.

For example, to dynamically resize an image, add width (w=) or height (h=) parameters to an image’s source URL:
/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:
/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 wp-content/uploads/ directory.

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.

PNG-8 and PNG-24

Both the PNG-8 and PNG-24 file formats use the same lossless compression method. But whereas PNG-24 supports up to 16.7 million colors, PNG-8 supports only 256 colors and therefore tends to have a smaller file size.

PNG-8 files that are uploaded to the VIP File System are automatically converted to a PNG-24 file format to enable dynamic resizing for the file on demand. This conversion can result in a PNG-8 file to be served in the PNG-24 file format at a much larger size than expected.

To prevent issues related to the conversion of PNG file formats:

• Only upload *.png files saved with a PNG-24 file format so that the File System can dynamically resize the images and deliver them at the expected compressed file size.
• Or, convert *.png files to a high quality JPEG format prior to upload.

Site Accelerator image transformation service

While not recommended, sites can leverage Site Accelerator, Jetpack’s image transformation service with the WordPress.com CDN infrastructure. If Site Accelerator 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 Site Accelerator 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:

• Site Accelerator’s default parameters applied to images can be overridden with the jetpack_photon_pre_args filter.
• Site Accelerator 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.