Image File Formats
Overview
You have worked with many different image formats and some of those image types are better suited for the web. The work of responsive image design is to support smaller page weights and to deliver content based upon screen size. This activity explores SVG (Scalar Vector Graphic) and the WebP image format which offers better compression to support faster page loads.
"WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster." - developers.google.com
The SVG format is a vector image format that is used for two-dimensional graphics with support for interactivity and animation. "As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text." - MDN
Prepare
- Review common image formats: Image File Types - by WebFlow (2:22 mins, Image File Types Transcript)
- Reference: 📑 WebP image
format - developers.google.com
Some terms that you may not be familiar with include:
- Lossless Compression - File compression that maintains the original data using sophisticated, redundancy, replacement algorithms.
- Lossy Compression - File compression that uses approximations and partial data to represent the original media source.
- Transparency - The image property representing the amount or level of transmission of background color 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.
"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 (meaning have virtually zero market share)." - MDN
Activity Instructions
- In your browser, navigate to this free photo sharing site (Pexels) image: Landscape (~3900 X 2633 pixels in original dimension size).
- 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 to "landscape.jpg".
How big, in terms of memory size, is the file?
2.87MB or 2.868KB - In your browser, navigate to the free, JPG to WebP, online file converter application at cloudconvert.com.
- In the application, select the landscape.jpg image file that you just downloaded.
- 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 elseWhat 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. - 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.
Video Demonstration: ▶️ Converting a large jpg file into a webp file format [ 3:09 minutes ]
Optional Resources
- Image Optimization: Review general principles on using web images.