Excellent Examples of Using Photos in Web Design

May 7 2010 by Tyler Denis | 48 Comments

Excellent Examples of Using Photos in Web Design

Using photos as a design element and central piece in a web design is a great way to get a point across to the viewers or to just add more depth into the design. We are going to look at some examples of two popular ways of using photos in a web layout: using a large photo as your background and using a photo as the central focus in the header.

Using Photos in the Background of a Web Design

Using a photo as a background can give your website an added visual element, as well as depth and space. On the other side of things, if the photo is poor quality or unappealing, it can bring down the entire look of the web page. So not every photo will work, but if you get one that does, it can really make the website stand out.

2K Games

2K Games

Alley Pfannkuchen

Alley Pfannkuchen

The Bow Valley Club

The Bow Valley Club

Change Given

Change Given

Eurostock Investimentos

Eurostock Investimentos

Firefly Photography

Firefly Photography

Because It’s There

Because It's There

joshhemsley.com

joshhemsley.com

Mission First

Mission First

PRO FOODS

PRO FOODS

Property Pass

Property Pass

Radim Kurka

Radim Kurka

Raffaele Catania Designer

Raffaele Catania Designer

Rich Brown

Rich Brown

Solegiallo

Solegiallo

thesixtyone

thesixtyone

Using Photos in the Header/Masthead of a Web Design

Another popular usage of incorporating photos in a web layout is by including them in the header/masthead section. Doing this can get across a visual element to attract people to your website, as well as give the viewer a sense of what you are trying to show them while not overwhelming them with an oversized photo. While a photo within the header probably won’t stand out as much as using it as a background, it can be a nice feature to work the rest of your website around.

AD60

AD60

Arnbäck Training

Arnbäck Training

Bethany Care Society

Bethany Care Society

Breezi

Breezi

CapGrow

CapGrow

Duchy Originals

Duchy Originals

Emerald City Guitars

Emerald City Guitars

Fezzari

Fezzari

Hurco

Hurco

HYBRIDWORKS

HYBRIDWORKS

invisibleBracelet

invisibleBracelet

Iron Fist Clothing

Iron Fist Clothing

Island Dentistry

Island Dentistry

Life’s Not Fair But… My Knickers Are!

Life's Not Fair But... My Knickers Are!

Matt Cronin

Matt Cronin

Max Tillich

Max Tillich

Nick Cates Design

Nick Cates Design

Omid for Iran

Omid for Iran

Sigma

Sigma

Deep Standard

Deep Standard

What do you think about using photos in web designs? What benefits and disadvantages does this have?

Related Content

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

48 Comments

Dan

May 7th, 2010

Some fantastic examples there, I especially like Alley Pfannkuchen’s site. I think now CSS3 is creeping in and we can use transparency with just using code, full photo sites are becoming more popular and will very quickly be trending!

moabi

May 7th, 2010

very nice article…

Askar Sabiq

May 7th, 2010

fantastic, but full photo sites break the bandwidth..

TomPier

May 7th, 2010

great post as usual!

Inspirationfeed

May 7th, 2010

Nice collection!

Ed

May 7th, 2010

I’d have to say it’s a great collection. I read a lot of these “lists” each day for inspiration and most of the time, it’s recycled garbage, but I’d have to say this post showing the usage of photography as the basis of your Web site design is great.

Matthew Heidenreich

May 7th, 2010

some great examples. Thanks.

nacho279

May 7th, 2010

Excellent post! first time here but… not last! congrats!

Heather Villa

May 7th, 2010

You are right on the money with this one. I have seen some really great blogs with some not so great photos and it really just kills the impact of what you are reading.

Gavin Barrett

May 7th, 2010

See http://jabberdust.ca
Another example of a big picture approach to web design.

Kyle Pouliot

May 7th, 2010

I respectfully disagree about “full photo sites breaking bandwidth.” There are exporting and optimization methods where you can decrease file size and present large photos as a div background.

Claudia

May 7th, 2010

So lovely!
I like this showcase, makes me think twice about the use of photos in some websites I have to manage!

Thanks =)

Erik

May 7th, 2010

This websites are very beautiful, but only for default resolutions!

Pim

May 7th, 2010

Great showcase! I think using photos is a powerful way to be fresh and personal. It brings more life into your website.

Thanks for this inspiring post

Jesseca

May 7th, 2010

I spent about more than 5 minutes browsing at these impressive websites. Thank you so much for inspiring!

