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.

Read more at WordPress.com.

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!

Implementing HiDPI, 2x, Retina images

HiDPI displays are the future, so it’s a good idea to include 2x images in themes and admin area modifications going forward. It’s actually really easy to do, and will only get easier as more browsers and operating systems begin to support it.

At the time of this writing, the audience is limited mostly to Safari 6 and Chrome Canary 21 on a Retina Macbook Pro, or Safari on a Retina iPad/iPhone, but that’s no excuse to not be thinking ahead. We’ve already updated much of the WordPress.com and VIP admin areas, and WordPress core icons are quickly being updated also.

For now, the following approach works really well. It applies only the CSS rules it needs, without duplicating too much effort.

#your-image {
    background-image: url('/path/to/image.jpg');
    background-position: XPOSpx YPOSpx;
    background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    #your-image {
        background-image: url('/path/to/image-2x.jpg');
        background-size: 1xWIDTHpx 1xHEIGHTpx;
    }
}

The first bit sets the 1x background image, position, and forces no-repeat (which you may or may-not need.) The second bit only applies to a pixel-ratio of 1.5 or greater, switches the image to a 2x variant, and sets the background-size to the 1x images height and width. These rules are what allow the image to scale down if need-be.

The only caveat to this approach is the end-user downloading both the 1x and 2x images. Short term, we might have a cookie available to identify the device’s pixel ratio. This only helps inline images (or ones loaded via PHP) and not ones loaded via CSS. Long term, browser support will improve and no hacks will be necessary.

If you need help identifying non-2x images, check out this page in the Mac Development Library. OS X comes with a flag to make all non-2x images show up in an annoying pink hue. It’s really annoying, which is great motivation to update things. Normal 1x scaled images are already pretty annoying, so I haven’t used it in day-to-day retina’izing. That said, it’s a great tool if you want to audit images without looking at the file system and going down the list.

Speaking of the file system, it’s a great idea to crunch the 2x images as much as possible to keep their file-sizes down. Adobe apps make this really easy with the Save for Web option, which you should already be familiar with.

One final tip for the designers and illustrators. Images that are specifically designed with 2x in mind are what will really make your sites and admin area modifications look polished and refined. Simply resizing an image or using a doubled-up version will yield the same ugly results as trying to make a 16px favicon out of a 128px PNG. In other words, make sure to design themes with twice the dimensions of a normal site, so your images are already 2x ready.

That about wraps this up. No doubt we’ll need to revise this as technologies and approaches change. Let us know if something better comes along, and we’re happy to include it here.