Here are some guidelines for taking photos to be used on a website and in website design
Use these helpful points below to obtain better images for use in website design. This page an be provided to a photographer that may be hired to take photos for a website project or can be used for general better overall images for a website.
Why this post was created:
When a website is created, there are many areas specific to it’s design and development. Obtaining good quality photos that are not stock can be difficult to do. Once a photographer has been hired for the job, you want to make sure this “one-time” job goes right. This post is to “on-board” the photographer for the types of shots that are required for good website design.
I created this post from personal experience. Early in my design and development career we were tasked with the job of hiring a photographer with a set budget. We thought that a photographer would have the know-how to deliver the images we needed for the project but when we obtained the finished images they where all taken portrait style with annoying watermarks. Many of the photos made use of the flash which added glare on many of the shots. The photographer may have been a good wedding photographer but not a good one for this job.
Moving forward we had wished we had an instruction checklist for this photographer which would have provided good instruction on how to shoot images for the project. From this we created the following list of points below. Feel free to send this link to your photographer hired for your next web project.
Action Points for the Photographer
1. Portrait vs Landscape shots.
One easy way to know the difference between portrait and landscape photos is the way most people hold their phone and take videos and photos. Naturally people hold the phone upright to take the photo or video as if they where holding to send a text message. Landscape would be if you held your phone sideways or length wise to shoot the photo or video. Most people tend to take photos in portrait mode. This is fine to view the photos on your phone but when you go to view the media on a typical computer or TV there is an annoying space on the left and the right. This is why you see the filler blur on the news when a video is displayed by someone who shot the video or photo in portrait mode.
For the web, Landscape is the way to go.
Many elements in a website are wide angle. So when you, the photographer is assigned to shoot photos for the website, take your photos in LANDSCAPE MODE. For many of the photos, take the extra step back to get as much of the scene in as possible. This allows for some wiggle room when using the photos for design purposes. For headshots this is not as important but it is still important to make sure there is space on each side of the image. Because of the high resolution of the images, it typically won’t hurt to take a few steps back to get more space left and right of the target object/person you are looking to shoot.
Portrait Mode vs. Landscape Mode
2. Style & Types of Images
Again,Wider is better.
Make sure most of your images are wide-angle Landscape style shots. If you want to try a wide angle lens feel free as long as it is not too obvious it is “fish eye” like.
Close-ups / Abstracts.
When it comes to design, we like to have options. Just taking your typical images is not enough. It cannot hurt to get creative with your shots and “Overshoot”. That random image that you (As the photographer) may think is a mistake could be the one photo the designer would love to use. Many images are used as fillers or as design elements. Maybe a abstract closeup of a location artifact or product. Closeups of signage, equipment, key objects and staff doing things that they natural do. Looking for “artsy” or abstract type images that the designer can use to complement the finished design of the website.
Do not take photos that look like someone stood there a took a shot for a craigslist ad.
3. Candid type shots
Images that look like stock photos are obvious and will take away from the design of the site. People know stock photos now. What makes a typical stock photo is the person or persons in the photo just staring into the camera with a fake smile. This is cheesy and people will think your photos where taken for stock purposes. Have your subjects do what they do best. Instruct the subjects to act as if the photographer was not there. Maybe some slight acting is involved but taking photos of people in their natural actions and state will help the look, trust, and feel of the website design.
4. Center is not always focus here
When the photographer is assigned to shoot images for a website there are certain elements such as a group of people, person or trademark that needs to be included. When taking these shots it is important to go “off the grid” for a bit and mix up the style. Move the camera left or right so that the subject matter is not always in the center. Go abstract and take the shot from different heights. Get on a ladder or stand on a crate if you need to. Crouch down to get a low angle shot. Many times these images will be used as a “hero style” with large text as center focus. Make the image focus off center and to the left or right.
Image from Stocksy.com https://www.stocksy.com/1955701
5. Flash vs. No Flash
We once had photographer use the flash for all of the indoor shots. The place had a lot of windows and glass so each image had a bright flash spot glaring. This rendered the images useless and the photographer had to go back to reshoot.
Unless your shooting headshots, the flash is mostly not suggested. Camera not days that great photos in low light conditions. A professional photographer will make good use if little of lighting equipment.
6. Do not touch-up
Unless you are going to touch up photos that are headshots do not alter the photos in anyway. Most designers make excellent use of photoshop or other photo editing tools. Having the image in the original condition allows for maximum creativity allowing the designer to add whatever filters and effects to the image. Effects and touch-ups are best done at the design phase but this is not the case for all situations.
7. Remove your watermarks!
Nothing more annoying to a designer than obtaining photos to be used for a website that have the photographer’s watermarked logo imprinted on every photo. Don’t even put them there! If you require credit for your work, discuss this with the owner of the website and arrange for a link to be added on the site to give credit. If you are worried about your images getting taken then stop worrying because the most likey will be. Be aware that images used for web proposes will be at some point re-purposed but someone else. It is a sad fact but true.
8. File Naming
Most of your images will be named by default as something like: img-190383.jpg. For organizational purposes and for search engine optimization purposes, do the designer/developer a favor and set your camera device to name the photos with important keywords of the business rather than generic image file names. For instance if you are shooting photos for a Home builder in Charleston, SC. Try setting the device to name the files: charleston-sc-homebuilder-223.jpg
Consult the developer before naming your files.
9. Delivery of Photos
We once hired a photographer that insisted on sharing the photos via email attachments and another through a custom specialized photographer e-commerce system. We had to download get photo individually and it took way too much time. Here are the good and the bad methods for sharing the finished photos with the designer.
Bad – Camera RAW – super high resolution (Not doing print here..)
Bad– email attachments!
Bad – Personal photo e-commerce single download sites
Good – Dropbox, Box, & WeTransfer.
That is all. Thanks for reading this post and feel free to add some insight in the comments below or share this with your photographer for your next web shoot.
Jason Houston is a web developer at Complete Web based on the island of Nantucket Massachusetts. He actively monitors the status and health of over 20 accounts to maintain position in search and to ensure each business is doing everything possible to increase revenue.
Feel free to ask Jason a question at: email@example.com