It is said that a picture is worth a thousand words. At an average of five letters per word and including the spaces, that clocks out at about 6K per image. Wouldn’t it be great if we could get all of our web images down to just 6K and have them big and clear? Unfortunately, that’s not going to happen. But there are a number of things that we can (and should) do when it comes to optimizing images and how they’re presented on websites. Let’s dig into a few.
Decorate your tags
The “alt” tag in an image element serves more than just one purpose. At its core, it was designed to show a description of the image in cases where the image cannot be shown. It also, however, adds context for search engines looking to analyze what is in the image. While the conspiracy theorists will tell you that Google® and the NSA are equally adept at figuring out what’s in the image just by looking, a good alt tag will surely help.
For example, <img src=”DanicaWinsBigRace.jpg” alt=”Danica Patrick smiles as she celebrates the big win”>
If you thumbnail, actually thumbnail
Some web designers take the easy way out and use a full-sized image as a thumbnail, simply decorating the tag with width and height attributes to scale it. These designers will be first up against the wall when the revolution comes. While the argument they typically make is that the full-sized image should be in the browser cache already, they are forgetting that the image has to be loaded into the cache at some point, and if the page with the thumbnails is loaded first, that is a whole page of full-sized images coming down the line.
Have you ever seen a page with 40 thumbnails that loads over the course of a full minute? If so, you’ve seen this in action. Don’t do it — if you need thumbnails, generate them small and use them small.
As an example, consider this image of the GoDaddy Website Builder Design Gallery. It is just part of a much larger scrolling page with almost 100 thumbnails of possible website designs. Each thumbnail is about 15K in size. Imagine if they were the full-sized images, simply scaled. The page would take the better part of two minutes to load!
CSS is incredibly powerful. Many of the graphical elements of a web page that used to be scores of (albeit usually small) images can now be done in CSS. Not only does this make your page render faster, it also allows you to change your design much easier without requiring new images, and it avoids the problem of cached images ruining a new design by displaying old content.
Weigh your pages
Simply put, for any given page on your site: count the bytes. A tool like Firebug® (for Firefox®) or the Google Chrome™ developer panel will tell you quickly how many bytes each page “weighs.” If your page is taking too long to load, put it on a diet. Reduce the number of images or see if you’ve missed an optimization step.
Avoid the temptation to simply leave your images named as they are, especially if you’re getting them from stock services where file names are often incomprehensible strings of gibberish. When looking at the source code for your page, you’ll never be able to tell what the image is. And search engines, which do index images, will pick up that name — and that helps nobody. In other words, DanicaPatrickWinsIndy500.jpg is a good file name, whereas DP_I500-win9388477273-xxFull.jpg is not.
It’s only going to get worse
With the advent of higher-resolution screens (like Apple’s “retina” screen and other “HiDPI” screens), a pixel is no longer just a pixel. Where 100 pixels across used to mean, literally, 100 pixels, on a 4X high-def display, there might be 400 physical pixels being displayed. When a standard image is received, the display might simply repeat a pixel four times.
An image with four times the actual pixels will be displayed “natively” and look absolutely fantastic – but at the cost of being much larger. And not just four times larger, but 16 times larger (remember, the image is a square, so four times the pixels is actually four-times-horizontal multiplied by four-times-vertical: 16). Compression will help, but there are other solutions that are better, as we will see.
Compress your images — then vs. now
In the beginning all web pages were created equally. You marked-up your page, added your images, and away you went. Those in the know compressed their images by making sure to save them as JPG, a format that supports image compression. In almost all cases, this is still a good idea (there are exceptions – for example, PNG, which supports transparency). When using formats like GIF or PNG, the savvy web designer knows to use 8-bit color when practical.
Today we have responsive websites that change based on the client’s window size. In many cases, web designers still include a single image in their page and rely on the browser to scale the image appropriately. This means that the image must be clear and crisp at the largest expected resolution. In other words, even after image compression, the designer is still anticipating the worst and always sending the largest image size.
The solution to this problem is on the horizon, however. Newer browsers are starting to support a new element called <picture>. Get the lowdown on the picture element in an upcoming post. Stay tuned!