Many WordPress developers complain about the size and bulk of Jetpack, a popular WordPress plugin that packs in an enormous amount of features. Despite the excessive amount of functions packed in to this plugin, there are some very useful modules that can be of great help on your site. The Photon image service is one of those, which an image CDN and re-sizing service on your posts and pages.

In order to use Photon in WordPress, your site either needs to be hosted on WordPress.com or connected with Jetpack. When you connect your site with Jetpack, the WordPress servers will index your posts, pages and the images contained within them. Enabling Photon will filter the content on your posts and pages and re-write image URLs to be served from the WordPress CDN. As an added benefit, the images are re-sized to fit the width and height dimensions on the image, so you aren’t needlessly serving giant photo files that get scaled down.

For sites that have their own CDN configured for images, you can still take advantage of Photon in certain situations. We use Photon on GeekWire, but we actually don’t even have Photon turned on. We use it selectively on certain sections of the site via the Photon API.

The challenge with WordPress post thumbnails

WordPress allows you to enable post thumbnails in your theme via add_theme_support('post-thumbnails');. Once you enable post thumbnails, you can then register custom sizes and crops for images that get uploaded to your media library. For example, you may need a 100×100 square cropped thumbnail for your sidebar. You could add that via add_image_size('100-square', 100, 100, TRUE);.

While very flexible, WordPress thumbnails are messy and excessive when you need a variety of image sizes on your site. Say, for example, you have a sidebar section that uses a certain size image like 200px x 100px. Even if the quantity of images you need at that size is small, if you register that size as a post thumbnail, each and every image you upload to the media library will generate a thumbnail of that size, even if it never gets used on the site. We load over 2000 images in our media library every month, and each image generates 5 thumbnail sizes, in addition to the original file, resulting in 12,000+ new image files on our server every month. That results in a lot of unused detritus on a WordPress server.

Selectively serve re-sized images via Photon

As I mentioned, we don’t have Photon enabled on our site. However, we do use it on certain sections of our site to generate re-sized images on the fly. One example is the “Related Stories” section on GeekWire articles. Here is how we resize and crop the image thumbnails that appear there at 350x200px.

The benefit here is that we don’t have to generate this new file size for every single image uploaded to the media library. We can create the size dynamically when it is needed.

Limitations of Photon

Compared to serving images off of your own CDN, there is one significant limitation to Photon that prevents us from using it more widely on our site. Images uploaded or re-sized in Photon are cached “forever”. This means that if you make any image edits or tweaks in WordPress, they won’t show up when the image is served from Photon. There is no way to invalidate the cache. In order to refresh an image, you need to upload a new image with a different file name.

Comments

Latest Developer Blog Articles

Job Listings on GeekWork

Find more jobs on GeekWork. Employers, post a job here.