WebP Examples

Note: If you don't see two of each of these images, your browser probably doesn't support WebP. To use WebP with a fallback for non-supporting browsers, please see the code below.

Lossless Example - MidWinter Logo PNG (14.6k)

Lossless Example - MidWinter Logo WebP (10.0k)

Lossy - Turkeyfoot Photo - JPG Quality 80 (157k)

Lossy - Turkeyfoot Photo - WebP Quality 80 (65k)

If you create a JPG or PNG image, and the appropriate WebP image, the following HTML code will serve WebP when supported by the browser, and the alternative if WebP is not supported:

HTML

<picture>
	<source srcset="/course/examples/images/turkeyfoot.webp" type="image/webp">
	<source srcset="/course/examples/images/turkeyfoot.jpg" type="image/jpeg">
	<img src="/course/examples/images/turkeyfoot.jpg" alt="Turkeyfoot Photo">
</picture>				
				
			

References:

WebP images created using Squoosh

CSS-Tricks

Photo courtesy of Turkeyfoot Bluegrass Band

Logo courtesy Midwinter Bluegrass Festival