Optimizing (Must know)
You may have noticed that the file sizes of Retina images are quite a bit larger than normal images. This is a point of concern, especially for mobile users. Although our data networks have rapidly increased in speed in recent years, it's still important to make sure our sites are optimized for slower connections.
There are a number of different techniques you can apply to make sure your images load quickly. This recipe will cover how to choose the best image format to use in various situations and how to use compression in several tools for images with smaller file sizes.
Getting ready
There are a number of image editing programs you can use to create graphics for the Web. In this recipe we'll cover using Photoshop and GIMP to edit images, but the principles should apply to most applications. If you do not have a good image-editing program that allows compression, GIMP is free to download at http://www.gimp.org/. If you'd like to optimize some images that you've already created there are some automatic compression tools available that we'll discuss as well.
Before you start trying to create optimized images, it's important to understand what file formats work best for various situations. The three main image formats you'll come across are GIF, JPEG (JPG), and PNG.
In most situations GIF is used for logos or low detail icons, JPEG is optimal for photos, and PNG is best for detailed graphics with transparency. Let's gather one image, that would work well for each scenario, to optimize.
How to do it...
To get started let's work on optimizing a PNG image. Open any high color photo or graphic. The first thing we will do is posterize the image. This will reduce the number of color variations that the image contains.
In Photoshop, go to Image | Adjustments | Posterize... in the menu bar. In GIMP go to Tools | Color Tools | Posterize.... This will open a dialog box allowing you to change the number of levels. Lowering the number will decrease the amount of colors used and reduce the size of the file. Start with a large number and slowly decrease it while watching the image preview. Find a level where the difference in the image isn't very noticeable.
Next save the image as a PNG (PNG-24) via Export... in GIMP or Save for Web in Photoshop. In GIMP you can leave the compression level at 9.
Now we'll optimize a GIF image. Open a logo, clipart, or similar image file in your graphics editor. In Photoshop choose File | Save for Web and then select GIF as your image type. On the right-hand side you'll see a drop-down list for Colors. Decreasing this number will result in a smaller image by removing similar colors. If you find it is removing a color that you don't want, you can select that color in the pallet below and click on the lock icon. In GIMP from the menu bar select Image | Mode | Indexed.... Try choosing a maximum number of colors less than 255. Choose a low number of colors that still looks good (try somewhere around 128 first). You'll find that some GIFs compress well and others do not, based on the initial amount of colors.
Finally, we'll optimize a JPEG image. Open a photograph in your image editor. Choose Save for Web or Export.... Both GIMP and Photoshop will present a similar slider that will allow you to set the image quality. The more this number is reduced the more image data will be lost. Typically you can save an image somewhere between 70 percent and 80 percent without noticing much quality loss. When creating Retina images, you may find that you can compress some photos much more than a standard definition image and it still looks good in the browser. Experiment with these settings to see what works best. You can view the preview as you change the setting to see the final result.
How it works...
Each type of image works slightly differently and has a different method of compression. It's important to choose the optimal image format based on the contents of the image in relation to the strengths of each format.
GIF images are best for simple illustrations and icons because they support transparency but only display a maximum of 256 colors. They will compress well if you have large areas of the same color and use very few colors. In most cases, GIF will be your least used image type.
JPEG images are often used for photos because they support millions of colors and compress well. JPEGs are lossy, which means you can lower the quality of the image in exchange for a smaller file size. When compressing a JPEG it is a good idea to keep the original because, once compressed, the image data is gone. JPEGs do not allow transparency.
PNG images combine some of the benefits of GIFs and JPEGs. They work well for photos but are best suited for graphics with transparency. PNGs have high quality transparency without the jagged edge you may find in a GIF image and work better with many colors. They are based on a lossless compression, which retains the image data so you will not be able to compress photos as much as a JPEG.
When starting an optimization plan, it's best to start by focusing on images that most users will have to download. These include graphics that are used in your template and your most visited pages. You can also sort your site's images folder by size and optimize your largest images first. In some cases, you may find that your images can be compressed enough to serve only your Retina image without worrying about your site loading slowly. This is by far the simplest Retina solution. For an example of this, read Daan Jobsis' article at http://blog.netvlies.nl/design-interactie/retina-revolution/.
There's more...
In addition to being able to manually optimize your images, there are a number of tools that will automatically optimize images based on algorithms. These may not always be the most compressed an image could get, but when looking to save time this can be a better option.
There is a variety of software that will help you with compression, such as the following:
TinyPNG – http://tinypng.org/ (web-based)
ImageOptim – http://imageoptim.com/ (Mac)
RIOT – http://luci.criosweb.ro/riot/ (Windows)
PNGGauntlet – http://pnggauntlet.com/ (Windows)
Tips for creating repeating backgrounds
When using repeating background images, it is best to make the image the smallest possible tile. For example, a repeating grid pattern could be made with only two connected lines of a square. Try creating your graphic and placing a duplicate next to it to figure out the smallest portion of the pattern needed.
