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
Alley Pfannkuchen
The Bow Valley Club
Change Given
Eurostock Investimentos
Firefly Photography
Because It’s There
joshhemsley.com
Mission First
PRO FOODS
Property Pass
Radim Kurka
Raffaele Catania Designer
Rich Brown
Solegiallo
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
Arnbäck Training
Bethany Care Society
Breezi
CapGrow
Duchy Originals
Emerald City Guitars
Fezzari
Hurco
HYBRIDWORKS
invisibleBracelet
Iron Fist Clothing
Island Dentistry
Life’s Not Fair But… My Knickers Are!
Matt Cronin
Max Tillich
Nick Cates Design
Omid for Iran
Sigma
Deep Standard
What do you think about using photos in web designs? What benefits and disadvantages does this have?
Related Content
- How to Create a 3D Text Photo Manipulation
- Spring Awakening: A Free Stock Photo Set
- 22 Professional Photoshop Image Enhancing Tutorials
- Related categories: Design Showcase / Inspiration and Web Design








































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