WDD 230: Web Frontend Development I

WebP Image File Format

WebP image format official logo by Google Developers.

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

"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

  1. In your browser, navigate to this free photo sharing site image: Landscape (~3900 X 2633 pixels in original dimension size).
  2. 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
  3. In your browser, navigate to the free, JPG to WebP, online file converter application at cloudconvert.com.(You can use CloudConvert absolutely free for up to 25 conversions per day)
  4. In the application, select the landscape.jpg image file that you just downloaded.
  5. 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.
  6. 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

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

Additional Resources

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