Image transformation

A service similar to Photon is built-in to perform core image processing. 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 version of an 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 located within a site’s /uploads/ directory.
• If the size of an image is not specified, VIP will default to:
  • The value of content-width if it is 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.

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 that takes 20s. This is especially important for users viewing a site on a mobile device. Instead of serving a 5000×3000 image that will be 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, be sure to apply the necessary resizing parameters within the application to display the image at a smaller, more appropriate size for the end user.