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.
Course info
Rating
(29)
Level
Beginner
Updated
Jun 27, 2016
Duration
1h 55m
Table of contents
What Are Responsive Web Images?
Image Types
Responsive Image Use Cases
Responsive Image Techniques
Maximizing Performance
Description
Course info
Rating
(29)
Level
Beginner
Updated
Jun 27, 2016
Duration
1h 55m
Description

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.

About the author
About the author

Robert is a Microsoft MVP, a Progress Developer Expert (Fiddler), and a 3rd degree black belt in Tae Kwon Do. He regularly speaks at national and international events.

More from the author
Useful jQuery Plugins
Intermediate
3h 6m
Jan 17, 2014
More courses by Robert Boedigheimer
Section Introduction Transcripts
Section Introduction Transcripts

What Are Responsive Web Images?
Hi, welcome to this Pluralsight course on responsive web images. My name is Robert Boedigheimer. What we're going to look at in this course is with the popularity of responsive web design we want to focus on one of the most problematic areas which is efficiently serving the right images for the right device. In this first module we'll look at exactly what are responsive web images.

Image Types
In this module, we're going to focus on image types. It's very important to make sure that we understand the capabilities of each image type, and when it's appropriate to use it and when it's not appropriate to use it. So as everything else in computers there are a lot of trade-offs and decisions to be made but this if often where a lot of mistakes are made where people are simply choosing an inappropriate image type for their desired outcome.

Responsive Image Use Cases
In this module we're going to focus on responsive image use cases so there's just a few major use cases that are very common for responsive web designs and how they use images, so we're going to focus on those major use cases here.

Responsive Image Techniques
In this module, we're going to focus on the responsive image techniques. These will be the various approaches we're going to take to solve the use cases that apply for our particular scenarios.

Maximizing Performance
In this module, we're going to focus on Maximizing your performance. We talked previously about how responsive web images is mostly a performance issue. We've talked about choosing the right image types and serving the right raster images to support the design that we have for our responsive web design. We're going to focus on additional techniques here that we should be using to maximize performance with regard to images.