Responsively adding webP images

Whilst working out an approach to selectively loading responsive images, I realised I had finally found a place for the webP format. A quick feature detect confirmed this would be possible. This post wraps everything up in the responsive images series by combining the feature detect with the responsive images code to provide a hearty complete solution to your responsive image needs.

If you view the page at using the latest Opera or Chrome client, and inspect the images, you should notice that the image paths end in the .webp extension. This saves up to 50% download size on the larger images without any loss in quality.

On the smaller version of the images it was interesting to note that at default quality, the images were actually bigger. If I dropped the quality slightly, a more modest 20% gain was usually found. Must say though that the quality is still excellent.

Responsively adding webP images

One thought on “Responsively adding webP images

  1. skal says:


    post is on-spot with the intended use case for webp!

    wanted to mention: latest version libwebp-0.2.0 now supports transparency and lossless modes officially.
    A good use-case for these features is for page decorations (icons, logos, etc.), possibly
    in conjunction with spriting.

    libwebp-0.2.0 is integrated in latest dev Chrome for now, following its way down to stable…

    skal (working on webp)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s