(Reading time: 5 – 8 minutes)
An effective image can make a good blog post great. An ineffective image always reduces the impact of of an article. Part of an image’s effectiveness is making sure it’s the correct size such that all the necessary information in the image is clear to the reader.
Does that sound complicated or vague?
It’s not, really, but it’s not often discussed either… which is your opportunity to get yet another advantage in your WordPress skills.
Image scaling considerations
Bitmapped images such as bmps, pngs and gifs typically don’t scale well. Such images are best viewed at 1:1 scale. That is, each pixel of the image corresponds to a pixel on the viewers screen. At smaller scales, pixelation becomes apparent and ugly. At larger scales, linear elements such as letters and lines start to get jagged. But at the right scale, close or at 1:1, bitmapped images are superior to modeled images such as jpgs which have artifacts radiating away from linear elements.
The reason for both these effects is mathematical. In the case of bitmaps, reducing the size of the bitmap forces arbitrary sampling of pixels. In the case of modeled images, the mathematical model provides the artifacts.
When you can, provide the reader or viewer with bitmap images at 1:1 resolution… such that the image fits conveniently into your text or display location. Here’s how.
Each block element in WordPress has either a declared width, or a computed width implied from a declared width. Find out these values:
- main column width
- padding and margin widths
then make your image the same or very similar in size.
How big are your blocks?
One way to figure out block sizes is to use the Firefox extension Firebug, which will allow you to measure the width of each element on a web page. These are the values you want to use in your image editing program for cropping down images, or as discussed shortly, in your screenshot program if possible.
In the image just below, you can see the 480 pixel width of the current Thesis text column outlined by the red box, pointed to by blue arrow [1].
Grab the width of your text block using Firebug extension for Firefox
As it turns out, I could determine this using the Thesis options menu as well, which is another great reason to use Thesis, but examining the delivered content is applicable to any theme (or any web page). You can also examine the raw CSS file, often available using “View Source” (Ctrl-U) from your web browser, then clicking on the CSS link in the document head. In the case you have a fully fluid layout, you will have to determine what your minimum image size will be. There’s now way around it. If users want to read your site at some ridiculous 100 pixel width, well, that’s not your lookout.
Resizing your image
You have two good options dealing with an arbitrary image: 1. resize the image in your image editing program (not MS Paint), which is almost guaranteed to have better algorithms for reducing bitmaps than any web browser, or 2. crop your image effectively to fit your final width. (Or both.)
With very large images such as photos, I typically scale them down by half to get them fully onto the screen, then crop them down to size. If the whole image is useful, or the cropping is very small, I’ll often reduce the size of an image by 75-80% for web display.
When your image is a screenshot, you can’t get away with nearly as much reduction as when it’s a photographic image. First, the screenshot is going to be at 1:1 with your screen already, and second screenshots typically contain a lot of sharp lines, which look crappy when reduced. In these cases, try (hard) to take exactly the screenshot that packs the exact information, no more and no less, into the smallest space possible.
My usual solution for screenshots is using a dedicated application, Jing, which I’m happy to tell you about right now.
Jing makes screenshots much easier
Techsmith’s Jing is a pretty good piece of gear. It fits into that category of “small tools” or “little languages:” it does one thing and does it well. Actually, it’s two things (video and screenshot), but just consider a single screenshot as a single frame video, and we’re back to that one thing again. Jing has two huge advantages for taking rapid screenshots:
- Screenshots are what Jing was expressly designed to do.
- Jing gives you exactly the tools you need simple annotation, and no more.
Jing is a free download with a professional upgrade and comes to you courtesy of the fine folks at Techsmith. Get your copy of Jing now. (Note: I am not affiliated with Techsmith.)
Jing doing it’s screenshot thing
When you take your screenshot using Jing, watch the width of the sizing or cropping rectangle. Crop your screenshot a little narrower to account for margin, padding (10-20 pixels is usually fine if you want to wing it.) Here’s a much larger screenshot taken using Windows Vista showing Jing in action. The lighter area bounded by yellow border is the cropping window; the darker areas are outside Jing’s screenshot. Jing’s sizing box is down in the lower right corner of the yellow guidelines. It’s solid black and shows the outlined screenshot would be 622×299 pixels.
Jing doing it's thing
In this case, it was difficult to fit everything necessary for illustrating this article into the 480 pixel width of this column, so the screenshot is considerably wider. These things happen. Note that the first screenshot was taken with Jing, and it’s 470 pixel width fits very nicely in the center of the 480 pixel column.
Adding images and screenshots isn’t difficult, but really nailing it takes a bit of practice and thought. Think about exactly what you want to communicate with each image, either information or emotion. Images communicating information need supporting text, and may benefit from annotation. For images providing emotional context, supporting text isn’t as important. But add captions in both cases.
