WDD 130: Web Fundamentals

Working with Web Images

Overview

Most websites contain not only words, but also images. You will work with many different image formats and some image formats are better suited for the web than others. This activity explores using images for the web and how to optimize images so that they use less memory, thus supporting smaller page weights, which decreases the overall download time.

"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 (i.e. have virtually zero market share)." - MDN

Prepare

Basic Steps of Image Optimization

The original photos that we often work with are large in terms of dimensions and file size. Large photos need to be scaled down and optimized to a size that is actually needed on a web page. The optimal size is determined by the design and layout of the page. Software can be used to crop, reduce, and optimize the images. These are the basic steps supported by most photo editing packages:

  1. Crop the original image to focus on the most important content, keeping in mind design principles (like the rule of thirds) and the site's purpose.
  2. Resize the image to the maximum size that is required in the design of the web page. The resized image will then be saved in smaller formats to match the design and layout needed for viewing on smaller screens including on phones and tablets.
  3. Reduce the quality of the image to an acceptable level which will reduce its file size.

Optimizing images is an easy way to improve page performance without requiring a significant time investment. More techniques for handling responsive images will be covered in future courses.

Activity Instructions

All images must be optimized in this course in order to reduce overall page weight. The standard is that images need to be less than 100kB in memory size. If you have an image that is larger than 100kB, you will need to reduce its size by optimizing it.

Optimize an Image

  1. In your browser, navigate to the online application, Squoosh.app.
  2. Select the button in the middle of the page and then select an image from your computer.
  3. In the Edit panel on the right, toggle Resize and change the width to ~200 pixels.
  4. Under Compress, change the file type to WebP.
  5. Under Compress, change the Quality to ~70%.
  6. Note the overall change in file size displayed in those panels.
  7. Click the download button (bottom right) to save the image to your computer.

Optional Resources