CSU Ram Head Logo

JTC 372

Web Design and Management

WebP Example

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!

HTML


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

 

References:

 

WebP images created using Cloudinary

CSS-Tricks

Photo courtesy of Turkeyfoot Bluegrass Band

Logo courtesy Midwinter Bluegrass Festival