Some of the largest elements, in terms of file size, are images. Whether you run a blog on technology, food, travel or some other subject, you’ll likely have plenty of images to brighten up your pages and enhance your text content.
When saving an image, there are several formats to consider– each with unique strengths and weaknesses.
In general, the JPG format should be used for photos or screenshots. JPG is a general purpose lossy image format, which means that it reduces the quality of the image to achieve compression. Higher compression levels reduce the size of JPG images, but it also introduces artifacts into the graphic.
In contrast, PNG is a lossless format that should be used for web graphics that have a transparent background. Unlike JPG and other formats, PNG has an alpha channel–opacity– and can have partially transparent colors. Generally, PNG files will be larger than JPG files for complex images and therefore should only be used when quality is of utmost importance or transparency is used.
The final image format you’ll likely encounter in web design is GIF. You may know that GIF files can also be animated and are often used for short, looping video. However, the GIF format is generally used with 256 colors, meaning colors that are between one of these 256 colors will be dithered and look poor. Technically, a full color GIF is possible, but the large file size is a turn off– image formats such as PNG are generally considered more appropriate for full color images. GIF also allows for transparency, but it’s an all-or-nothing transparency– there’s no intermediate opacity values.
Of course, each image format has a different way to compress it. With JPG, WebP, and TIFF images, compression can be “lossy”. Essentially, all this means is that some image data is “lost” during the compression step. However, the image formats often make this trade-off by “losing” data that is imperceptible by humans.
Formats such as PNG, GIF, WebP, and TIFF can also handle “lossless” compression. Though this compression is generally not as effective, it is advantageous when losing image quality is unacceptable. You’ll notice that both TIFF and WebP support both “lossy” and “lossless” compression– fortunately, these image formats give you a choice, allowing you to make a decision based on what type of graphic or image you have and whether quality loss is acceptable.
Sprite Sheets and Fonts
Icons and pictograms can be optimized by including a single sprite sheet with all of the required assets bundled in. A sprite sheet is essentially one large image with multiple images embedded within. Using CSS’s
background-position property, you can choose which part of the sprite sheet to show for each element. For example, your shopping cart button can display one part of the sprite sheet, while your “subscribe to RSS” button shows another. This technique is invisible to your visitors, with the exception of a reduced load time due to the fewer number of web requests needed.
Additionally, instead of using double-sized images for high pixel density screens, vectors and symbol fonts can be used to produce clean, sharp icons. Similar to the sprite sheet, only a single web request is needed to retreive the font file with multiple symbols in it. As a bonus, you can change the color of the font and apply effects with CSS without the need for separate assets.
In this module, we’ll cover these techniques in depth to demonstrate how you can transform your largest assets into smaller blips on your waterfall charts.