W01 Learning Activity: Working with Web Images
Overview
Most websites contain not only words, but also images. Some image formats are better suited for the web than others. This activity introduces 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.
Prepare
File: ▶️ Image File Types – [ 1:55 minutes ]
File: ▶️ Basic Image Optimization – [ 1:36 minutes ]
Three 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 of image optimization:
- 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.
- 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.
- 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.
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.
There are many applications that can be used to edit and optimize images including those listed under Editing on this resource site. In this activity, you will be introduced to and use a free, online application named Squoosh.app.
- In your browser, navigate to the online application, Squoosh.app.
- Select the button in the middle of the page and then select any large image from your computer.
- In the Edit panel on the right, toggle Resize and change the width to ~200 pixels.
- Under Compress, change the file type to WebP.
- Under Compress, change the Quality to ~70%.
- Note the overall change in file size displayed in those panels.
- Click the download button (bottom right) to save the image to your computer. At this point, you may elect to change the file name to something more manageable and appropriate given the naming conventions used in the course.