Optimizing Images11:14 with Dale Sande
Images are the number one perceived performance fail of any web app. A slowly loaded image can really impact your user's experience. Through optimization and responsive image loading techniques you can have a major impact on your app's performance.
Images were never part of the original HTML spec. 0:00 And ever since their introduction, images have yet 0:04 to be truly optimized for the web. 0:06 JPEG, the most commonly used image format, 0:09 has seen multiple iterations to increase performance and optimize output. 0:11 Surprisingly, we have a plethora of tools and techniques available for 0:17 image compression. 0:21 But it's still not hard to come across poorly compressed images. 0:22 There are basically two types of images, raster formats like JPEG and 0:26 PNG, and vector like SVG. 0:31 Now, when it comes down to file size, 0:34 SVG wins hands down due to the fact that it's more math than pixels. 0:36 Image optimization with raster images, on the other hand, is more complicated. 0:40 So, let's cover some basics for raster image optimization. 0:47 >> For most of you out there building websites, 0:51 your image format of choice will either be JPEG or PNG. 0:54 And typically your image processing tool be either Photoshop or Sketch. 0:58 So in this example we're gonna use Photoshop. 1:02 So here we have a photo of Mount Rainier. 1:04 I need to resize this down to 1440 wide and 1:07 then we're gonna make a cropping of this image that's gonna be 1:12 1440 by 623 the size of the banner that we want from the website. 1:16 And then we're going to export this as a JPEG and a PNG file. 1:22 So let's do our first export as a JPEG. 1:26 And then we're going to use JPEG with a quality of 80% at 20% compression. 1:32 Then we're gonna name this first file 1440_PSD_export and 1:37 then once we get this done here, export. 1:43 And now we're gonna go back and 1:46 we're gonna export the same image as a PNG using quick export PNG feature. 1:49 Again using the same name at convention 1440_PSD_export, and 1:54 then it's just gonna have the PNG suffix so we can tell the difference. 1:58 So using the default JPEG save as function we get a file that is going to be 371k. 2:01 It's not horrible. 2:09 The same image saved as a PNG comes in at 1.7 meg, that's huge. 2:11 From this simple example we see that JPEG is clearly a winner but we can do better. 2:16 So a popular compression tool is TinyPNG that also uses JPEG's. 2:21 This web based tool is pretty simple to use. 2:26 You can quickly upload your JPEG's and PNG's and see how much weight we can shed. 2:28 So right away we see that TinyPNG, 2:35 I did a little bit on the JPEG but huge savings on the PNG. 2:38 So we download our assets, let's unpack these things and then rename our files. 2:42 All right, so then get in here. 2:47 We'll replace PSD with tiny, so 2:50 that we remember where we actually got these files from. 2:52 So, we save some bytes on the JPEG, by TinyPNG's process for 2:56 compressing PNG's is impressive. 3:01 I mean, we went down to 478k. 3:05 I mean, that's huge. 3:08 So, let's put these with the others and clean up our desktop here real quick. 3:11 So there's another format out there that you may or may not have heard of. 3:16 It's called WebP. 3:19 Let's run these same images through an online converter and 3:21 see if we can get these even better compressed. 3:24 So introduced back in 2010, WebP supports alpha transparency and 3:27 is super superior to the regular PNG compression. 3:32 But it's only currently supported by Chrome and Opera. 3:36 So let's get our first one in here and we're gonna rename this downloaded file so 3:40 that we remember that it was a JPEG image, because now it has a .webp suffix. 3:48 And getting info we see that we lost 100k from the original JPEG, 3:53 that's pretty good. 3:58 So let's put that into our folder. 4:00 So going back to the converter, let's upload the PNG that we got from Photoshop. 4:04 Convert that download. 4:11 Let's go get our file, again we're going to rename this, so 4:15 do the PSD to PNG, so remember that this came from the PNG file. 4:20 And getting info we see here that our PNG to 4:24 WebP is now 190k, I mean, this is huge! 4:29 Looking at all these files that we exported, 4:35 we can see the vast differences in file sizes. 4:37 WebP is clearly the winner here, but since not all browsers support WebP I 4:41 do have a link in the teachers notes on how to support this using Modernizr. 4:46 Be sure to check that out. 4:50 There's another somewhat radical approach to image compression 4:53 that plays well with high DPI images. 4:56 So let's go back to that Mount Rainier image except this time using a 2880 wide 4:59 image, basically two times the size that we want. 5:06 So let's get this 2880, okay. 5:11 Then we need to crop this down to 2880 by 1246, 5:14 again, this is gonna be twice the size that we want in our view. 5:22 Now you'll get this cropped, looking good. 5:29 So, when we export the JPEG from Photoshop, 5:32 we're gonna set the image compression value to zero. 5:35 So, it's basically a 100% compression. 5:39 So, yes when viewing this in full size in a browser, it's gonna look grainy, 5:43 it's gonna look weird. 5:47 But when physically compressed into a 1440 wide space, 5:49 it's going to look pretty good. 5:51 So we're gonna rename this file 5:54 to 2880_100pct.jpg, 5:58 export, there we go. 6:03 So this 2880 size image at 80% compression will be too large, 6:06 when we export the same image at 100% compression, it comes in at 87k. 6:11 That's even less ;less than the WebP image. 6:17 If we were to run these same images through TinyPNG, 6:20 there will little that it can do to affect this file size. 6:22 So, to actually see the results, let's set up some easy HTML to put our images into. 6:26 I have a project started over here. 6:33 So, opening this in a browser, 6:35 we're gonna see these images stacked on top of each other. 6:38 I use this image because of the clouds. 6:43 As you add compression to images like this, 6:45 there's usually some banning effects. 6:48 And the results are gonna vary. 6:50 Looking at all these images though, it's difficult to tell the difference 6:52 between the large file sizes and the massively compressed ones. 6:56 I'd argue that any of these compression techniques will yield positive 7:00 image results and your users are gonna see great images. 7:04 The name of the game here is to get these images file size down as small as possible 7:08 to improve delivery performance, and basically reduce any issues of latency. 7:14 Opening this view in the inspector, we can see how fast these images downloaded. 7:20 And we have some pretty good results. 7:25 And as we see here, our 100% compressed JPEG came back in at 7 milliseconds. 7:27 That's wicked fast. 7:35 >> As we see here, there are some pretty basic things we can do to 7:38 optimize our image asset and get pretty great results. 7:41 But if you are managing a site that has hundreds of images and you get new ones 7:45 every day, these manual processes can get pretty annoying after a while. 7:48 There has to be a better way to automate this. 7:53 >> Let's say that the art department just sent you these images to put into 7:56 the site, all cropped to size and ready to go. 7:59 But looking at the total weight of the images, we're at almost 9 meg, 8:02 that's unacceptable. 8:06 So let's run these through TinyPNG, and see if we can reduce our file sizes. 8:08 Nice. 8:18 As we can see here, we shed 7 meg off of our image sizes. 8:19 So let's download these assets, unzip them, and then open them up so 8:23 we can view our results more closely. 8:28 Getting info on our folders, 8:31 we're gonna see that we went from the original 8.7 meg to 1.9 meg. 8:33 That is a huge savings. 8:38 And going into the directory as we know, the quality of the images are still great. 8:40 And we got great file compression and great image quality. 8:44 TinyPNG is awesome, but let's automate this. 8:48 So to automate image compression, 8:52 I looked at a few projects that seemed pretty promising. 8:54 A word of warning, while these image optimization methods work really well, 8:58 I suggest not making this part of your default bill process or watcher. 9:03 These optimization processes can take time, and 9:08 a few actually even may end up costing you money. 9:11 So it's best to keep these as individual tasks. 9:13 The first option is using TinyPNG's open API. 9:18 To use their API we can use gulp-tinypng. 9:21 Which is basically an easy to use wrapper for their API, 9:25 to use this though you do have to register for an API key with their app. 9:29 I'm not exposing my API key here of course and neither should you. 9:34 It's pretty straight forward. 9:38 Point to all of the images in the source directory, run them through TinyPNG and 9:40 then move them to a new destination. 9:44 In the prompt, let's run the gulp task that we just created, 9:47 it would be gulp-tinypng. 9:51 Run and then basically this is gonna run 9:53 through the exact same process like it does online. 9:56 So now let's open the new directory images that we processed and see the results. 10:00 So clicking on this and 10:05 getting info we see that we are at 1.9 meg again as expected. 10:06 This is exactly as if that we ran it through the web interface. 10:10 Next I looked at Gulp Image. 10:14 Gulp Image is pretty cool and it's totally free and 10:16 requires no API call and it has great results. 10:19 At the time of writing this though there are some issues with some of 10:24 the compression format, so the gulp file should look like this. 10:26 Basically we have to be specific as to what compression formats we will use 10:30 as some will throw errors. 10:34 So let's run the gulp task and see the results. 10:36 So going into the disk directory here, getting into images and 10:39 doing a command info we see that we are actually down to 1.3 meg. 10:43 This is extremely impressive, and 10:48 as we can see here our image quality is none for the worse. 10:51 In all, these are great solutions for 10:55 running automation image compression processing within your app. 10:58 And this is really gonna help to keep your file sizes down, 11:04 your size performance fast, and keep your latency at an absolute minimum. 11:08
You need to sign up for Treehouse in order to download course files.Sign up