Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,005 --> 00:00:02,003
- In the last video, we just looked
2
00:00:02,003 --> 00:00:06,000
at how we can use the image element and the srcset attribute
3
00:00:06,000 --> 00:00:09,008
to list a set of image files and have the browser decide
4
00:00:09,008 --> 00:00:12,003
which file to download and display
5
00:00:12,003 --> 00:00:15,004
considering the pixel density of the screen.
6
00:00:15,004 --> 00:00:17,004
What if instead we want the browser
7
00:00:17,004 --> 00:00:19,006
to consider the width of the viewport
8
00:00:19,006 --> 00:00:22,006
and to choose a file based on the size of the screen
9
00:00:22,006 --> 00:00:24,008
as well as the density?
10
00:00:24,008 --> 00:00:26,002
Let's look at a demo.
11
00:00:26,002 --> 00:00:29,008
It's very similar to the one I just showed in the last video
12
00:00:29,008 --> 00:00:34,006
with four images listed inside of a srcset attribute.
13
00:00:34,006 --> 00:00:37,008
But this time instead of saying one x, two x,
14
00:00:37,008 --> 00:00:39,003
three x, four x,
15
00:00:39,003 --> 00:00:43,001
we'll tell the browser how wide each file is,
16
00:00:43,001 --> 00:00:46,001
480w, 960w.
17
00:00:46,001 --> 00:00:52,003
That means 480 pixels wide, 960 pixels wide.
18
00:00:52,003 --> 00:00:54,009
Now the browser will dynamically choose
19
00:00:54,009 --> 00:00:57,009
which image to display based on a combination
20
00:00:57,009 --> 00:01:01,002
of device density and viewport width.
21
00:01:01,002 --> 00:01:03,002
This is not going to pick the right size image
22
00:01:03,002 --> 00:01:04,007
for the layout that you have.
23
00:01:04,007 --> 00:01:07,006
It's choosing the image based on an assumption
24
00:01:07,006 --> 00:01:12,001
that you need the image to be 100% of the viewport width.
25
00:01:12,001 --> 00:01:13,005
So why?
26
00:01:13,005 --> 00:01:16,007
Well, this system is designed to be fast
27
00:01:16,007 --> 00:01:18,004
and for the browser to make a decision
28
00:01:18,004 --> 00:01:19,008
about which image to download
29
00:01:19,008 --> 00:01:22,008
as early as possible in the page loading process.
30
00:01:22,008 --> 00:01:26,005
It chooses the image file before the CSS has been parsed
31
00:01:26,005 --> 00:01:28,008
and before layout has happened.
32
00:01:28,008 --> 00:01:30,006
So the browser has no idea
33
00:01:30,006 --> 00:01:32,002
what you're going to do with that image.
34
00:01:32,002 --> 00:01:35,000
It doesn't know what the size of the box is going to be
35
00:01:35,000 --> 00:01:37,002
where the image is going.
36
00:01:37,002 --> 00:01:40,001
If we know the image is going to be a lot smaller
37
00:01:40,001 --> 00:01:42,002
than the width of the whole page,
38
00:01:42,002 --> 00:01:45,000
we probably want to add more information here
39
00:01:45,000 --> 00:01:47,008
for the browser to use when it's making its choice
40
00:01:47,008 --> 00:01:49,009
about which file to grab.
41
00:01:49,009 --> 00:01:54,000
Here, I've used CSS to make this image half the width it was
42
00:01:54,000 --> 00:01:55,004
in the last demo,
43
00:01:55,004 --> 00:01:58,002
but the browser is still loading the bigger files.
44
00:01:58,002 --> 00:02:00,000
We don't need so much data,
45
00:02:00,000 --> 00:02:04,004
so let's tell the browser when to use the file.
46
00:02:04,004 --> 00:02:07,000
We'll use the sizes attribute for this,
47
00:02:07,000 --> 00:02:12,008
listing which size image to use at which media query.
48
00:02:12,008 --> 00:02:16,001
You can see now that the second photo looks just as good,
49
00:02:16,001 --> 00:02:18,000
but it's using the smaller files.
50
00:02:18,000 --> 00:02:19,009
It's using the files that are the right size
51
00:02:19,009 --> 00:02:22,001
for the layout that we have.
52
00:02:22,001 --> 00:02:25,009
HTML has a lot of power when it comes to providing options
53
00:02:25,009 --> 00:02:28,006
to the browser for downloading different size files
54
00:02:28,006 --> 00:02:31,004
of the same photo.
55
00:02:31,004 --> 00:02:33,004
Srcset gives you two options
56
00:02:33,004 --> 00:02:35,002
for communicating to the browser
57
00:02:35,002 --> 00:02:37,008
that there are a set of images available to use.
58
00:02:37,008 --> 00:02:39,008
You can specify which images are
59
00:02:39,008 --> 00:02:41,008
for which resolution of screen,
60
00:02:41,008 --> 00:02:45,003
or you can indicate which image has how many pixels
61
00:02:45,003 --> 00:02:47,008
and let the browser choose an image based
62
00:02:47,008 --> 00:02:51,007
on the combination of screen density and viewport width.
63
00:02:51,007 --> 00:02:55,000
The sizes attribute gives you a way to specify
64
00:02:55,000 --> 00:02:58,005
for the browser how much of the viewport's width
65
00:02:58,005 --> 00:03:02,007
that image will take up at which break point.
66
00:03:02,007 --> 00:03:06,000
In every case, you're giving the browser information
67
00:03:06,000 --> 00:03:09,006
in the HTML so it can decide intelligently
68
00:03:09,006 --> 00:03:11,006
which image file to download,
69
00:03:11,006 --> 00:03:14,001
especially considering the network conditions
70
00:03:14,001 --> 00:03:16,000
and the user's preferences.
5244
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
