WDD 130: Web Fundamentals

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

Image Types

The following video introduces the popular types of images used on the web.

As described in this video, the most common types of images for the web are:

• JPEG / JPG: Typically used for photographs and complex images. Uses a compression that looses some information but can greatly reduce file size.
• PNG: Typically used for graphics, logos, and images requiring a transparent background. Uses compression that does not lose information and supports alpha transparency.
• GIF: Typically used for small animations and simple graphics. Limited to 256 colors, but does support basic transparency and animations.
• WEBP: A more modern format that supports better compression than JPG and PNG while also providing for animation and transparency. Can be used as an alternative to JPG and PNG, but it is not quite as popular at this point.
• SVG: Typically used for logos, icons, and text that need to scale cleanly to any size.

Including Images on a Web Page

Once you have the image you would like to include on your page, you use the image tag as follows:

<img src="temple.jpg" alt="A picture of the temple.">
<img src="our-process.png" alt="A graphic describing the company's process">
<img src="logo.svg" alt="Company logo">

Notice that each of these examples uses a different type of image format. You do not have to do anything different in the html to use them. You just include the file name.

Also, remember that the alt text is very important for many reasons including, to provide a description of the image in case it does not load right away, to provide information for robots that might crawl your page, such as for search engine optimization, and for users that may need screen readers to access your content.

Image Optimization

It is important to make sure that the images you include on your page are optimized for a good user experience. If you have images that are very large, it will take longer to load the page and will require your users to use more data.

The following video shows how to optimize images using the free online tool Squoosh.app .

Three Basic Steps of Image Optimization

The original photos that we use are often 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:

1. Crop the original image to focus on the most important content.
2. Resize the image to the maximum size that is required in the design of the web page.
3. Reduce the quality of the image to an acceptable level which will reduce its file size.

Activity Instructions

For this activity you will optimize a large image and include the smaller version on a web page.

There are many applications that can be used to edit and optimize images. In this activity, you will use the free, online application, Squoosh.app.

Find the Files

1. Open VS Code to your course repository folder.
2. Navigate to the week01 folder. In this folder you will see:
   • images.html: The html file where you will include your image.
   • The images subfolder: This is the folder that contains the large image and where you will place your small image.
   • images/temple-large.jpeg: In the images subfolder, this is the large file that needs to be optimized.

Optimize the image

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.

1. In your web browser, navigate to the online application, Squoosh.app.
2. Select the button in the middle of the page and upload the temple-large.jpeg file from your computer.
3. In the Edit panel on the right, toggle Resize and change the width to 800 pixels.
4. Under Compress, try changing the file type and adjust the quality until the file is less than 100KB.
5. Click the download button (bottom right) to save the image to your computer. Change the name of the file to be temple-small with whatever file extension matches the format you selected and save it back in the week01/images folder.

Update the html file to include your new image

1. Open the images.html file in the week01 folder.
2. Right-click the images.html file and open it in Live/Five Server.
3. Notice how large the image is.
4. Update the img tag in the html file to refer to your new image.
5. View the page again in your browser and notice how much smaller the image is on your page.

Submission

You do not need to submit anything yet for this learning activity. When you have finished the remaining learning activities for this week, you will return to Canvas to report on your progress.