Optimizing web graphics
Articles,  Blog

Optimizing web graphics


Sahim: Hi, my name’s Susie, and I’m from the Doodle team
at Google. So I’m gonna 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 gonna crop
this image ’cause I’ve got a lot
of excess white space here. Now I’m gonna go to File,
Save for Web & Devices. Now this
is where all the magic happens. Looks like GIF is much smaller. So we’re gonna go
with GIF, but I’m gonna optimize it
even more by adjusting the amount
of colors. 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 gonna crop it
just like I did before. I’m gonna go to Save for Web, and I’m gonna try GIF first
’cause 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.

38 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *