One of the first questions I ask when starting a new website design project for a client is, “Do you have photos for your site?”
The good new is that you don’t need a great camera to take awesome pictures for your site. You just need the right photography tips to make sure that the pics you snap work great on your website.
You don’t even need to take the pictures yourself; there are some amazing stock photo sites where you can purchase photos. The same photo tips below apply whether you’re the photog or you’re buying them online!
I’m going to add a caveat to this statement, however! When your budget allows for it, I absolutely 100% believe in investing in a professional photographer, especially for pictures of people that you use on your site. That includes pictures of you, your staff, your clients. In my opinion, hiring a pro to take your shots will bring your website design to a whole new level.
Five Tips for Using Photos the Best Way
Tip # 1: Stand back.
(I always hear Stevie Nicks in my head when I say that..”stand back, stand back….”.) But I digress!
A trend in the web design world is using a large image on the home page as the first attention-grabbing visual the visitor sees.
This is called a Hero Image.
In order to achieve this awesome look, you need to have an image that gives you enough room to zoom in.
Stand back and shoot from a distance so that when you crop in, you’ll get the part of the image that you want.
Here’s an example:
I want to show the lanterns and part of the couch and pillow as a large image on my home page.
I took this picture from further away:
I zoomed in when I took this picture:
The look of the second image is what I want to show on my website.
Since I want this to be a full-width image on my site, I used a photo editing software to size it to be 1,850 pixels by 400 pixels.
This is what happens when I take the zoomed in photo and enlarge it to fit in the 1,850 pixels by 400 pixels size.
You can see that as the photo is enlarged, I lose a large chunk of the image that I want to show:
Now, take a look at what happens when I use the image that was taken from further away. I achieve the look that I want!
By standing back and taking a photo from a distance, you have more room to play with when you want to zoom in and use the photo as a large image on your site!
Tip #2: Go wide.
Landscaped photos are best for when you want to achieve that full width effect on your site.
I’ll often have a client send me a picture that’s portrait and they want to use it as a full-width image on their site.
The same thing happens to the image as described above.
Here’s a vertical picture of a plant that I want to use as a large image on my homepage:
This is what happens when I expand it to use as a full-width image (not the look we were going for!):
Tip #3: Leave room for text.
Think about how you’ll ultimately use this photo. If you want it on the home page with a call to action box, compose the shot so that you have space that allows for that.
Tip #4: Use a light box when taking product photos.
You want your product to stand out without any distractions and using an inexpensive light box (also known as a light tent) will help you achieve that look. This will allow you to have complete control over your product’s background and lighting. You can purchase a light box kit online (a quick Google search comes up with many places where you can buy one) or you can even make one yourself. (Check out Pinterest for inspiration!)
This is what a light box looks like:
While you’re at it, use a tripod when taking your product photos to eliminate “camera shake”. There are so many inexpensive tripods available that are flexible and are small enough to fit on a table top.
Tip # 5: Optimize your images for the web!
On the web, you want to make sure that your images are sized so that they load fast and don’t bog down your site. Even photos taken with your iPhone can have a high resolution of 300 dpi.
Sizing them at 72 dpi is best and saving them as png files is even better. Here’s a whole blog post we wrote about how to edit your images without fancy software.
There you have it! If you have other tips for using photos on your website, be sure to leave them in the comments below.