WEBVTT FILE





1
00:00:06.109 --> 00:00:13.349
in this video we're gonna learn how to use a image sprites so first of all how

2
00:00:13.349 --> 00:00:20.850
do we define image sprites basically many websites like Apple they will avoid

3
00:00:20.850 --> 00:00:26.910
loading mini pictures at a time and rather than doing that they will use one

4
00:00:26.910 --> 00:00:36.570
master image and they will use CSS positions to display images that are

5
00:00:36.570 --> 00:00:42.450
only chunks of that big image so for instance if when I display this piece of

6
00:00:42.450 --> 00:00:47.129
the image we just need to use the CSS position of the image and the dimensions

7
00:00:47.129 --> 00:00:54.320
of the image are the websites like Amazon are using the same way of doing

8
00:00:54.320 --> 00:01:01.859
utilizing image sprites which makes the overall user experience more smooth and

9
00:01:01.859 --> 00:01:07.110
it's avoids all the multiple HTTP requests and all the flickering of

10
00:01:07.110 --> 00:01:13.770
pictures so let's build out our own example so what we're trying to achieve

11
00:01:13.770 --> 00:01:20.280
here so we're trying to use this picture so we want to be able to display only

12
00:01:20.280 --> 00:01:24.990
one chunk of the picture using some coordinates and the dimensions or the

13
00:01:24.990 --> 00:01:36.710
picture to display so let's create a an image first in the body

14
00:01:42.330 --> 00:01:56.670
and let's give you an ID in which one and let's tile it's gonna go in each one

15
00:01:59.400 --> 00:02:16.320
so so we want the width to be hundred pixels and height 300 pixels as well and

16
00:02:16.320 --> 00:02:29.190
we want to set the background using the using the picture okay now we need to

17
00:02:42.940 --> 00:02:47.769
tell the browser or what are the coordinates of the position we're

18
00:02:47.769 --> 00:02:54.180
starting from so what's going on here is that we're starting from zero zero and

19
00:02:54.180 --> 00:02:59.620
we are displaying a picture with dimensions 100 pixels per hundred pixels

20
00:02:59.620 --> 00:03:09.040
which is this bit so so that's that point has coordinates 0 0 if we move to

21
00:03:09.040 --> 00:03:15.340
another point here the coordinates use are not the ones shown on the screen now

22
00:03:15.340 --> 00:03:23.080
which are 310 and 304 but we need to use - 310 and - 304 because we are looking

23
00:03:23.080 --> 00:03:34.959
at our position relative to this this point and basically 0 0 is equivalent to

24
00:03:34.959 --> 00:03:40.510
the dimensions of the picture so a coordinates of 0 0 is the same as

25
00:03:40.510 --> 00:03:50.219
coordinate coordinates of 2248 1500 and we can prove that if we change

26
00:03:50.219 --> 00:04:05.370
this 0:02 the dimensions of the picture I will get exactly the same result

27
00:04:05.370 --> 00:04:18.039
okay so now let's go for another example let's try to show the trunk starting

28
00:04:18.039 --> 00:04:29.880
there and ending that so the starting points we need now is gonna be - 700 -

29
00:04:30.810 --> 00:04:33.810
and the width

30
00:04:48.060 --> 00:04:53.190
we're gonna go for 500 by 500 for instance

31
00:04:53.190 --> 00:04:59.400
yeah and we're we seen exactly what we wanted so he wants it that that's bit

32
00:04:59.400 --> 00:05:05.820
and that's what we are seen here so that's how image sprites work it is a

33
00:05:05.820 --> 00:05:11.010
powerful tool and it's something to keep in mind when we're doing web design and

34
00:05:11.010 --> 00:05:17.720
also they allow it as a way of maintaining website design as well