Integrating with WordPress

The official PicPerf WordPress plugin is a stupid-easy way to make your website’s images faster, lighter, and more SEO-friendly.

Getting Started

Before installing the plugin, you’ll need to do the following:

1. Create an account.

In order to benefit from this plugin, you’ll need to first sign up for a plan at picperf.io. You’ll automatically be given a 14-day free trial (no card required), but in order keep your images optimized beyond that, upgrade to a regular plan.

2. Add your domain.

Add your website’s domain inside the PicPerf dashboard. If your WordPress site runs on a different domain from your public website, you’ll need to add both domains.

Installation & Activation

After creating an account and adding a domain, download the plugin here. Then, install it in the WordPress admin plugin page by uploading the .zip file you just downloaded.

Installing the WordPress Plugin

After it’s successfully installed, activate it.

Activating the WordPress Plugin

Using Composer?

To install the PicPerf WordPress plugin with Composer, make sure the composer/installers package is installed in your project:

  "require": {
    "composer/installers": "^2.2"
  },

In addition, you’ll need to set your install-paths property, so the plugin is installed where your WordPress plugins live:

  "extra": {
    "installer-paths": {
      "wp-content/plugins/{$name}/": [
        "type:wordpress-plugin"
      ]
    }
  },

Then, run composer require picperf/wordpress. Activate your newly installed plugin, and you’re set.

What It Does

This plugin will automatically prefix every URL found in an image tag with the PicPerf host, allowing it to be optimized, reformatted, and globally cached. By default, it’ll impact every image that’s rendered in the final HTML output of your page.

Changing Transformation Scope

If you’d like to disable universal URL transformations, you can set the PICPERF_TRANSFORMATION_SCOPE constant in your wp-config.php file to null. Setting it to CONTENT will cause only images rendered via the the_content filter to be transformed. For example:

// Transform all images (default).
define('PICPERF_TRANSFORMATION_SCOPE', 'ALL');

// Only transform `the_content` images.
define('PICPERF_TRANSFORMATION_SCOPE', 'CONTENT');

// Transform no images.
define('PICPERF_TRANSFORMATION_SCOPE', null);

Using an Auto-Generated Image Sitemap

When a sitemap_path query parameter is set on an image, PicPerf will automatically include it in an image sitemap generated for you. By default, no images are included in the sitemap. However, you can enable this by setting the PICPERF_ADD_SITEMAP_PATH constant.

You

// Include no images in sitemap (default).
define('PICPERF_ADD_SITEMAP_PATH', null);

// Only add `the_content` images to sitemap.
define('PICPERF_ADD_SITEMAP_PATH', 'CONTENT');

// Add all image so sitemap.
define('PICPERF_ADD_SITEMAP_PATH', 'ALL');

Auto-Registered Sitemap Endpoint

By default, this plugin will register an image sitemap for your site at https://ur-site.com/picperf/sitemap and add a <link> tag to the <head> of your pages.

All this endpoint does is proxy the auto-generated sitemap provided at https://picperf.io/sitemap/ur-site.com. The benefit is that search engines will be able to crawl and index it, since it’ll be available through your domain (as set returned by the get_site_url() function).

If you’d like to disable this endpoint, set the PICPERF_DISABLE_SITEMAP to true.

<?php

define('PICPERF_DISABLE_SITEMAP', true);

Manually Transforming URLs

If you’ve disabled universal transformation and would like to manually handle images, you may use the PicPerf/transformUrl() function. It’s available globally when the plugin is active:

$transformedUrl = PicPerf\transformUrl("https://example.com/my-image.jpg");

// https://picperf.io/https://example.com/my-image.jpg

What If My Subscription is Cancelled?

If paused or cancelled, your images will remain to be prefixed as long as the plugin is active. However, you won’t get any of the optimization benefit. Instead, your images will just pass through as if they’re being served from your own site (with a little bit of extra latency, since they’ll still be getting routed through picperf.io). If you’d like to revert your images and stop using PicPerf, simply deactivate the plugin after removing any PicPerf\transformUrl() calls as described above.

Changelog

v0.0.1 - Initial verison is released.
v0.1.0 - Add transformation support for images constructed through the wp_get_attachment_image_attributes filter.
v0.2.0 - Add transformation support to featured images.
v0.3.0 - Transform image URLs in <style> tags and style= attributes.
v0.4.0 - Include automated sitemap generation support.
v0.4.1 - Update documentation.
v0.5.0 - Add auto-configured image sitemap endpoint.