CSU Ram's Head

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)

MidWinter Logo PNG

Lossless Example - MidWinter Logo WebP (10.0k)

MidWinter Logo WebP

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

Turkeyfoot Photo JPG

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

Turkeyfoot Photo  WebP

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:

Alt Text!


	<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">



WebP images created using Squoosh


Photo courtesy of Turkeyfoot Bluegrass Band

Logo courtesy Midwinter Bluegrass Festival