When Should You Use A Frame On Your Images? (Details Revealed)

by Derek Halpern · 37 comments

You ever wonder why people use frames on some images and not on others?

Is this a design preference, or is there something else going on that you don’t know about?

Here on the DIYthemes blog, we use frames in a specific manner for a specific reason.

It sounds silly, I know, but trust me. When you see why and when we use frames, it will all make sense.

When—and Why—We Use Frames On Our Images

Years ago, I was like you. I used frames when and where I wanted, and there was no rhyme or reason for when I used them.

However, after talking with Chris Pearson, the creator of Thesis, he showed me exactly when to use frames, and why.

Before I jump into the why, here’s the when:

You should use frames when you have an image that’s either cropped with a hard edge, or an image where the color extends to the end of the image.

Or, for example, you’d use a frame on an image like this:

Cropped iPhone picture

See how the image would extend if it wasn’t cropped? That’s the perfect time to use a frame.

Also, the color in the image itself extends towards the edge of the image, so even if it was a photograph, the same rule would still apply.

However, when you have an image that’s without a hard edge—an image that’s seemingly floating on a white background—you shouldn’t use a frame.

Facebook

See how you have the complete image? No need for a frame.

But here’s where things get tricky:

Hard Edge Example 2

See how the question mark button is clearly complete?

In this case, a frame is still needed. The background surrounding that object appears as if it can continue on past the cropped part of the image.

Why Do We Use Frames Like This?

Here’s the deal:

It just aesthetically makes sense.

While I haven’t tested whether this affects conversion rates, when you have an image that’s cropped, you need a reason for the image abruptly ending, and a frame gives you it.

It’s almost like you’re hanging a picture on your blog post.

However, when the image is complete, and it doesn’t appear as if it was cropped from a larger image, you can simply let the image ‘live’ on the background of your post, almost like it was wallpaper instead of a picture frame.

How About You?

When do you use frames on your images?

Will you adopt this simple strategy?

(Frames on images that have color that extends to the edges. No frames on images that don’t).

Let us know in the comments.

About the Author: Derek Halpern ran marketing at DIYthemes, and is the founder of Social Triggers. To get more tips on how to be confident, sign up to his list here.

If you enjoyed this article, enter your email below to get free updates!

{ 37 comments }

vijay

Derek,
without frame images look, kind of shabby. you are right, that must be affecting conversion.
i will change images on my blog, but sometimes even after selection of global setting to put the frames around images it doesn’t do that, i am not sure why?
Vijay

Derek Halpern

You may need to go back and change it individually.

Andres Medina

Hi, I think that your problem could be solved, you only need to inspect the HTML structure for the images, sometimes you need a more specific CSS or even more wider, it depends. But you have to be careful when editing the CSS because sometimes the changes are applied to ALL the images even the special ones (like buttons, header, etc.)
Maybe when you add the image in the editor wordpress adds more markup which can disable the CSS.

By the other hand great post, it has sense. The caption is another element that must be taken in mind, those all small details are vital for a webdesign.

Sergio Felix

Not only I have adopted this already, it seemed like this was the way to do it.

I don’t use many images on my blog but I always use one for the start which follows this exact rule.

It’s great that I don’t know anything about design yet I was doing this already haha ;-)

Sergio

Derek Halpern

Funny how that works right.

Sometimes it just looks right.

Tom Nunamaker

I don’t completely agree with this. Look at how Don Crowther puts a full width image at the top of a blog post:

http://www.doncrowther.com/featured/liveconferences

There’s no frame around it but it looks good. Why? I think because there is a border of white space around it that naturally occurs. If you had the image jammed up next to a border or text, that’s when I think you need a frame.

Derek Halpern

Interesting perspective, though I’d even go so far as to say that the white border makes it look like a frame by default.

Chris Pearson

It’s perfectly acceptable not to use a frame on images where the color goes to all 4 edges, so long as you’re consistent in doing so.

This is intended to be a guide for when and how to use frames, but it does not mean that you must use frames with images on your site.

That said, any image similar to the question mark image in this post should absolutely be framed.

Phil

I think Don’s non-framed image still looks framed (wow, what a sentence) not only because of the white but the strong contrast between the white and the dark blue. Although the picture didn’t get its “own” frame it still looks or appears “framed” (somehow this reply appears a little bit poetic to me *gg*)

Belinda

Derek -

Thank you for the very clear explaination of why (and why not) to use frames. I need to go back through my websites to see if I need to correct anything!

Merry Christmas!

~B

Derek Halpern

Glad it was clear.

Tané Tachyon

