How to Use Jetpack Photon for WordPress Header Image

When doing some performance testing of the new site design, I realized that the header image wasn’t being processed by Photon.

Since there’s a filter for almost everything in WordPress, I look around a bit and found the theme_mod_$name filter.

/**
 * Filters the theme modification, or 'theme_mod', value.
 *
 * The dynamic portion of the hook name, $name, refers to
 * the key name of the modification array. For example,
 * 'header_textcolor', 'header_image', and so on depending
 * on the theme options.
 *
 * @since 2.2.0
 *
 * @param string $current_mod The value of the current theme modification.
 */
return apply_filters( "theme_mod_{$name}", $mods[$name] );

Using that filter, we can then modify the image source so that the image will be handled by Jetpack’s Photon.

add_filter( 'theme_mod_header_image', 'moh_photonize_header_image' );
function moh_photonize_header_image( $image ) {
  if ( $image && function_exists( 'jetpack_photon_url' ) ) {
    $image = jetpack_photon_url( $image );
  }
  return $image;
}

At this point, if you were to reload your home page and check the source for your header image, you’ll notice that the image has something like i1.wp.com in front of it. This means that our little snippet worked.

What I haven’t yet figured out is how to properly set the width and height arguments for the image since we only have the URL and not an image attachment. �_(?)_/