It’s been said many times that images support the written word, add visual interest to articles and help to break down long posts by drawing the reader’s attention to pictures and the lines that precede and follow. Nowadays it’s not a problem to find images that support our posts with dozens of free and commercial stock photos online, but it takes a bit of effort in styling them to fit the site’s design without breaking the flow of sentences and paragraphs. I’ve seen many sites where the authors simply insert the images in different sizes, following each other like a zigzag, separated at times with a line or two.

The better approach would be to find out what’s the maximum allowable width for an image to fit nicely in your content area, and set/resize your images to that width. For example, on Inspiration Bit the safe width is 400px, so I try to set my images 400 px wide. There are cases though, when you don’t want or can’t end up with such a long image, then it’s best to set it to half or third of the maximum width and then align those images to the left or right of the content, letting the words to flow nicely and wrap around the image. Randa Clay has put together a very helpful tutorial on how to style images and how to align them with CSS. Finally, if you’re showcasing series of thumbnails, then set up multiples of them in rows of the same height, and equal widths.

Of course you can also let your imagination fly and come up with unusual ways to present your images. A BriefMessage, for examples, features a big image not only as a main element of each post, but the entire site as well. Displaying post’s metadata on top of the image seamlessly integrates the pictures with the overall design of the site. Jason Santa Maria aligned a huge image, 495 x 863 px to the left of the content on his recently re-designed site.

As part of my meticulous design series, I now present you with eight different ways to style images in your site.

1. CSS Drop Shadows

adsoftheworld

Ads Of The World is a site that’s all about visuals, so it’s not surprising that it pays attention to how the images are presented to viewers. All images here are wrapped in a frame with a drop shadow at the bottom. There is an extensive tutorial on A List Apart that teaches how to add flexible CSS drop shadows to your images. Ads Of The World has done it a bit differently: 3×3 px shadow.gif is tiled horisontally, and applied to the A tag, while the image itself is styled with borders, background colour and padding. Notice how the colours change when you mouseover the image.

.node-image .image a {
background:transparent url(images/shadow.gif) repeat-x;
}

.node-image .image img {
background:#E4EEF7;
border-color:#D9D9D9;
border-style:solid;
border-width:0pt 1px;
padding:12px;
}
.node-image .content a:hover img {
background:#FFE8CC;
}

2. Background image

simplebits

SimpleBits approach is very simple yet effective and expandable: it’s using a tiled background image and padded picture. SimpleBits’ choice of the background image is hardly noticeable, looking more like a solid colour, however it doesn’t mean that you can’t experiment with more daring images to be used as a background.

div.photo img {
background:#E0E0D5 url(../img/bitstream/noise-earth.gif) repeat;
padding:1em;
width:49em;
}

3. background+border-top/bottom+padding

nitram-nunca

Nitram+nunca has come up with an interesting touch with its presentation of images: it’s displaying only the top and bottom borders in addition to the background colour and padding around the image. Different colours for the two borders make the pictures look embossed to the site.

.main .entry img {
background:#D9CFBD;
border-bottom:1px solid #FEFEFD;
border-top:1px solid #C9C5B3;
padding:5px 6px 6px;
}

4. Decorative Image Captions

designintellection

DesignIntellection initiates a new way in using image captions with a semi-transparent layer at the top of the image. First of all, the DIV container with the class “post-image” is set with a position: relative, which allows an absolute positioning with the “title-date” span inside that DIV.

.post-image {
position: relative;
}

.post-image span.title-date {
background:transparent url(images/tnsp-black-65.png) repeat scroll 0pt 50%;
color:#FFFFFF;
font: 11px/16px Helvetica,Arial,sans-serif;
margin:5px 0pt 0pt;
padding:5px 10px 5px 74px;
position:absolute;
left:0pt;
top:0pt;
}

#main .post-image p img {
border:5px solid #E7E2DF;
}

5. Dashed borders

antiphrasis

Image styling on Antiphrasis is not at all complicated, but combined with a few delicate details it looks very effective. The images itself are simply padded with a dashed border, but because the majority of pictures there are transparent PNGs, they look very impressive, especially when you mouseover them and the background “flashes” at you with a different colour and the light dashed border turns orange and solid.

.article-img {
border:1px dashed #9EA8A8;
padding:10px;
}

.article-img-link:hover img {
background-color:#506262;
border:1px solid #F07800;
}


cameronmoll

Cameron Moll also uses a dashed border on his site, with no frills — just a padded image on a white background.

.picC {
background:#FFFFFF;
border:1px dashed #999999;
padding:4px;
}

6. Book-like image captions

warpspire

Kyle is using various techniques to style different kinds of images on Warpspire: featured post image is prominently displayed in the site’s header; some images in the posts have no accompanying captions, while others appear with book-like captions.

