Creating and using webp images

January 4, 2019

Usage in HTML

code

<!-- For browsers tat support it, just use a .webp image as src -->
<img src="img/WebPimage.webp" alt="WebP rules." />

Safari, iOS Safari, IE, IE Mobile, Firefox, and Firefox for Android have zero support for webp as of this writing on January 04, 2019.

code

<!-- Using webp images with fallback -->
<picture>
  <source srcset="img/WebPimage.webp" type="image/webp" />
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg" />
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!" />
</picture>

The browsers that support <picture> will choose the most adequate image to display. The ones that don't will just show the <img> <src>

The HTML <picture> element contains zero or more <source> elements and one <img> element to provide versions of an image for different display/device scenarios.

<source> works with <picture>, <audio> and <video> and is used when you want to specify the same media content in different formats supported by different browsers

code

<video controls width="250" height="200" muted>
  <source src="/media/examples/flower.webm" type="video/webm" />
  <source src="/media/examples/flower.mp4" type="video/mp4" />
  This browser does not support the HTML5 video element.
</video>

Converting images to webp on Linux

code

# install the tools
sudo apt install -y webp

# convert all files in a folder from webp to png
find ./ -name "*.webp" -exec dwebp {} -o {}.png \;

# convert all JPEGs to webp
find ./ -name "*.jpg" -exec cwebp -q 70 {} -o {}.webp \;

For JPEGs, use lossy, for PNGs use lossless
-q is for quality factor (0:small..100:big), default=75
cwebp is for compressing an image file to a WebP file
dwebp is for decompressing a WebP file to an image file
vwebp is for decompressing a WebP file and displaying it in a window

Creating and using webp images

Usage in HTML

Converting images to webp on Linux

Links