Working with Web Images
Overview
The multimedia web uses images. You will work with many different image formats and some of those image types are better suited for the web. This activity explores the images for the web and how to optimize images to be smaller, supporting smaller page weights thus 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
- Watch: 🎦 Image File Types (JPG, PNG, SVG, GIF) - Web Design Tutorial
- Watch: 🎦 Image Optimization for Web Pages
Basic Steps of Image Optimization
Often the original photos that we work with are very 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 the page. This 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:
- Crop the original image to the critical content keeping in mind design principles, like the rule of thirds, and the site or section purpose.
- Resize the image to the maximum size that you actually need in the design of your site. That image will then be saved in smaller formats, possibly with slightly different design to match the design and layout in smaller views, meaning, smart phone, tablet.
- Reduce the quality of the image to an acceptable level, thus reducing 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 in this class must be optimized in this course in order to reduce overall page weight.
Optimize an Image
- In your browser, navigate to the online application, Squoosh.app.
- Select on the button in the middle of the page and select an 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.
⚕️Help: "My image does not show up either locally or when I push to GitHub"
Whenever an image does not show up, it is usually due to a naming or path issue. Here are some things to check:
- Check that the image file actually exists in the images folder on your site.
- Check that file name and make sure the reference matches the filename, including the exact case used (Upper and lower).
- Check the file path to make sure you are not pointing to the wrong folder or location.
Relative Path Example:
This example references an image named "myimage.png" in a sub-folder named
"images."
<img src="images/myimage.png" alt="Xavier Rodriguez" width="100" height="200">
Absolute Path Example:
Absolute source references use external resources and start with a protocol.
<img src="https://resource.thesite.com/images/breakfast.svg" alt="Typical breakfast items">Optional Resources
- Web Image File Types - MDN