1
00:00:00,006 --> 00:00:00,644
[SOUND]

2
00:00:00,644 --> 00:00:04,104
[MUSIC]

3
00:00:04,104 --> 00:00:09,382
[SOUND] Web-browsing devices come in all
sizes, resolutions, and pixel densities.

4
00:00:09,382 --> 00:00:14,430
Most of them can be in either landscape or
portrait orientation.

5
00:00:14,430 --> 00:00:18,650
And we can use media queries to adjust the
layout of our webpages,

6
00:00:18,650 --> 00:00:20,369
but what about images?

7
00:00:21,840 --> 00:00:26,620
The image element with the source, or SRC
attribute,

8
00:00:26,620 --> 00:00:30,680
is great if we just want to deliver one
image to every device and,

9
00:00:30,680 --> 00:00:34,070
in fact, that's still a valid technique in
many cases.

10
00:00:34,070 --> 00:00:38,160
The problems is that sometimes we need to
deliver different

11
00:00:38,160 --> 00:00:40,880
images to different devices.

12
00:00:40,880 --> 00:00:45,260
Say that we have an image that should take
up a lot of space on the screen,

13
00:00:45,260 --> 00:00:51,460
such as a photo background and we also
need to deliver it at two x resolution for

14
00:00:51,460 --> 00:00:56,780
high DPI screens, like Apple's retina
displays and most modern phones.

15
00:00:56,780 --> 00:01:02,300
However if we send this single image to a
mobile device that's only at one

16
00:01:02,300 --> 00:01:07,810
x resolution and has a small screen that
won't show most of the background anyway,

17
00:01:07,810 --> 00:01:12,380
it will just make the page load slower for
no added benefit.

18
00:01:12,380 --> 00:01:17,450
Put another way, the most basic approach
for delivering responsive images

19
00:01:17,450 --> 00:01:22,080
is to just send one big image to all
devices and hope for the best.

20
00:01:22,080 --> 00:01:25,170
As you may have guessed, we can do much
better than that.

21
00:01:26,700 --> 00:01:32,680
In this course we're going to talk about
two HTML attributes and an HTML element.

22
00:01:32,680 --> 00:01:36,580
The attributes are called, source set and
sizes, and

23
00:01:36,580 --> 00:01:39,220
the element, is the picture element.

24
00:01:39,220 --> 00:01:40,430
These pieces of markup,

25
00:01:40,430 --> 00:01:45,120
allow us to deliver the right image to the
right device based on resolution,

26
00:01:45,120 --> 00:01:49,590
pixels density, and other factors but
before we get in to those,

27
00:01:49,590 --> 00:01:54,460
I want to clear up two aspects of this,
that confuse a lot of people.

28
00:01:54,460 --> 00:01:57,600
First, why are we talking about using
elements and

29
00:01:57,600 --> 00:02:01,020
attributes when we could just use CSS
background images?

30
00:02:01,020 --> 00:02:05,050
After all, if we combine a mobile first
approach of media queries

31
00:02:05,050 --> 00:02:10,440
with CSS backgrounds, devices will only
download the images that they need.

32
00:02:10,440 --> 00:02:14,610
Much of the time, this is actually a
perfectly valid solution however,

33
00:02:14,610 --> 00:02:17,940
we can't do this for every image on a
page.

34
00:02:17,940 --> 00:02:21,090
Sometimes that's for technical reasons
whether it's for

35
00:02:21,090 --> 00:02:26,360
CSS layout restrictions, or because a
backend server that generates HTML

36
00:02:26,360 --> 00:02:30,565
needs to put images in the HTML and not in
the CSS.

37
00:02:30,565 --> 00:02:36,012
[SOUND] A better reason is that many
images are content.

38
00:02:36,012 --> 00:02:41,340
Including these images is good for SEO,
accessibility, RSS Feeds, and basically

39
00:02:41,340 --> 00:02:47,130
any other mechanism that benefits from
parsing a webpage into another format.

40
00:02:47,130 --> 00:02:51,840
As a general rule, images that are content
should go in the HTML, and

41
00:02:51,840 --> 00:02:54,220
images that are purely for presentation,

42
00:02:54,220 --> 00:02:58,520
such as a repeating wallpaper background,
should go in the CSS.

43
00:02:59,940 --> 00:03:04,130
Second, you might be wondering, why not
just use JavaScript to figure out which

44
00:03:04,130 --> 00:03:07,040
image to deliver to the client browser?

45
00:03:07,040 --> 00:03:10,970
In some instances this might be necessary
but generally we shouldn't

46
00:03:10,970 --> 00:03:16,080
have to rely on JavaScript to do something
as simple as deliver an image file.

47
00:03:16,080 --> 00:03:20,890
JavaScript is much more error prone than
HTML and CSS and again,

48
00:03:20,890 --> 00:03:26,760
if we deliver content using JavaScript
instead of HTML, there are many instances

49
00:03:26,760 --> 00:03:32,620
where content [UNKNOWN] might not be able
to grab all the content as we intend.

50
00:03:32,620 --> 00:03:35,880
If this doesn't really make sense so far
don't worry.

51
00:03:35,880 --> 00:03:40,790
As we start to use these bits of mark up,
we'll see why they're so powerful.