Faster-Loading Images with WebP

As announced today, all WordPress.com VIP sites now support the WebP image format, serving high-quality images with shorter loading times.

We always strive to make your sites run as quickly and smoothly as possible, both on the front end and under the hood. So we’re happy to announce that the WordPress.com image service, which delivers the beautiful images you use in your posts to your site’s visitors, now offers seamless support for the WebP image format.

What does this mean for you and your audience? This new feature provides size reductions of up to 34 percent for served images compared to a JPEG image of an equivalent visual quality level. Your viewers will save a lot of time loading your pages — time they can better spend enjoying the content you publish.

Lossy Image Compression Now Available

Today we’re introducing a new feature enabling you to optionally compress images on your sites with greater control over quality and file size.

On WordPress.com VIP, we’ve always losslessly compressed your uploaded images—we do some simple processing to trim file sizes and remove bloat while still maintaining the original images’ quality.

However, as we continue to see traffic across the VIP network shift to mobile devices, in an interest to help our publishers reduce page load times we’ve now added options to further optimize file sizes through lossy compression.

Implementation is really straightforward, using this function in your theme (make sure to refer to the canonical documentation, as this may change over time):

wpcom_vip_set_image_quality( $quality, $strip )

$quality can be a value between 0 and 100, where 100 is the original image quality.

$strip refers to meta data embedded in the file, and has the following options:

– info: will remove all Exif, IPTC and comment data from the image.
– color: will remove any ICC color profiles present in the image.
– all: will remove all of the above.

For example, our annual WordPress-themed holiday wallpaper:

At full size, this image is 649k; with strip=all it’s reduced down to 600k, and with quality=80 it shrinks even further to 125k—with only a marginal impact to image quality:

Special thanks to our friends at TechCrunch for helping test this new feature!

Performance Feature – Automatic Lossless Image Compression

We have created a new robot – his name is optimizerbot and he will look through your themes daily to find any PNG or JPEG images that can be losslessly compressed and automatically commit the compressed version to your theme’s subversion repository. We have found that about 80% of existing images in VIP themes can be compressed this way, saving precious bytes and providing a better user experience, especially on slower networks, like 3G.

Here is an example of what the commit message will look like

The first column is the file name, second column is the old file size in bytes, third column is the new file size in bytes, and the last column is the % saved.

Technical details for those who are interested:

PNGs are being compressed using OptiPNG.
JPEGs are being compressed using jpegoptim.
The script we are using to do the compression will soon be available in the WordPress Code SVN repository.
We invalidate our CDN whenever static content is changed which means users will begin downloading optimized versions of these files shortly after the changes are deployed.
For those familiar with Trac Wiki syntax you probably will recognize the || separator. This creates a table layout in Trac, which we use internally for reviewing changes in some cases.

Enjoy and please leave your feedback/questions in the comments!

Debug Bar

One of the goals at our meetup two weeks ago was to find ways to improve the developer experience on WordPress.com VIP. As a first step, we’re rolling out the Debug Bar to all VIP developers.

If you have Administrator access to a VIP site and have read- or write-access to the VIP SVN repo, the Debug Bar will be automatically enabled for you.

You can use the Debug Bar for quick troubleshooting of your sites such as examining how WordPress interprets the page request and the resulting WP_Query object. You will also get a summary of all queries on the page and a breakdown of any remote requests, which is very useful in tracking and fixing down slow performing pieces of your sites.

(If you haven’t already, we also recommend installing the Debug Bar in your development environment.)

What else can we add to to the Debug Bar to make it more useful? Let us know in the comments below.