Image Optimization
Part of the job of a web designer is to create a site that is both beautiful in its visual presentation and also fast in load times and downloads. This is sometimes a difficult balance to maintain. Large file sizes make for slower load times, so any bytes you can shave from your files (HTML, CSS, and Images) will reduce the wait time for your site’s visitors.
Making customers wait for a website to load is no different than a waiting room at a doctor’s office or a line at a grocery store. It is not completely avoidable, but you should make an effort to make the process as brief as possible.
Images, in particular, are the some of the biggest culprits for slow-loading sites. While including some images as part of your site’s design often adds a needed asthetic appeal, piling on too many creates frustration for your site’s visitors, particularly those on slower Internet connections, slower computers, and mobile devices. Just because you created your website on a 3GHz, Quad-core machine with 4GB of RAM, does not mean Sally Netbook will have the same computing power.
There are three aspects of image optimization that you should evaluate when making your images ready for the web:
- File Format
- Resolution
- Bit Depth
1. File Format
The most common file format we deal with when snapping photos on our phones and downloading wallpapers is JPEG, but it is not the only format at your disposal. JPEG uses compression, and that compression is inherently lossy. The more you compress your JPEG file, the blurrier and lower quality it will become. What makes JPEG appealing is that it can use dithering and smoothing to produce decent-quality photos with small file sizes.
At one time the GIF format was certainly one of the most widely-used image types for web design. It compresses well, without losing quality. What it does lose, however, is bit depth, which we will discuss later.
GIF is good for small images that do not require millions of color variations and depth (i.e. not for photos). They also have support for brief animations. You can use GIF compression to create very small image file sizes.
In the mid-1990s, the PNG format was introduced. Like GIF, the compression was lossless, but it also added features like alpha channels (for variable transparency), gamma and color correction, and two-dimensional interlacing. PNG can also compress files better than GIF in most cases.
At first, browser adoption for PNG (particular in Internet Explorer 6) was mediocre at best, particularly in terms of transparency support. Later versions of all browsers support these features, and it should generally not be a problem.
PNG is great for higher-quality images, especially if you want to avoid quality loss, but beware of using them for photos, as the file size will be greatly increased in comparison to lossy JPEG files. PNG can also compress and reduce bit depth, while still maintaining reasonable quality. This makes PNG an acceptable replacement for GIF images.
2) Resolution
Image resolution is very important when dealing with computers of numerous shapes and sizes. If you are in the business of sharing or selling photos, then multiple image resolution sizes are important, but the smallest sizes should be used first.
In other words, if the user is deciding which images to download, the first page he encounters should be thumbnails; small 75×75 pixel or 100×100 pixel images should be sufficient. Clicking the thumbnails can open an intermediate-sized image in the 500×400 range. A final click can then be used for the full sized image. This will reduce the number of unnecessarily large downloads for photos the user may not actually want to see up close.
The other important point to remember about resolution is that image resizing must be down in the backend. This means, either resize the images using an image editing program on your computer or use some type of web application to dynamically resize the images on the server, prior to sending them to the web browser.
But never upload a large image and then use HTML code to scale it. When users visit a site with an 1200×1020 image scaled to 350×220, for example, their browser will still have to download the full size image. If you reduce the size prior to uploading, however, they will download a much smaller file.
3) Bit Depth
Bit depth essentially refers to the number of colors an image uses. 1-bit is for monochrome pictures (i.e. black and white). 8-bit uses 256 colors. 16-bit uses 65,536 colors, and 24-bit images can have up to 16,777,216 colors.
For images other than photos, particularly those used to enhance your design in simplistic ways (i.e. rounded corners of a box or button backgrounds), use 8-bit PNG files. Most image editing software, including Photoshop, has support for indexed PNG files. You can also further compress the files with software that is specifically designed to create smaller PNGs, like pngnq.
Use Images Sparingly
One common mistake of inexperienced web designers is to use images when they are not actually necessary. A divider with a solid color background and a shadow, for example, does not need to be an image.
Modern browsers support CSS techniques that will allow you to accomplish the same goal with minimal code and no images. Future versions of HTML and CSS will support even more complex rendering to produce effects like gradients and SVG graphics and animations.
There are times when images are simply necessary, and you should save your bandwidth for those instances. Once you have created a site, add up the bytes used by images on a single page. Add that number to the HTML and CSS file sizes to see how much a user will have to download to access one page of your site. Hopefully, the number will be small.
By carefully preparing the images you use on your website and using images sparingly, you can ensure that your site’s visitors will get the best experience possible. When website visitors view a clean, fast-loading, accessible website, they are more likely to return and use the site again. That is better for you, your clients, and your wallet.