Images have become a common sight on blogs. This is because of the improvement of technology—mainly internet connections. Images, for many blogs, play an integral part of the content. Whether or not you use images on a regular basis is irrelevant, but when you do use them, it helps to have them looking smooth.
Standard Image Sizes
If you want to make your site more professional, you could start by making the images you integrate into your content a standard size. To begin, consider finding out the width of your content area (or the area that text is displayed). Make this the maximum image width for a large image. Make an image around half that width for a medium sized image. Make an image width a quarter or less of the maximum for a thumbnail image.
For example, let’s assume that your blog’s content area is 500 pixels wide. Try following this set of image sizes:
500 x 200—lead images for featured articles
500 x 500—large images for screen captures and image content being discussed
200 x 200—medium images aligned to the right for complimenting the content wrapped around it
100 x 75—small images aligned to the left used for company/service logos being discussed
If you do something like this, when people are searching through your archives, they know what to expect. It is a subtle change, but, in my opinion, it can make a blog look much more professional.
I don’t want to blow your mind with color theory, as even I lack great understanding about this, but I will tell you that there are color combinations that work well together, obviously. Unless you are an artist, you might not know how it all works. I did find an interesting website that has a digital color wheel that could help. Play around with it, and try finding complimentary, analogous, triadic, monotonous, and other various color combinations.
Optionally, you could play around with the opacity and monotonous colors to add a unique and impressive effect to images. On my previous blog, I had considered adding a bluish monotone to all my images, but it is a lot of effort. If you are really into making your blog’s design look phenomenal, take care to be consistent.
It should be an obvious thing to use quality images, but even I am amazed at how horrible the quality of the images that people use on their blogs. Sometimes it is so bad that, at times, I wonder if even the picture was highly relevant, would it have been better if it was just not there.
There isn’t an incredibly negative impact if a great image goes unnoticed, but it is a very bad thing if a poor image draws all the attention to the readers. Image size is becoming less of a factor as connection speeds increase, so your images should be able to look great if scaled properly. To put this simply, use quality images or don’t use them at all.
Rounded corners are very popular in this day of web 2.0 flair, and rounded corners are a simple and relaxing way to add some elegance to your images. This requires some effort, and if you are tied for time, it might be easier to skip this suggestion. They do like nice though—the first site that comes to mind is Ars Technica.
Captivate with Captions
Captions are a great way to add information to your image that might not be obvious to your readers. With the inclusion of the caption functionality in WordPress 2.6, it is very easily done. Use them to give credit. Add a short description to answer any of the who, what, when, where and why questions. Just make sure to not abuse them. If you need several sentences to explain what is going on within the image, the image would probably be better left out.
Image alignment is another thing that can really improve the look of your site. Aligning images to the left or right is a nice change. It is preferred to align the images to the right as it does not interrupt the reader as much as a left-aligned image. If you use alignment, be sure to use smaller images, as having only two to three words per line looks very odd. Some sites, like a few blogs owned by Gawker, have been guilty of displaying only one or two words beside a lead image. Take care to preview your content before publishing it.
Finally, you want to ensure that all of your images have a meaning to the content that it compliments. Namely, the image should, in fact, compliment the image. If this image is there just for the sake of trying to add some production value to the post, the article might be better off without it.
For example, I am writing this article about images—it would be useful for me to add images that exemplify good alignment, colors, size, or what ever is relevant to the image discussion. But adding images to this post just for the sake of claiming that I have added an image is pointless and distracting. In other words, add images if they are relevant and/or help to break up the content. If not for either of those reasons, just don’t bother adding them.
Hopefully these suggestions about images will help you better integrate images into your posts. Take care to not overuse images. Some blogs manage to display several dozens of images displayed per post—Noupe comes to mind—but be sure to make them count on your blog.
If you have any tips for integrating images with content, please add them in the comments section. Also, if you liked this post, why not subscribe to Performancing!
Definitely worth the read, you mentioned some pretty unique and helpful stuff there.
I agree that rounded corners really do add to the web 2.0 look, personally one of my favs.
Will be great to see some form of standardization in blogs. Some are an eyesore to say the least, having text and pictures of all sizes all over the place. I will try to follow the above suggestions too!
Hmm, I appear to break some of the guidelines you have mentioned above. When I’ve worked with images, sometimes I need to use a thumbnail or a medium sized version of an image because the full size does not fit without scaling. I’ve seen some blogs use excellent images with their posts and you’re right, they do sometimes make a difference.
I have to say you probably could’ve used a few images here and there as examples. You mentioned the Ars Technica site and provided a link, which was nice. But why not show a screen shot of it there, to further enhance and accentuate the text? An illustration is two things: a literal image depicting something, and a supporting feature (be it image, text, sound, video, smell, whatever) that enhances the subject being discussed.
Consistency is key! Good luck.
I agree about the CSS styling. Good tip.
As Markus said, go to Flickr, and search through the creative commons sections. Always give a direct link to the work, and attach the creative commons license with it. If I can find a personal blog of the creator, I will link to that as well. The way I format my attribution is generally as follows:
[“The Image Name/Title“—Author Bob | CC]
The “CC” thing is something I made up to represent Creative Commons, just as we have “©” for copyright.
Regardless, be sure to attach the creative commons license with the work. Technically, if you do not attach the license, you are illegally using the image as it is disclosed that you MUST attach the creative commons license. Very few people do this, unfortunately.
It certainly might be. Good luck!
I mostly use software screenshots. For each post I choose specific width (one size for all software won’t work) and make all screeenshots fit that (resizing, cropping, making partial shots, etc). And one right-aligned icon-sized in the beginning.
It may not have consistent look across all of blog but it has nice look inside each post.
@Dave: Flickr expanded search offers to look for images with a CC license. That’s a very good place to start. But the web is full with pix under CC license or for very small money.
CSS: In general I would recommend to have some standard CSS classes for images depending on your template context.
Thanks for the post, good comments.
I’m on my second blog now and have started including images much more frequently than I did in my first for all the issues you talk about. I’m going for a very professional, polished look and I definitely think the images help.
Typically, I use Google images to find my inserts. It just dawned on me while reading your post that I haven’t really been paying any attention to copyright issues or credit. Do you have any thoughts on this or could you send me in the direction of a good article on the issue?
Secondly – would you be willing to share where you get your images from? I’m assuming you don’t pay for them all!
Thanks in advance.
I think the best part of having a great blog is to put clear photos. Very clean and perfectly clear photos will speak wonders. Just like they say, a picture is worth a thousand words. A blog full of great pictures is worth thousands of dollars? hehe