Below are a list of best practices and techniques that you should be using while building out your HTML5 banners (and other websites).
CSS should be clear and concise. You should not have any rules that are unused. You can check for unused styles by running the "Audit" feature found in Chrome's Developer Tools. Try to combine rules if possible to retain wasted bytes.
JS should be clear and concise. Try not to use external libraries at all if possible. Try to leverage recursive functions whenever possible to reduce byte-size.
All images with transparency, text, and/or hard edges that need to be sharp should be PNG. All other images should be JPEG. When working in Photoshop, make sure to save the image by using the File > Save for Web dialog.
JPEG is a lossy image format, which means that the image data is lost during compression. The more compression used, the lower the quality. Lower quality images tend to have "artifacts" and blurry edges, making it unsuitable for text. For most images, you should be using these Save for Web settings:
- Quality: 60
- Blur: 0
- Optimized: yes
If the image quality is poorer than usual, try increasing the quality incrementally to 80, 90 or 100. Do note that the image may have been compressed previously if you are re-editing a JPEG. The bottom-line target you should be aiming for is a low file size. Smaller images can typically get away with the higher qualities. ~20KB is a typical target to aim for.
PNG is a lossless image format, which means that the original image's quality is retained after compression. PNG is optimal for images that have only a few colors or have an emphasis on sharp edges (e.g. text, buttons). PNG also supports transparency. PNG files can be saved into two formats: PNG-8 and PNG-24.
Due to the nature of how PNG works, PNG can be incredibly efficient for some use cases and terribly inefficient for others. If used properly, a PNG can be much more efficient than an equivalent JPEG version.
PNG-8 is the "more efficient" version of PNG. PNG-8 is similar to GIF. It only supports up to 256 colors, so use this format for simple images like text. PNG-8 also supports transparency, but only one alpha channel, so that means that you either get 100% opacity or 0% opacity, no in-between. All partially transparent pixels will have a "matte" color saved behind it, so make sure to match the matte with the background color the image will be on top of. Also, like GIF, when you have an image with a transparency, then the transparent "color" takes up one of the 256 colors; matted transparent pixels will each take up a color as well (think of a 50% black pixel on top of a white background as a 50% gray pixel).
PNG-24 is what most people refer to as simply PNG. PNG-24 supports full alpha transparency, meaning you can a truly transparent image. The tradeoff is a much larger file size on some images. On other images, it can be the same size as a PNG-8 or slightly larger.
Despite being lossless, PNG includes compression. PNG uses a lossless compression method known as DEFLATE, which essentially "simplifies" the image's data by predicting what the colors will be. Since PNG arranges its data from left-to-right, you can optimize your images for PNG by reducing the amount of colors used adjacently on a row of pixels. An image with alternating horizontal stripes will be much smaller than a similarly-sized image with alternating vertical stripes. Also, wider images tend to be smaller than taller ones.
Knowing when to properly use PNG or JPG will go a long way in keeping file sizes down.
File sizes and requests can be cut down by combining images into sprites. If your sprite is going to be a PNG, make sure your images are laid out horizontally rather than vertically whenever possible. JPEG is usually not a very good candidate for sprites since sprites rely on hard edges and JPEG cannot provide that.