.figure {
background:#F5F5F5;
border:1px solid #DDDDDD;
line-height:0pt;
margin:19px 0pt 1em;
padding:2px;
text-align:center;
}

.figure small {
background:#DDDDDD;
color:#666666;
display:block;
font-size:10px;
line-height:12px;
margin:2px 0pt 0pt;
padding:5px 7px;
text-align:left;
}

You can get inspired by more images with captions over at Elements Of Design.

7. Images with Fixed Backgrounds

carnivaleduvin

If you can prepare and always resize your images with the same width, you could apply a fixed fancy background image underneath. CarnivaleDuVin, for example, is showcasing the images in an ornate frame.

.entry img.hdr {
background:transparent url(../images/hdr-img.jpg) no-repeat;
margin:-8px 0pt 0pt -12px;
padding:24px 25px;
}


The Ernest Hemingway Collection
on the other hand is featuring pictures framed like photos with shadows.

Recently Nick La posted a comprehensive tutorial on how to style images with CSS and set them within some very impressive frames.

wdw

8. Digital Image Editing

You can also go with a completely different route and style your images not with CSS but in any digital editing image software that you can get your hands on.

justcreativedesign

Jacob Caas cleverly crops all main post images in a shape of a pencil, similar to the one in his logo. John Boardley beautifully decorates the images on iLoveTypography with white on black captions.

ilt

Looking at all those original ideas helped me to choose how I would be styling images on Inspiration Bit after the re-design. Have you seen some other interesting ways in formatting images on the Web?

Recent Bits
Related Bits
Icon Resources and Tips For Styling Bulleted Lists
Inspiration Bit goes Green and Purple
Meticulous Design: Dramatic Headlines
Blog Redesign: First Steps – Inspiration And Ideas
Design Critique: Klepas
Meticulous Design: Information Architecture
16 Dates With Inspiration
Bionic Ear: Before and After
Comment Bits

14 Insightful Bits in response to “Meticulous Design: Image Styling”

  1. Great article! Many interesting image styling ideas.

    One other idea you might want to mention is how some sites how black and white images that turn to color when you hover your mouse over them.

  2. Outstanding – these examples are all inspirational. I love the subtlety of the Nitram+Nunca example, and their sidebar headings are pretty cool too, with that shadow on the left. Thanks for the link love too!

  3. Thanks again for this post.
    It is not only a good inspiration point but your adding the css makes it really useful for the reader! I wouldnt have been able to copy the effects without this help.

  4. Such a thorough article, thanks very much for taking the time to write it.

  5. Vivien, this is a great article. I recently bashed my head about trying to wrangle out some sidebar content boxes for my blog and I finally had to break down and learn some CSS for the task.

  6. Thanks for droping by, Lauri, you’ve got an amazing blog there. I do recall seeing those effects with b&w photos turning colour, but can’t remember where I saw them. Would you mind sharing, please?

    You’re most welcome, Randa. I also liked a lot those subtle shadows on nitram+nunca.

    Warenwirtschaft, glad you found the CSS snippets helpful. I thought it should save time for my readers if I include them here, so I did ;)

    You too are very welcome, David. I also enjoyed your logo design process, haven’t had a chance to comment yet, but I will ;)

    Thanks, David. I must confess: your blog is probably the best looking Blogger design I’ve ever seen. Great job!

  7. Some really cool effects there. Thanks for sharing the css code with us. I might even try experimenting with some of these at one of my blogs.

  8. This was definitely a good read. By coincidence, I used the dashed borders technique for the image treatment on a client’s site – you can see it here: http://jchromatic.net/clients/steph/ – and by using a dash border color that was close to the background color, it gives it a bit of a scallopped/postage stamp look.

  9. J.G. Callao, I really like the way your dashed border technique turned out. It indeed looks like scallopped stamp. You’ve got a very nice looking site yourself too.

  10. Thanks, Daniel. Glad it inspired you to experiment with the image styling on your site

  11. Inspiring, Vivien. And thanks for the mention. I’m actually thinking of using sIFR or font embedding for my captions (as the font I use—Unibody Smallcaps is a free one). I’m off to experiment with some of the other examples in your post.

  12. You’re very welcome, John. Thanks for mentioning the font you use in the captions. I was wondering whether it’s this free Bitmap font or another commercial one.
    using sIFR will definitely make your job preparing those images simpler and less time consuming.

  13. Thanks for turning me on to sIFR. I read up about it on Mike Davidson’s site. Very cool. It’s things like this that make me wish I was a coder.

  14. You’re welcome, Doug. I think you will be okay with sIFR, it doesn’t require that much coding. Good luck with it.

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on