Transcript

00:07 hello everyone welcome Weaver cast
00:09 Weaver cast is a weekly podcast
00:11 providing tips and tricks for
00:13 rapidweaver and web design I am Joe
00:15 workman an indie mac and web developer
00:18 based in San Francisco today this is
00:21 show number 15 and it is Friday January
00:24 17th Weaver cast is no longer than 1
00:26 minutes so let's get started so in
00:30 today's show we're going to talk about
00:32 images in you know today's web uh things
00:37 were a lot different than it used to be
00:38 we used to have static web pages with
00:40 static widths and you just threw an
00:42 image out there and an image had a
00:43 standard width and height and we were
00:45 good right but now these things these
00:49 things came up right we have all these
00:52 cool devices that are all different
00:54 sizes and not only are all these cool
00:57 devices that we all love and have in our
00:59 pockets um you know cool and they're not
01:02 only just different sizes they also have
01:04 new screen technology right so these are
01:07 retina displays so we're going to talk
01:09 about what a retina display is about how
01:13 we handle images on different sizes how
01:16 can we make our images look nice on all
01:18 devices and in some tips and tricks on
01:21 optimizing all of these images that we
01:23 need on our website so first off what is
01:28 a retina display okay um so it's obvious
01:31 that you know a desktop has a different
01:33 screen size and an iphone I think we can
01:35 all get that right but what is a retina
01:40 display what what is a Retina display
01:42 and why does that make a difference okay
01:44 why would an image that I provide on a
01:49 ret non retina display look blurrier not
01:53 as sharp on a display that is retina
01:57 right so retina displays is a great new
02:02 technology and essentially what that
02:04 means is there are more pixels on your
02:07 display so let's take a standard iphone
02:11 for example okay
02:13 let's pretend we had a Retina display
02:16 and a non-retina iphone 5 like this
02:19 right here even though the screen
02:22 dimensions would be identical for a
02:24 retina and non-retina display the retina
02:27 display has four times the number of
02:29 pixels because it has double the amount
02:32 of pixels wide and double the amount of
02:34 pixels height so effectively for every
02:37 one pixel on a non retina display we
02:39 have four pixels ok now the makers of
02:44 all these devices have done some great
02:46 technology that allows basically to
02:49 display non-retina images and content on
02:55 a Retina device and the way it does that
02:57 is it up scales everything so it takes
02:59 one pixel on that would have been shown
03:02 for a non retina and displays that over
03:05 four pixels on a Retina device so what
03:11 that means is is it's basically making
03:14 the image bigger physically it looks
03:17 like it's the same size but since there
03:19 are more pixels it's scaling the image
03:22 up so what we're going we're going to
03:27 review today is how to actually overcome
03:30 that how can we make our images look
03:32 sharp on both retina and non-retina
03:35 displays and then we're going to show
03:38 you some tricks on how to make images
03:41 you know download faster so your web
03:43 pages are snappy and zippy and finally
03:47 we're going to go over um you know how
03:49 to make them responsive so let's dive
03:52 into it so the first thing that we're
03:56 going to show you right now is the
03:58 simplest thing which is basically taking
04:00 an image and scaling it down so that it
04:03 looks good on both desktop and mobile
04:06 devices now in this instance i'm using a
04:12 theme from elixir graphics named ruby
04:15 it's a great theme and it has the
04:17 built-in feature that it will
04:19 automatically scale down images for you
04:22 now this feature is built into many
04:24 themes but it is a theme specific
04:27 feature
04:27 so if you know that you have a
04:29 responsive theme that actually supports
04:31 this let's go ahead and show you how to
04:34 do that so this couldn't be easier to do
04:36 all I did is added an out-of-the-box
04:39 image stack to my page and added an
04:42 image within it and that's really all
04:45 you need to do preview your site and
04:48 you'll notice that you have a beautiful
04:50 image and the theme takes care of
04:51 actually resizing that image for you now
04:55 a little side note about stacks images
04:57 any image that you add within stacks you
05:00 can double click and enter an image
05:03 editor now I want to note that all of
05:06 these layout settings that you're seeing
05:08 here will actually modify the image
05:11 directly so these max with max height
05:14 settings that you see here that means if
05:17 you add an image that is larger than 80
05:20 pixels by default into stacks stacks
05:23 will automatically scale at image down
05:25 to 800 pixels so if you are adding an
05:29 image that is larger than 800 pixels by
05:31 800 pixels you're going to want to make
05:33 sure that you go ahead and uncheck these
05:35 settings within stacks and then below we
05:40 have borders and shadows now again these
05:42 are not adding borders and shadows via
05:45 CSS if you use these image settings they
05:48 will actually add a border to your image
05:50 modify the image and upload the modified
05:53 image to your site so what if we were to
05:57 be able to provide a smaller resolution
05:59 image that is downloaded on mobile
06:02 devices and then the larger image will
06:05 be used when a user visits from a
06:07 desktop device that would really be a
06:10 great solution so on if a user visits
06:14 our website via a mobile device a lower
06:17 resolution image will be used and then
06:20 if that same user goes to a desktop
06:22 device the higher resolution image will
06:24 be used this is really the best of both
06:27 worlds because um you're getting your
06:30 users are getting a much more responsive
06:32 experience on their mobile device
06:34 they're getting the same image and sync
06:36 quality because the image is being
06:38 scaled down they don't need a
06:41 pixel image right but they're the web
06:45 site experience is better for them
06:47 because a 200 pixel or 300 pixel image
06:51 is going to download a lot faster on the
06:53 slower mobile bandwidth so in my sample
06:57 project I've replaced the normal image
06:59 stack with my fluid image stack what's
07:03 really special with this stack is it
07:06 will auto generate a thumbnail for you
07:08 so if we look at the browser experience
07:10 it actually looks exactly like we saw
07:12 before we have our large scaled image on
07:14 our desktop and then if we look at the
07:17 mobile device we have a the same scale
07:20 down image however if we look a little
07:23 bit closer will notice a big difference
07:25 here so here i have the safari dev
07:27 inspector and right now i have the image
07:30 highlighted on the mobile browser and
07:31 will notice that the actual natural size
07:34 of this image is 500 pixels by 31
27:37 pixels that's a lot smaller than the
07:40 actual image that i dragged in which was
07:42 over a thousand pixels wide so here i am
07:45 looking at the actual published files
07:47 for this web page and we'll see that the
07:51 full image resolution for the image that
07:55 is displayed on the desktop is 128
07:58 pixels by 800 and the size of the image
08:01 is 74 k if we look at the thumbnail
08:03 though um it has been scaled down to 50
08:06 pixels by 312 pixels so it's scaled down
08:09 proportionally but the size is only 12k
08:12 now in this particular instance we've
08:14 saved eighty-five percent bandwidth
08:16 utilization for one image now imagine
08:19 doing that across all of your images on
08:21 your web page now earlier I talked about
08:24 how retina displays on take up four
08:27 times the amount of pixels twice the
08:31 width and twice the height so
08:33 essentially all we would need to do to
08:36 make fluid image support retina devices
08:40 is to add an image into it that is twice
08:44 the size of the actual size that we'd
08:47 like the image to be displayed in and
08:49 then fluid image will dynamically resize
08:52 that image down to the actual max
08:55 with it you define within the stack
08:56 settings this way the image will look
08:59 beautiful on both retina and non-retina
09:03 devices now the next point I'd like to
09:06 make is actually optimizing images up
09:08 before you even add them into your
09:11 rapidweaver project a lot of times we'll
09:14 find an image on the web or we'll maybe
09:17 create an image in Photoshop and we'll
09:19 export it and really that image is quite
09:22 large um so a make sure that it's the
09:26 correct pixel dimensions first so resize
09:28 it down don't add a 10,000 pixel or a
59:32 megapixel image into your rapidweaver
09:34 project scale that image down to the
09:37 actual size that would be required to be
09:41 displayed on your website and another
09:44 great amazing tool that I can't
09:47 recommend more is it great tool called
09:49 image optum and it has amazing image
09:54 compression algorithms to really take
09:57 this same your same exact image and
09:59 compress it down with zero noticeable
10:03 difference so everyone thanks for
10:05 joining today I hope you really enjoyed
10:07 it I hope you learned how a little bit
10:09 on how to manage images within your web
10:11 sites and your app weaver projects and
10:14 how do how really important it is to
10:16 optimize your images for the best
10:18 website performance with just a few
10:21 small tweaks in your workflow you can
10:23 really get a much better looking and
10:26 faster website with some tips that we
10:28 viewed here so if you have any questions
10:31 comments or concerns please feel free to
10:34 contact me on Twitter and app.net I'm at
10:37 Joe workman you can always reach me with
10:40 email at support at Joe or net and I
10:44 appreciate if you have a look at some my
10:46 products go to Joe or chrome net and
10:48 look at some of the great rap we were
10:50 add-ons and mac apps that we have and
10:52 continue supporting of this podcast so
10:55 thank you very much everybody I hope you
10:57 have a wonderful day and thanks for
10:59 attending bye"}]