Tips for Using Images in Blogs

Here are some tips on using photos, screenshot or illustrative images in your blog:

1. Use Flickr’s Creative Commons search to find photos. You can then include these photos in your blog, and mention the Creative Commons license as well as the original photographer to give proper credit. (If you have a Creative Commons license for your blog as well, you can additionally use photos with a share-alike license, so it’s a good idea to add CC to your blog.) Wikipedia lists some other free-to-share images resources.
2. Use larger zoom images for those images that people may want to get a close-up of, but don’t necessarily use the exact same image. Usually, a thumbnail version of an image has different “cropping needs”, so the large version is not just larger, but may also show more context, and in higher quality (sometimes, when you use high quality you can later on re-use other parts of the image in a new blog posts that discusses something related).
3. Think of the future �C you’re creating an archive. What’s the purpose of including a screenshot of a website your readers will see anyway if they follow your link? Well, there are two uses of including such a screenshot, I think: 1) this helps give a visual context to your blog post, which is good when people visit your blog everyday trying to read only your new posts (people easily remember the photos they’ve seen when scrolling down on your frontpage), and 2) your blog post will be available years from now, when the site in question may have already been redesigned, or possibly, taken down completely. Why not aid future visitors by becoming a kind of digital museum?
4. Upload to your own server, or use secondary servers at your own risk. Some people upload everything to Flickr or similar services. But what if Flickr changes their terms, or is down, or slow, or does something other annoying? Then you got a problem because you outsourced a crucial part of your blog. Of course, uploading to another server may bring other benefits �C e.g. you can use that service’s tagging engine, or add notes to the picture, or easily provide different zoom levels �C so it’s also a matter of taste which way to go.
5. Sometimes a photo is not enough, so create videos if you want to demonstrate interaction. If you review a website, especially if it’s in a closed beta phase and not easily accesibly to everyone, it’s sometimes nice to provide a video of as well. (I’m using the free Windows Media Encoder for these needs �C the quality to file-size relation is incredible, though the output is unfortunately WMV only.)
6. Provide enough context in your photo (but not more). When you’re photographing a product, it makes sense to include some environment that shows the product size in relation (e.g. in relation to a hand). When you’re including a screenshot, it makes sense to include some environment of whatever it is you’re discussing in that screenshot, so those who see it understand the position of that thing you’re emphasizing. On the other hand, don’t include too much context, as the detail you want to emphasize may get lost.
7. Use iconic images. An icon is used to create continuity for a specific topic of your blog’s content. (For example, I’m using some kind of Gmail icon here when I’m discussing Gmail.) An icon is not representing something specific but something abstract, and it helps people more easily (visually) categorize your post. Use something recognizable and understandable, but be careful not to be trapped in graphic clichees �C e.g. a mouse cursor or @-symbol is a clichee of print media to represent “the internet”, but it’s also tiresome to see it repeated over and over for years. If you’re looking for clip arts to use, the Open Clip Art Library website is the hands down best resource I’ve found so far, and their images are actually in the public domain (meaning you don’t even have to credit them, which is good for images you want to use repeatedly �C because repeating the credit everytime adds clutter to your posts).
8. If you’re writing a news blog, clearly label mock-ups. Make sure that every mocked-up product or service screenshot is clearly labeled as such in the text. There are some exceptions to this rule when the “fakeness” of the image is 100% clear, but they’re not as frequent as you (as creator of the visuals) may think. For example, when you show off an image of Steve Jobs in superhero clothes flying over a city made up of Macs (just as a random for-instance!) then it’s rather obvious this is a mock-up, and it doesn’t need a label. But in many other cases, being too liberal with using unlabeled fake images may cause people to a) take it for the real thing, or b) question your future, real photos.
9. Use the right compression. Images these days come in three flavors: GIF, JPEG or PNG. Choosing which file-type is appropriate for which kind of image is a science in itself, but in a nutshell, use JPEG for photos or complex images with natural texture, and use PNG for line art, cartoons, or not-so-complex screenshots, and just forget about GIFs (unless your older images are still GIFs, in the case of which you can of course continue to use them). If you can, reduce the PNG to 256 colors to save some bandwidth and make your posts load faster. When you compress the JPEG, use a value that creates an image that loads fast but is also not “visually annoying”: if important details are coming off very blurry in your image, it’s better to increase the JPEG quality. I’m currently trying to go for something like 10-40K per image per post, but of course this depends on a variety of factors (your audience, the overall size of your frontpage, the kind of image) and I don’t think there are any hard rules for this.
10. You don’t need to be an artist: the spirit counts. I think the value of a blog post greatly increases when the author takes time to produce an image for you. It doesn’t have to look great as long as it communicates an idea more clearly, thus saving your readers time and providing them with a “bridge” to your text. The longer your text, the more necessity for such an image.
11. Either your blog is Safe-For-Work or it’s Not-Safe-For-Work (“NSFW”) �C make up your mind. You need to decide whether or not your blog contains adult imagery or not. It doesn’t help if you only post adult imagery every once in a while (or use titles like “NSFW”), because visitors simply don’t know when that “once in a while” will be and they may want to open up your blog in an office environment where the boss walks close-by. If you decide your blog is regularly NSFW that’s OK too, as people will be prepared. (NSFW Fleshbot for example.) Note that your text can contain adult themes every once in a while, as letters are too small to be made out by nosy bosses!
12. Separate screenshots from your text. Make sure your images posted will not be confused with your normal text flow. For example, when you copy a screenshot containing nothing but black-on-white text, add a border to the screenshot, down-size the screenshot so the text will get anti-aliased, and give the whole thing a slightly darker background (for instance).
13. Illustrate your point with doodles! If you have a scanner, or a Wacom pen, you can create quick black-on-white sketches to clarify your point. It will take you longer to create a post, but it will be quicker for your readers to understand your point. Like point 10, I believe the spirit counts; similar to sketching something on the whiteboard during a presentation, you don’t need to be an artist to get the point across. Besides, visualizing your idea helps you to flesh it out more precisely, and better reflect on the issue you’re discussing.
14. Don’t hotlink images from other servers. If you’re a developer, this one is probably obvious to you: including image URLs that point to another server (I’m talking about a server with which you don’t have some kind of membership relation) puts your site at great risk. Not only may you annoy another webmaster, and not only may the image you’re linking to be removed... what’s worse is that someone now has “power” over your blog and can replace their image with e.g. a shocking image that will suddenly display on your frontpage.
15. Use a white background, or use another color at your own risk. Unfortunately, the still-important Internet Explorer 6 doesn’t support varied transparency levels for PNG images, so when you want to show an illustration that contains e.g. a shadow smoothly flowing into your post’s background color, you need to include a specific background color in the image. What this means is that when you’re using say a soft yellow background color on your blog and your images, you can’t easily change the background color of your blog during a later redesign �C because most images would look weird. That’s why the safest way is to use a white background color, as that may have the best chances of surviving the test of time. (There are more advanced solutions to this problem, like including Flash that renders images for you, but none are really easy to implement, let alone free of side-effects.) Another bonus is that many places your post will be republished will also have a white background color �C at least the chances for that being the case are higher than them featuring your exact shade of yellow.

There’s an exception to every rule, of course. Above are just general rules of thumb: for example, you ought not provide a zoom image if it breaks “fair use” in cases where you don’t own the image content. Or perhaps you’re doing a quick post from an internet cafe and you don’t have the right tools to prepare and upload the image, so you can hotlink to another domain for a couple of days and then replace the image once you have time. Or maybe you have a satire blog, so you clearly don’t want to disclose all your mockups as such. Or maybe you’ve written a longer essay and you feel that any image would only distract from its complex point, so then you may want to leave it blank... and so on.