I was really confused when I started reading this, but then I realized that you weren’t talking HTML frames but just image borders. I don’t think the word “frame” should be used to describe image borders in WordPress, because it has a specific HTML meaning already. Though doing a search just now for WordPress Images Frames, I guess that battle has already been lost.

Derek Halpern

HTML frames?

Those exist still? :-P

gourav

Will surely adopt this simple strategy, thanks for great info…

Max

Thanks for the post. You confirm largely what I’ve been doing. :-)

In addition, I use PowerPoint to give images fancier borders when I want to break up the monotony of the page a bit. It’s easy and can look great as long as it isn’t overdone.

As far as the question mark button goes, I wouldn’t put a frame around it. I’d spend a minute or so and remove the grey background. No Photoshop necessary, I simple use Paint.NET, which is free and makes the job a breeze. Then the button lives “naturally” on my blog.

Merry Christmas

Max

Tom Watson

At the end of the day, it’s those little details that the customer notices. They are “judging” us each step of the way, so it pays to tidy up the loose ends, even all the way down to the way we post our pictures. Great post Derek!

Sam

In the last four months I changed how I display my photos to full post width (not thumbnails) and with frames and I believe my blog looks a lot better (and is easier to read) because of it.

Art

Such little stuff that is so simple we never pay attention to. Thanks for the detailed information as to where and where not to use frames. Moving forward I will pay closer attention for my sites as well as my clients.

Gail J Richardson

Thanks for this information. I crop most of my pictures and I use the excerpts that extend full width so I really like the framed look. Maybe that’s just me but I wasn’t sure if there were any rules. I just try to do the same every time.

Gail j Richardson.

chris

wow that actually makes a lot of sense.. . thank god for the people who study this stuff cause having just read this i totally agree with the reasoning behind it.. it just makes sense

Karl

Hi folks,

copywriting legends Joe Sugarman and Ted Nicholas paraphrased: “Always, always put a caption under photos. This is an important element and one that is often read.”

There you go, more frames.

Get lots done

Karl

PS: This practice also serves well to make sure the photo is relevant to the text and not just a beautifully distracting element.

Dustin - WordPress Theme Reviews

Great post Derek! Thanks!

Rob @ Atlanta Real Estate

I vary it depending on the aesthetics and how much room I have to play with.

Jimmie

Frame? Are you talking about borders on the photos?

Josh Sarz

I knew this even before I started reading blogs about blogging. Heh For the same reason you have, it’s just aesthetically pleasing to have frames on images that look like they’ve been cropped, and to NOT have frames on images that are floating on a transparent background.

Figured this out back when I was running a forum. But good read anyway, Derek. Happy Holidays.

Jaume Garcia @ WebVai

Two years and a half with Thesis, and first time I find good reasons to use frames.

I think that maybe you can find other matters that seems “obvius” to know for us, but that we never thought about.

Thanks Derek.

David Bennett

I put borders around almost all images – and do it by captioning them, which puts a border around images automatically.

Is there another way to put a border around an image?

If so, I’d really like to know.

jeff pinkham

Thanks
I had no clue about frames and this gives me a base for the future

Steve Cockrane

Okay I maybe a bit dense – I can add frames with photoshop but it’s a hassle how can I add a nice frame with thesis?

Derek Halpern

In your Image HTML, add class=”frame”

David Bennett

Thank you – I love it when the answer is simple :-)

Rob Thomson @ River Homes

Absolutely no frames if the image is complete. But when you do have an image that looks unfinished, it just makes it all look off. I try to use the negative space to give images a frame too. Thank you for this insight.

doug_eike

I like this article, but it would have been more complete if you had briefly covered how to add the frame. I’m already using frames around my images, but questions like how to add a decent-looking caption without a frame still plague me. I agree with you that the aesthetics are important. Thanks for the insights!

David Bennett

Wow, that was simple – just add class=”frame”. Who would have thought it :-)

Lori Greenberg

I try to use frames in the same way but I’ve gotten lazy with posting candid photos and not taking the time to add a frame. I have let them be but make sure that they are large and somehow that helps me rationalize it. thanks for the reminder to me to get back on it.

With the question mark example above I wouldn’t have used a frame though…I would have used photoshop to delete and feather the background left up around the image so it looked like it didn’t need a frame.

SE101

Derek,
I agree to your point especially when it comes to using a cropped photo. Also frames make image look cleaner.

Bob Young

Derek, thanks for enlightening me on the use of frames. I was familiar with “borders” but rarely use them. The frames look much better and your description of when they should be used makes total sense. I learned something today. Yea!