How do I optimize my images for the web?

One of the questions I’m asked most often is How can I use graphics effectively in my posts? or some variation thereof. Many beginning bloggers want to use the biggest picture possible in their posts, more seasoned bloggers know to use smaller pictures but still want to know how make those pictures load faster. That’s what I want to tell you about today: optimizing your graphics (whether those graphics are photos or not) for the web.

Why include graphics in posts?

In Elise Bauer’s article How to Build Blog Traffic – Content she suggests bloggers incorporate graphics simply because “. . .people want them. Graphics and photos can help to accent or illustrate your points. They also break up the monotony of text, and give relief to eyes tired of reading online.” Regardless of what your blogging niche is, at some point you’ll want to include graphics of some kind. When you do, you’ll want to make sure those graphics are optimized for the web.

What do you mean by ‘optimize’?

Optimizing a graphic for the web simply means compressing its data so the file is smaller and will load faster. When you take a digital picture, for instance, there is a lot of noise that is included in that digital file that isn’t necessary for the picture to be viewed. You can clean out that noise, and thus make the file smaller, simply by choosing “Save for web” in your graphic-editing software (e.g., Photoshop Elements or Gimp). If you don’t have that option in your software, save the file in the appropriate format–JPG, GIF, or PNG (discussed below) and choose the smallest file size in that format. By optimizing your graphics, you’ll be optimizing your site’s download time (i.e., it will load much faster). Your readers will thank you.

What size should the file be?

Back in 1995 when I was designing web sites, we tried to keep the file size of each graphic to under 26k. Of course, back then, most people were using dial-up connections to the web. These days, with broadband so prevalent, it would be acceptable to keep each graphic to less than 50 kilobytes. I understand that sometimes that’s not possible. In some cases it may be worth it to post a larger file. One option would be to make a thumbnail of the image (perhaps 300 pixels by 300 pixels or smaller) and link it to the larger image.

Should I use JPG, GIF, or PNG? And what’s the difference?

The three most common formats for graphics are JPG, GIF, and PNG. Each of these file formats is best used for a specific kind of graphic: JPG is used for photographs, PNG or GIF is used for everything else. Why? Because a JPG file can contain millions of colors, but GIF files can only be saved as an 8-bit image which means it contains up to 256 colors. PNG files were created to replace the GIF format and can be saved as 8-, 24-, or 64 bit images and are about 20% smaller than a GIF image. You can read more in Benefits of the PNG Image Format.

Further Reading:

A version of this article was posted at BlogHer.com.