Responsive Web Images
Images make up more than 60% of the average web page's size today. This course will teach you how to efficiently provide the most appropriate image for the design and device.
What you'll learn
Images make up more than 60% of the average web page's size today. Responsive Web Design has become very popular for multi device support, but has been dogged by poor performance. In this course, Responsive Web Images, you will learn about image types, optimization techniques, and various approaches for selecting the best image for each situation. First, you'll learn the basics of responsive web design and how the most critical success factor is properly handling images. Then, you'll learn the differences between raster and vector images and discuss major raster image types. Finally, you'll learn the 4 major use cases for responsive web images, as well as the major approaches to responsive image techniques like JavaScript, picture element, srcset, and Client Hints. By the end of this course, you'll have a solid understanding of responsive web images which will allow you to optimize your own websites to be efficient as possible.
Table of contents
- Introduction 1m
- Raster vs. Vector 2m
- Demo - Scaling Raster Images 3m
- JPEG 1m
- Demo - JPEG Image Optimization 2m
- Demo - Progressive JPEG 1m
- Demo - Creating Progressive JPEG 2m
- GIF 1m
- PNG 1m
- WEBP 0m
- WEBP Support 1m
- SVG 1m
- Demo - SVG 2m
- Other Raster Alternatives 2m
- Icon Fonts 2m
- Web Fonts 3m
- CSS3 1m
- Summary 0m
- Introduction 0m
- <img> 1m
- Demo - <img> 2m
- JavaScript 2m
- Demo - JavaScript 6m
- <picture> 1m
- Demo - <picture> Art Direction 4m
- Demo - <picture> Image Types 2m
- Demo - <picture> High Pixel Density 1m
- Picturefill 1m
- Demo - Picturefill 2m
- srcset 1m
- Demo - srcset 4m
- Client Hints 1m
- Demo - Client Hints 7m
- sizes 1m
- Choosing Physical Sizes 4m
- Demo - Choosing Physical Sizes 1m
- Abstractions 1m
- Demo - Abstractions 3m
- Summary 2m
