0:09 okay so responsive sizing how can we
0:11 define multiple images so we can display
0:14 different images to face on the size of
0:17 the browser so you notice at the very
0:19 top of the picture stack we have a
0:20 little plus button and if we click on
0:22 that you'll notice that there's two
0:23 different options I'm gonna I mean we're
0:26 gonna look at warehouse really quick but
0:28 we're gonna use drag and drop for the
0:30 rest of this video so let's look at what
0:32 warehouse gives us if you click on
0:34 warehouse you'll notice that you can
0:35 define just like the normal picture
0:37 stack on an image and a retina image and
0:41 again the if you don't define a retina
0:43 image it won't be used but it definitely
0:46 recommended you to supply both then you
0:48 supply the type of image so if if this
0:51 is a gif or an SVG or our web P or even
0:54 an mp4 right this is really cool so if
0:57 you haven't actually an mp4 file um that
1:00 has no audio you can actually insert it
1:03 onto the page using the picture stack um
1:05 as an alternative so that's really cool
1:07 uh and then below we have a media query
1:10 and this allows us to define where this
1:14 image is going to be used so is it gonna
1:16 be used on medium screen devices large
1:18 screen devices oh you know a certain
1:20 aspect ratio will it be used in portrait
1:24 mode so if you want to display a
1:25 different image um when a device is in
1:28 portrait mode you can do that you can
1:31 target dark mode and then you can also
1:33 per target prefers reduced motion and
1:37 this is useful for it if you're actually
1:39 are supplying an mp4 um if you define
1:44 you can also define a JPEG fallback if a
1:48 person prefers reduced motion or if you
1:51 you can supply a gif or offer a static
1:54 version if in someone's browser they
1:57 prefer reduced motion right this the
1:59 ability to kind of be nice to your user
2:01 so that if they actually prefer um you
2:04 know to save on bandwidth um this option
2:08 will serve up a static image rather than
2:10 something like a gif or an mp4
2:12 and last but not least if you're a super
2:15 uber geek you can do a custom media
2:17 query and do something slick there okay
2:21 so the rest of this video we're going to
2:23 be looking at drag and drop just because
2:25 it's a little bit simpler
2:27 okay then me worrying about copying and
2:30 pasting URLs from my server okay so here
2:34 we are
2:35 I can then inside here I'm going to drag
2:38 and drop a couple images
2:40 so here I've set up a picture stack so
2:42 that we have different images on small
2:44 medium and large devices so when you are
2:48 using on the actual default picture
2:50 stack level we're gonna actually define
2:53 these small images these are they're
2:55 going to be the images that we define on
2:56 mobile devices okay and then if we click
3:00 on our various rules that I added
3:02 so here I've added a large rule so if we
3:05 click on this will notice that I have
3:07 added two images that are going to be
3:09 used for large devices a non retina and
3:12 retina version and then I set the media
3:15 query to be large and then I added
3:17 another size here for medium and then
3:22 ice plotted my eye supplied the medium
3:24 image and medium retina images now you
3:28 might be thinking that's a lot of images
3:30 that is six different images that we
3:32 need to now create four different sizes
3:35 right yes it is um so what are some
3:38 ideas that we could do you know that's a
3:40 lot of work what can we do to speed that
3:42 process up a little bit so I don't want
3:45 to make this entire video a sales or an
3:48 image optimization video but I just want
3:52 to give you a small tip so he right here
3:54 was the main image that I had for this
3:57 image right very large image
3:59 I just got it off Adobe stock right um
4:02 basically I used an app called retro
4:05 batch now there's a lot of really great
4:08 apps out there but retro package is a
4:10 really cool one and it basically allows
4:13 me to create this workflow where
4:15 essentially I could say run and it asked
4:18 me what images I want I click on that
4:20 image and I say load images and what it
4:23 does is it automatically creates all of
4:26 these images for me in for in about five
4:29 seconds right um really really cool
4:33 now one thing it doesn't isn't fantastic
4:36 on is optimization so if you look here I
4:39 actually ran it through three of my
4:41 favorite image optimization programs
4:45 um image Optim image shrinker and JPEG
4:49 mini now again I'm not gonna make this
4:52 entire video all about image
4:54 optimization for this particular image
4:57 image drinker wins big-time right if you
5:01 notice here like though our largest
5:03 image is going to be the large retina
5:06 image this particular one is 3000 pixels
5:09 wide eye and image shrinker gets it down
5:12 to 620 kilobytes Wow blow your mind
5:15 um image optimistic and JPEG mini gets
5:20 it down to you know 1.2 right but an
5:22 image trigger for this particular image
5:25 is the winner um you know you kind of
5:28 learn over time which of these three
5:31 apps will do better on particular images
5:34 image shrinker for this particular image
5:36 wins hands down and it will win for a
5:38 lot of JPEG images I'll make sure if you
5:42 want to check out retro batch its from
5:44 flying meat um I will make this
5:46 particular workflow available um and you
5:49 know you just basically go through here
5:51 and the scale set the sizes that you
5:52 want for each um you know here I said if
5:55 we're kind of like a good
5:57 you know hero header sort of image this
5:59 is three thousand pixels two thousand
6:01 fifteen hundred twelve hundred a
6:02 thousand and six hundred right so um
6:05 adjust these sizes for the size image
6:08 you need please do that don't you don't
6:11 want to have a three thousand scaled
6:13 image for something that's only going to
6:15 be a small portion of your webpage right
6:16 so you're gonna have to modify these
6:18 values a little bit but um great app
6:22 okay so back to the pitcher stack um
6:24 you'll notice that if you want to just
6:26 keep adding you can add as many
6:28 conditions as you want um in here and
6:31 then just drag and drop the images in so
6:33 if you wanted to supply a special one
6:34 for dark mode and stuff like that you
6:36 can just add on as many conditions as
6:38 you want
6:39 now the key of this the order is very
6:41 important for these rules essentially
6:44 what it does is it it does the first one
6:47 that matches its rule wins so if we are
6:51 on a desktop device it'll come through
6:54 the top and go hey I'm a desktop
6:58 I'm large boom this first rule matches
7:01 me cool I'm gonna go and find the image
7:04 or retina image that I needs okay let's
7:07 say we're on an iPad it's gonna go
7:09 through and say it's gonna hit this
7:11 first condition which is large and say
7:12 nope I'm not large I'm gonna keep going
7:15 minimum device with 640 pixels Hey
7:18 that's me okay that means I'm gonna then
7:22 use these images and essentially um the
7:25 default image that you add to the main
7:27 picture stack is your default catch-all
7:29 image okay which is should be your small
7:32 device so if the iPhone comes in it's
7:35 gonna say okay cool
7:37 I'm not item not 1200 and you know I'm
7:39 not a thousand pixels
7:40 I'm not 640 pixels boom I'm gonna go
7:43 ahead and use the default image that's
7:45 despite it that's supplied in the in the
7:47 picture stack so hopefully these these
7:49 rules are very important to order um so
7:53 the topmost rule that it finds wins
8:02 [Music]
8:05 you"}]