Optimizing web graphics

Key Takeaways

[Music] Hi, my name is Susie and I'm from the Doodle team at Google. So, I'm going to show you a few tips that we use to make sure that pages load faster on the web. One easy tip is to crop out any excess white space in your graphic. Another tip is to use the correct file format for your graphics. Now, let's go to the computer demo. So, here I am in Adobe Photoshop. First, I'm going to crop this image because I've got a lot of excess white space here. Now, I'm going to go to file, save for web and devices. Now, this is where all the magic happens. Looks like GIF is much smaller. So, we're going to go with GIF, but I'm going to optimize it even more by adjusting the amount of colors. So, we could bring it all the way down to 16 colors, and the artwork has hardly changed at all. And the size of this file format is only 2K. Now, here is another piece of artwork that is completely opposite of the last one we saw. This one is really detailed and full of tons of color. Let's see how we can optimize this one. So, I'm going to crop it just like I did before. Going to go to save for web. And I'm going to try GIF first because GIF worked so well for us last time. But oh man, you can't see it on your screen, but on mine it looks horrible. I'm losing all that beautiful detail. So, I'm going to try JPEG. Oh, it looks so much better. It's like you're actually there. So, hopefully you've learned something cool and new about how to optimize graphics on the web. But be sure to visit code.google.com/speed for more tips.