Taking high quality, great photos is only half the battle; making them fit on a website can be a very time consuming challenge! These tips are intended to help you frame your photoshoot so that you get the variety of photos that your customer and website designer need for the website.
Photo File Sizing For Websites
Common File Dimensions For Websites
- Hero Images
- This is the large image at the top of a page, typically the width of the website.
- Dimensions will be specific to the design of your website so check with your client/developer first.
- Our hero image placements require either a 5:1 or a 16:6 aspect ratio image, with a minimum 2,000px along the horizontal edge.
- If you aren’t sure what size the website uses, crop for a 16:8 aspect ratio, with your subject centered (top to bottom) in the image, and space around the subject should additional cropping be required. From there it can be cropped as needed.
- Horizontal Images
- More universal to place.
- Vertical Images
- More challenging to place.
- Expect that a vertical image will occupy 50% of the width of the page. When it does, it will need to be offset by content of a similar height, which can be hard to do. For this reason, 8×10 is a is a very usable crop size. Anything narrower presents more challenges to use on a website.
- My Raw image is 7952×5304
- Cropping 8×10 in either direction works well.
- Cropped to a 16:6 works well, but cropping to a 5:1 does not.
- The point here is, plan ahead!
- Someone has to make the photos fit onto the website, and the easiest way to do that is to take them with intent & with a plan. If that isn’t possible, shoot with your big sensor and at a minimum, make sure we can crop a 16:6 ratio image out of it with your subject centered (top to bottom).
- As you can see in the photo example below, just because you take a great shot, doesn’t always mean it will fit in the space that is available.
Aspect Ratio
Aspect ratios aren’t talked a lot about in photography but, when it comes to websites, having a consistent aspect ratio is critical to having photos that can be used in a variety of different placements. Look how this slideshow has 3 photos, of different aspect ratios. To make the photos usable, is extra work for the developer (a cost passed onto the customer) and even that will come at a sacrifice to the quality of the images. While “you can generally make something work” that isn’t an optimal approach when the client is paying for the photos.
Product Photos
Poor photos of products have a direct correlation to poor sales while great photos, can really boost sales! Your strategy and approach is just as important as the shoot itself. If you can, check out the website you are shooting for, so you can see exactly where the customer wants & needs photos. Seeing the layout can really help visualize why these points are important, and the type of content the client wants to fill the placements with.
What is important to your client:
- Color saturation – colors that do not appear to be “real life” can be misleading, which creates customer frustration.
- Presentation – if they are paying for photos, they want well framed, crisp photos.
What is important for your clients website:
- Include enough image pixels so that we don’t have to stretch the images.
- Use consistent aspect ratios.
- Consistency in product framing.
- Multiple photos. The first photo should represent the product in its entirety, the best possible way, occupying as much of the photo frame as possible with a small amount of padding around the subject. All other photos should dial the customer into the subject, illustrating benefits, features, and detail. The reason your customer may not ask for this and your website company will, is because your website company is thinking about the entire customer purchase cycle, not just the representation of a single product. Take photos of all product labels for illustrative purposes.