Transcript

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