Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Convert JPG, PNG, and Animated GIF to WEBP

By  on  

New image formats like WEP and MOZJPEG will be a major boost to load time on the web.  The majority of page load and render time is usually attributed to unoptimized images, so these new formats will make both mobile and desktop load times faster.  I've taught you how to detect WEBP support but we've not explored how to create WEBP images; let's have a look at how easy it is to convert JPG, PNG, and even animated GIF to WEBP.

Convert JPG and PNG to WEBP

My favorite open source image manipulation library, ImageMagick, doesn't have the capability to convert images to WEBP out of the box -- you'll receive an ugly error if you don't first install webp via a utility like homebrew:

brew install webp

Once webp is available, you can use ImageMagick to do the conversion:

convert logo.png logo.webp

In most cases the WEBP image, which is only available in Chrome at the time of publishing, will be significantly smaller than the original image.

Convert Animated GIF to WEBP

The webp library doesn't have the capability to convert animated GIF images to WEBP.  You'll need to download gif2webp from Google.  With gif2webp available, you can convert your animated GIF image to WEBP:

gif2webp animation.gif -o animation.webp

gif2webp provides numerous options for output modification like quality, multi-threading encoding, etc.

Imagine the boost in your site load time if you created and served WEBP images where they're supported.  Faster sites means more conversions and better user experience.  Make it happen!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • By
    MooTools Typewriter Effect Plugin Upgrade

    Last week I shared my MooTools Typewriter Class with you. It was pretty well received and I got a few feature requests that I've implemented including "backspacing" and character variance delays. I'm not going to explain the old code, so click here...

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

Discussion

  1. pascal massimino

    Note: one important gif2webp option is -min_size. This one can be used to minimize the file size.

    This is not the default because gif2web favors minimizing the playback smoothness instead (by inserting larger keyframes at regular interval).

    skal/

  2. Cathy Mayhue

    WEBP is something which every body was waiting for, as other images took a long time to load, so this innovation is more than welcome and many thanks for sharing us with the method to convert other image formats into webp.

  3. emmze

    Since support for webp in browsers is limited right now, is there any big advantage to using webp instead of svgs? I tried some tests just now, converting some variously sized png images to both webp and svg. The resulting size was about the same (webp usually slightly smaller) but svg has much better browser support, so why not just use svgs?

  4. wottpal

    You don’t even need webp to shrink gifs for the web. Simply use mp4s instead if you want 100% browser-support. That often saves around 90% of file-size.

    Then you can modify the tag to look and behave like a gif, too. Use the inline & autoplay attributes.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!