How to deliver fast images with Modx using PhpThumbOn and WebP

General Tutorials
1

Hi everyone, this is a quick tutorial on how to deliver fast images using Modx. Many times, I asked for help on the forums, and so I thought it would be nice if I could help others too.

Before we begin: If you are reading this from the future, Avif format has probably taken over the web. At the time I am writing this tutorial, Safari is not supporting Avif images yet, so it doesn’t make much sense to use it right now. But if you want to use Avif instead of WebP, the implementation should be the same. Also bear in mind that you would probably need to use at least php 8.1 to do so, as this is the first version of php providing support for Avif images.

Also note: I am using phpthumbon, but if use another version of this plugin ( phpthumbof for eg. ), the principle remains the same.

Alright, let’s get started.

You are probably reading this because you tested your website speed on google page speed, and google is not very happy that you are using jpeg and png to display your images.

You have two options:

  • Converting your images one by one ( please don’t do that ) using a software such as photoshop and the appropriate google extension
  • Use the power of Modx and let your CMS/F do the hard work for you.

So first, this is how an image is normally displayed on the web:

<img src="path/to/image/150.jpg" width="150" height="150" alt>

Because there are still many browsers that don’t support WebP ( Safari for systems prior to Big Sur, internet explorer :nauseated_face:… ), we can’t directly replace our jpg image to a WebP format, as it will not be displayed for everyone.

This is what we will be using:

<picture>
<source srcset="path/to/image/150.webp" type="image/webp">
<source srcset="path/to/image/150.jpg" type="image/jpeg">
<img src="path/to/image/150.jpg" width="150" height="150" alt>
</picture>

What this does is really simple:

  • Your system support WebP => your browser displays the WebP image.
  • Your system does not support WebP => you see the jpeg version

Now it is the part where phpthumbon comes into action: we want the plugin to convert our image to WebP .

1 - First step: Install the plugin ( crazy right ?! Who knew? )
2 - Second step: If you are going to call the image directly into you template or page, you will use to code below:

<picture>
<source srcset="[[phpthumbon? &input=`path/to/image/150.jpg` &options=`f=webP`]]" type="image/webp">
<source srcset="[[phpthumbon? &input=`path/to/image/150.jpg`]]" type="image/jpeg">
<img src="path/to/image/150.jpg" width="150" height="150" alt>
</picture>

Well, that’s it! Easy peasy!
Now your images are lightning fast!

Of course, there are alternate options available if you use a TV instead of direct image path, but you’ll find more info in each plugin’s documentation. (Feel free to post your tips and tricks below, it could help others).

But you get the idea!

References:

7 Likes
2

Thanks so much for sharing this tutoria, @carlo_13! This will be incredibly useful for folks. This is exactly the kind of generosity that makes the MODX community so special.

2 Likes
3

Great write up, but just going to link this thread PThumbTransparent WebP Images - #21 by andywizz for reference.

Using PHPThumb to create WebP images doesn’t always create them as properly encoded WebP images, it depends on the capabilities of your server. Also generating WebP images can be resource-intensive leading to time outs.

2 Likes
4

A potential workaround where image processing could impact site performance where there isn’t unlimited access to PHP workers or CPU is to leverage an image optimization service such as Short Pixel to handle the image optimization off the server. This could be accomplished in number of ways via a plugin that fires on image upload or processes them similarly to phpThum, or monitors a folder and optimizes them async, but on a third party service. Some of these services are pretty inexpensive and offer subscriptions or one-time credit purchases. Here’s ShortPixel’s PHP Library for reference: GitHub - short-pixel-optimizer/shortpixel-php: ShortPixel.com PHP SDK

1 Like
5

Hi @inside-creative,
thanks for your comment.

I personally did not encounter any time out, but you made a valid point.
I think that Modx should take Wordpress approach when it comes to create thumbnails.

When you upload a file into Wordpress media manager, it automatically converts/crops the image into the predefined size(s) set into your function file.

This is a very clever way of doing this, because you convert your image only once, whereas phpthumbof does it every time you clean you cache.

See more

6

Good news for mac users: Apple adding AVIF image support to iOS 16 and macOS 13 - 9to5Mac

1 Like