Alex Flueras

May 8th, 2010

Photography and web design goes so well together and these examples clearly shows it. Great article.

larry

May 8th, 2010

Kyle you are one percent correct. Full photo breaks nothing! I have used JS that easily makes it wok great without a crawling issues. Great post and very inspirational. Always try to break typical thought with great design and GREAT coding. The two can go hand and hand!

larry

May 8th, 2010

Ok 99% plus 1% = 100% LOL

Webdesign Geneve, Too Pixel

May 8th, 2010

Hey thanks for featuring one of our creations! (cf. Arnbäck Training)

Yojen

May 8th, 2010

Using photos as a design element is great but using a big search zone in a web design is great too. See http://yojen.com/ share your emotions as an good alternative to breaking bandwidth with a call to action for search. What does Google? Other examples are welcome!

Walter

May 8th, 2010

Nice collection! It’s nice to see that broadband has had a huge impact on webdesign. A couple of years back we preferred tiny pictures in order to improve the site’s speed. With Google now honouring quick website speed we may go back and reduce images again…

Lee

May 8th, 2010

Some of these look amazing, great inspiration.

baaz

May 8th, 2010

Great article!

I think we can add this site :)
http://www.lesgalantes.com

WebDesignerDelhi

May 8th, 2010

@ Walter : Ya quick website is good but if your site doesn’t attract the visitors then what is its use .. so i definitely go up with this post .. great work

Theo

May 8th, 2010

Great inspiration source ! “One picture is worth ten thousand words”

Adrian

May 8th, 2010

OK, one more site to add to the list :) http://citytag.com.au

pimeo

May 8th, 2010

Most of these web sites can be seen on http://www.cssmania.com
A very good web site which includes what is made of better in web site last generation. A good resource to have for the persons who looks for of the inspiration.

Good post.

Michel-Ange

May 9th, 2010

This website uses also pictures for its design : http://www.le-bk.fr

Jill C

May 10th, 2010

Some great inspiration here! Definitely some unique uses of imagery!!! Thanks for the great post!

Mark James

May 10th, 2010

Great collection of websites!

Maverick

May 10th, 2010

these websites really look beautiful. great impact.

Dzinepress

May 10th, 2010

as my experience most of these kind websites design in flash, because static website may heavy due to these kind of hi-res images which are using as background, but you sharing really beautiful inspirations. thanks

robert

May 10th, 2010

WoW, Nice…Very Nice Article and some Great Inspiration

McConnell Group

May 10th, 2010

I have been thinking of doing a large picture background for a real estate website, These are good take aways

Rochelle Dancel

May 10th, 2010

Nice post.

A suggestion for a future post might be a how-to on best practice when it comes to implementing full screen / big photo backgrounds…?

Cheers!

Tim Read: Ripplenet

May 10th, 2010

Yes, thanks for that. But you’ve got to watch out for different resolutions as erik says above.

Jordan Walker

May 11th, 2010

I like the collection, image size could be a problem for DSL visitors.

Kelly

May 11th, 2010

Great post – gets the creative juices flowing!

guci0

May 12th, 2010

Excellent list, great websites.
Good work! Best regards!

Kyle Pouliot

May 13th, 2010

Absolutely, Larry…You can have an amazing design that contains great user conversion, but part of the user experience is to capture attention within the first 7-10 seconds of the visit. If it takes longer than that to load your site, you might just lose a visitor. Code your beautiful creations wisely, it’s important for usability.

Food for thought at least!

Ignacio

May 16th, 2010

Wow, my design is here and my client never told me. This suck. I want my credits!

Chad

May 19th, 2010

Nice examples. A common theme with the pictures is most are of people. I believe that helps make a personal connection and something to think of when deciding on what pictures to use.

Urviho

July 19th, 2010

Nice inspiration :)

CedricSoubrie

August 20th, 2010

Yeah, nice inspiration ! Omid For Iran is just stunning

ALLOVE

November 12th, 2010

the pictures are simply well fit in! kip on with the good job!

Jasmin Halkić

January 14th, 2011

Very nice design, great article!

Gabriel Ortiz

March 7th, 2011

This type of design gives a touch of elegance to the web sites

Mohit

May 1st, 2011

I admit that I am annoyed with myself on checking this great post now. This is an awesome collection for some good inspirational work.

Leave a Comment

Subscribe to the comments on this article.