Image transformation

VIP uses a service similar to Photon, so the core image processing is the same with (roughly) the same filters. Similar to Photon, there is the ability to handle image resizing, cropping, process successive transformation functions. For example, you are now able to perform a crop followed by a resize function with a filter tacked on the end, as well as many other combinations.

For example:
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

That same base image can be easily transformed into a smaller full-color version:
https://docs.wpvip.com/wp-content/uploads/sites/2/2021/02/VIP-Team-2020.jpg?w=600

Using transformations reduces bandwidth, especially for mobile customers. There is no need to serve a 5000×3000 image when it will be displayed in a 500×300 area. Adding the width or height parameter allows mobile users to see the image more quickly, and saves on the mobile users’ data allocation. Instead of a 28MB download that takes 20s they get a 200kB download in 100ms.

It is important to always support this, especially in native mobile apps. If a JSON payload to a mobile app contains just a single original sized image URL, be sure to add the query parameters needed inside the application when using that URL to display the image.

Using image sizes

When using the_post_thumbnail() function in your templates, you can set a specific image size in order to customize the output of the image src. For example, if you have a custom-size image size, you can pass it in with the_post_thumbnail( 'custom-size' ); and your image will output at your desired size.

If you don’t specify an image size, VIP will default to:

1. The content-width set by your theme (see Theme Handbook Functions)
2. If no content-width is set, the default width will be set to 1024

For more information take a look at the image_resize() function which handles the output sizes.