HTML and CSS Reference
Optimizing your images
Every resource you add to your page is an extra request to the server and extra net-
work trip for the browser before it declares the page complete. Network requests are
typically the slowest components of a page load. This is especially obvious on mobile
devices when surfing websites on 3G or even lower connections. The smaller your
files are, the faster they will reach the browser.
If you can avoid using a large image, you are better off not using them.
If you are considering using a GIF format for your images, always use PNG. PNG
formats for images are far less heavy and much smaller. Even further, 8-bit PNGs are
significantly smaller in size.
If you are using PNGs, you should use PNG-8 with a full alpha channel that gives you
compatibility all the way back to IE6. Ensure you verify the final output to ensure they
are not too grainy or pixelated.
Tools for image optimization
There are build tools in HTML5 Boilerplate that will optimize images,which we will look
into in the next chapter. There are also standalone tools that are worth looking at,
when you want to compress a bunch of images in one go. If you wish to upload your
images and optimize them, you can do so at smushit.com/ysmush.it/ .
If you have 24-bit PNG images, you can convert them into 8-bit PNGs that have a full
alpha channel with this tool that you can download from pngmini.com . It is only for
Mac OS X.
GUIs and command-line tools that work on other Operating Systems are outlined at