WDD 131: Dynamic Web Fundamentals

W03 Learning Activity: Image File Formats

Overview

You have worked with various image formats some of which are better suited for the web. Responsive image design aims to reduce page weights and deliver optimized for different screen sizes. This activity explores the SVG (Scalar Vector Graphic) and the WebP image formats, which offer better compression for faster page loads.

Prepare

• Review: Video ▶️ Image File Types for the Web – [ 1:54 minutes ]
• Reference: 📑 WebP image format – developers.google.com

  Some terms that you may not know yet include:

  • Lossless Compression – File compression that maintains the original data using sophisticated algorithms that replace redundancy.
  • Lossy Compression – File compression that uses approximations and partial data to represent the original media source.
  • Transparency – The image property representing how much of the background color is visible through the image.
• Reference: 📑 Image file type and format guide – MDN

  Note the summary of the SVG and WebP file formats presented in the table.

Activity Instructions

WebP

1. In your browser, navigate to this large (~3900 X 2633) image: Landscape (pexels.com).
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 "landscape.jpg".
   How big, in terms of memory size, is the file?

   2.87mB or 2868kB

3. In your browser, navigate to the free, JPG to WebP, online file converter application at cloudconvert.com.
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.

SVG

Scalable Vector Graphics are represented as points on a grid. You can open an SVG file in a text editor and change the values.

1. Download this svg file to your computer.
   How big, in terms of memory size, is this SVG file?

   At only 0.433kB (kilobytes), the file is quite small (less than 1kB).

2. Open it in a web browser. It should look like this. Notice how the image remains sharp and clear. This is because it is a vector image and not a bitmap image.
3. Now open the arrow.svg file in your text editor (VS Code).
   What does an SVG file look like when opened in a text editor?

   

4. Look at the code.
   What three shapes are referenced to create this icon?

   circle, polyline, and line

   What is the purpose of the viewBox attribute?

   It defines the coordinate system for the SVG view box. The first two values are the x and y coordinates of the top-left corner of the view box. The last two values are the width and height of the view box.

   The native width and height of this graphic is 24 pixels by 24 pixels. viewBox="0 0 24 24"

   What is the purpose of the fill attribute?

   It defines the color used to fill the shape. The value fill="none" means that the shape is not filled.

   What is the purpose of the stroke attribute?

   It defines the color used for the lines of the shape. The value stroke="#555" is a gray color.

   What is the purpose of the stroke-width attribute?

   It defines the thickness of the lines used to draw the shape. The value stroke-width="2" is 2 pixels.

   What is the purpose of the stroke-linecap attribute?

   It defines the shape of the line ends. The value stroke-linecap="round" means that the ends of the lines are rounded.

5. Try changing the color of the line to the hex value for red.
   Save the file and open it again in a web browser, did you see the color change?

Icon Libraries

Free and open-source CSS Frameworks like Bootstrap and icon libraries like Font Awesome and iconfinder.com make it easy to use SVG icons in your projects.

SVGs can be used in your HTML in several different ways including downloading and using the external image, using a sprite, embedding the svg code, and with class names supported by a CDN (Content Delivery Network) whenever larger sets of icons are needed.

The following example uses Bootstrap to get a download a Facebook SVG file and adds it to a project. This method is more efficient as only the necessary vector data for the icon is loaded resulting in a significantly smaller file size than using the entire framework or library.

1. Open the Bootstraps icon library and search for facebook icon.

   These are just examples of the same search for free SVGs using:
   — IconFinder
   — Font Awesome

2. Select the facebook icon and choose Download SVG.

   

3. This lightweight SVG, under 500 bytes (0.5kB), can be used directly using an img tag's src attribute, allowing for scalable vector graphics at any desired width.

   <img src="images/facebook.svg" alt-"Facebook Icon">
     

4. When we compare an icon from Bootstrap to Font Awesome to an SVG file, there is a remarkable filesize savings when using SVG.