When to use WebP?

If you have a big file with transparency, what we used PNG for until now, then it makes sense to convert it to WebP.

Based on siipo.la WebP is not better than JPEG if you use the right tools to compress JPEGs. AVIF will be the true next gen format.

How to convert image to WebP

I use this script at the moment, because the apps in the App Store were no good.

1
2
3
4
5
6
7
8
9
	dc="$(GetFileInfo -d "$f")" # store creation date
	dm="$(GetFileInfo -m "$f")" # store modification date
	noExt=${f%.*}
	# needs to be installed with brew install webp
	newExt="$noExt".webp
	/usr/local/bin/cwebp -q 90 "$f" -o "$newExt"
	SetFile -d "$dc" "$newExt" # restore creation date
	SetFile -m "$dm" "$newExt" # restore modification date

How to use WebP?

1
2
3
4
5
<picture>
  <source type="image/jpeg" srcset="mmatterhorn-compressed.jpg">
  <source type="image/webp" srcset="matterhorn-compressed.webp">
  <img src="matterhorn-compressed.jpg" alt="Matterhorn">
</picture>

You define a traditional img element last, for browsers that don’t support the picture or source elements. (IE 11, Opera mini)