WebP image compression

You can convert an image to webP format online going to http://image.online-convert.com/convert-to-webp, an horrible website but extremly efficient.

I did a test with this image:

image

The JPG version is 161 Ko while the WebP version is 48 Ko:

If you use Photoshop as an image editor, as I imagine you are since this blog is aim to help graphic designers turned integrators and front end designers wanna-be. (Mac, Windiows, Linux), you can use this plugin

Another Photoshop plugin allows you to edit a webP image in Photoshop. (Mac, Windows)

Browser’s compatibility

By now Chrome and Opera, Opera Mini, Android browser and Chrome for Android  support the format, and according to CNet,

Thus far, only Chrome and Opera support it, but Mozilla is re-evaluating its earlier opposition to WebP for Firefox in light of some major non-Google Web sites showing support. Google also has improved the format to address some of Mozilla’s earlier concerns.

Another reason why you should seriously consider the WebP compression is that compagny like Facebook is adopting it. When this kind of company make that move they are already changing the game. That is a strong indicator of which direction is taking the web convention. So maybe right now it is wise to keep on using the traditional compression format (jpeg, gif, png) for small websites, while it is worth thinking of choosing the WebP for huge websites. Make a smooth transition, getting used to it even if nowadays it seems to be tedious.

Fallback

Smashing magazine tested the format and runned 4 tests in order to define the best fallback solution. They´ve decided to use the <picture> tag, because it allows to keep the WebP compression/quality benefits as well as letting browsers chose the rigth format.
<picture> is an element which isn’t recognized by every browsers yet, so it is necesary to use the picturefill script so overcome the problem.

The use in the markup:

<picture>
  <source srcset="examples/image.webp" type="image/webp">
  <img srcset="examples/image.jpg alt="…">
</picture>

Note that there’s no alt=“” attribut in the <source> element, and the webp needs to be supported with a type.

Combine media queries with webp format.

<picture>
  <source srcset="examples/images/large.jpg, 
   examples/images/extralarge.jpg 2x" media="(min-width: 800px)">

 <source srcset="examples/images/large.webp,
  examples/images/extralarge.webp 2x"
  media="(min-width: 800px)
type="image/webp">

   <img srcset="examples/images/small.jpg, 
    examples/images/medium.jpg 2x" alt="…">
</picture>

Call a data attribute in the front end

The best exemple is still the thead to hide in the mobil version.

In the markup we create a data like:

<td data-th=“Pasajeros”>

We call it data-th in this case because it seams the most understandable. We could call it data-fulanito, data-jane-doe,…

We call it with the css to display the word Pasajero it in the front end.

table td:before {
   content: attr(data-th);
   display: inline-block;
 }

:before will display it before the td, we could have put :after


Version desktop:

Version mobil: