The E-Commerce industry has played a major role in the evolution of photography over the last decade. Many technological advancements in web design and development have enhanced the photography industry, launching an entirely new Photography approach specific to the digital marketplace.
One of the most notable web design advancements, responsive design, requires images to be optimized for a list of different media outlets. Sizing images for these outlets is simple but many brands find it difficult to shoot their collections and products in a way that translates to all outlets seamlessly.
In this Article we will walk you through the steps for effectively framing your images for multiple media outlets. In this example we will be looking at an image that was shot during a lifestyle photo shoot with BASKE California, a new and emerging footwear brand.
Before the shoot we met with the brand’s Creative Director and Co-Founders to devise a game plan for the creation of assets needed for their various channels. In this particular client’s case we needed imagery that would translated across their Desktop Website, their mobile website and all of their active social media platforms.
Creating this wire frame allowed the team to establish the direction of the photo shoot, enabling BASKE to capture a series of images that could be cropped to suit all of their digital needs.
When planning for your photo shoot it is important to remember that each media outlet has a different aspect ratio and needs to be cropped accordingly. Cropping the image accurately will determine if users interact and engage with the content or not.
Below are examples of the different aspect ratios BASKE wanted to accomplish, Homepage Banner – Desktop, Homepage Banner – Mobile and Instagram post.
This Checklist will help you ensure your prep process sets you up for success in shooting for multiple media outlets.
- Shoot Wide
- Shoot Landscape or Portrait
- Know the intention of the crop
Shooting wider is vital to making all the aspect ratios possible. See below desktop, mobile, and Instagram.
Homepage Banner – Desktop
The desktop webpage aspect ratio for a web banner is typically 1600×600 to keep the full photo in view when the page loads on a desktop computer.
- Shoot wide
- Shoot Landscape
- Full photo in view on desktop computer
Homepage Banner – Mobile
The mobile webpage aspect ratio for a web banner is typically 600×800 to keep the full photo in view when the page loads on a phone.
- Shoot wide
- Shoot portrait
- Full photo in view on phone
Instagram Post – Social
The Instagram aspect ratio is typically 600×600 for a square photo but can any aspect ratio. It is important to keep in mind the different ways to view photos on Instagram. In the wide all images are cropped square and viewed together vs the list where all images are viewed full size and one at a time.
- Shoot wide
- Shoot portrait or landscape
- Keep gallery or list view in mind