WDD 230 | WebP Image File Format

WebP Image File Format

Overview

You have worked with many different image formats and some of those image types are better suited for the web. The work of responsive image design is to support smaller page weights and to deliver content based upon screen size. This activity explores the newer WebP image format which offers better compression to support faster page loads.

"WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster."
- developers.google.com

Prepare

Review common image formats: 🎦 Image File Types - by WebFlow (2:22 mins, Image File Types Transcript)
Review Scalable Vector Graphics 🎦SVG Explained in 100 Seconds - Fireship
Read: 📄 WebP image format - developers.google.com
Some terms that you may not be familiar with include:
- Lossless Compression - File compression that maintains the original data using sophisticated, redundancy, replacement algorithms.
- Lossy Compression - File compression that uses approximations and partial data to represent the original media source.
- Transparency - The image property representing the amount or level of transmission of background color through the image.
Reference: 📑 Image file type and format guide - MDN
- Note the summary of the WebP file format presented in the table.

"The older formats like PNG, JPEG, GIF have poor performance compared to newer formats like WebP and AVIF, but enjoy broader "historical" browser support. The newer image formats are seeing increasing popularity as browsers without support become increasingly irrelevant (meaning have virtually zero market share)." - MDN

Activity Instructions

In your browser, navigate to this free photo sharing site image: Landscape (~3900 X 2633 pixels in original dimension size).
Click on the Free Download button in the upper right of the screen.
- Download the default, original sized image to your local machine.
- Rename the file to "landscape.jpg".
How big, in terms of memory size, is the file?
2.87MB or 2.868KB
In your browser, navigate to the free, JPG to WebP, online file converter application at cloudconvert.com.
In the application, select the landscape.jpg image file that you just downloaded.
Save the file with the .webp extension.

How big, in terms of memory size, is this WebP file?
- around ~1.6MB or a reduction of about 40% just by changing its file format and nothing else

What other actions could we take to reduce the image file size even further to something below 75KB?
- The image can be cropped to a size that is actually used on the page/site.
- The image can be resized to the maximum size that is needed on the site in any view.
- The image quality can be reduced.
Apply the optimization techniques given in the prior step to the landscape.webp file using an image editing program of your choice. The resulting image should not be more than 87Kb.

🎦 Demonstration of converting a large .jpg file into .webp file format.

Submission

Copy this optimized landscape.webp file to an images folder in a lesson subfolder within your local, wdd230 course repository folder.
Update your course portal home page with a direct hyperlink to the image.
```
05: <a href="lesson03/images/landscape.webp">WebP</a>
```
Commit and push your updates and additions to your GitHub Pages enabled wdd230 repository.

Additional Resources

🔁 Image Optimization: Review general principles on using web images.