How to Create Your Own Image Optimization Plugin by Leveraging Jetpack’s Photon

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

This is a quick code tutorial detailing how to leverage Jetpack’s Photon for custom images.

Not all images in your theme or plugin or custom theme functionality will be inserted via WordPress methods.

Photon is an image acceleration and modification service for Jetpack-connected WordPress sites. Converted images are cached automatically and served from the WordPress.com CDN. Images can be cropped, resized, and filtered by using a simple API controlled by GET query arguments. When Photon is enabled in Jetpack, images are updated on the fly.

https://developer.wordpress.com/docs/photon/

For custom code such as images coming from custom post meta fields or Advanced Custom Fields values, we’ll use a custom function.

Say we have the following code snippet:

<?php
$myImage = get_post_meta($post->ID, 'my_image_meta', true);

$out = '<img src="' . $myImage . '" alt="Some description" loading="lazy">';

return $out;

We’ll use the function below, where we check if the Jetpack plugin is active and if the Photon module is enabled.

<?php
function wppd_image_downsize($imageUri, $downsize = false, $args = []) {
    /**
     * Jetpack Photon
     * 
     * @docs https://developer.wordpress.com/docs/photon/
     */
     if (function_exists('jetpack_photon_url')) {
        if (class_exists('Jetpack') && Jetpack::is_module_active('photon')) {
            $imageUri = jetpack_photon_url($imageUri, $args, null);
        }
    }

    return $imageUri;
}

The image snippet above becomes:

<?php
$myImage = get_post_meta($post->ID, 'my_image_meta', true);
$myImage = wppd_image_downsize($myImage);

$out = '<img src="' . $myImage . '" alt="Some description" loading="lazy">';

return $out;

And now the image is served from wp.com’s CDN. Check the official Jetpack documentation for additional arguments, such as size, cropping, quality and filters.

Also see the Photon API page for more detailed explanations and examples.

👋 Added by Ciprian on Tuesday, February 9, 2021 in Blog. Last modified on Tuesday, February 9, 2021.

Contribute!

Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy