The BentoBox guide to photography
Edited

Websites built by BentoBox rely heavily on photography. It’s often said that we eat with our eyes before we taste our food, so photography can be a powerful way to connect with potential customers on your website. Click here for more reading on how important great photography is to the success of your website. In this article, we’ll go over our recommended photography specs and what makes for good photography. 

Photography Specs

BentoBox websites are fully responsive which means that there are no set dimensions for images as they adapt to fit the website visitor’s window as best they can, be it on a mobile device, desktop computer, or tablet. 

bento-photo-handling.gif

In most cases, this will cause cropping to occur on the images on your website -- since there are infinite screen sizes, it’s not possible to account for them all, but we do have some recommendations so as to optimize their appearance.

  1. Make sure that the focal point of the image is centered horizontally and vertically, with some additional space around it (not zoomed in/close up). The main piece of your image should always be in the middle of the picture. 

  2. Try shooting multiple dishes overhead, at a 90-degree angle (flatlay).

  3. In general, photography for use on websites should be shot in landscape orientation (wider than it is tall).

Recommended aspect ratios

  • General full-screen width hero images - 16:9

  • General thumbnails - 3:2

  • Online ordering store hero image - 4:3

  • Online ordering store thumbnails - 4:3

  • Logo - varies by design

Recommended file sizes

  • General full-screen width hero images - min. 2000px wide, < 800kb

  • Online ordering store hero image - min. 2000px wide, < 800kb

  • Online ordering thumbnails - min. 1500px wide, < 300kb

  • Logo - 500px-1000px wide, < 300kb

File settings

  • Save all photography in JPG format only

  • The logo should have a transparent background and be saved as a PNG

Color settings

  • RGB color mode

  • sRGB color profile, or “save for web”

Quality

First and foremost, before even uploading your photos to your BentoBox website, you want to make sure that you have good-quality photography. Try to avoid using photos taken from your tablet or cell phone; the quality may look good on your device, but once uploaded and blown up, they often look grainy and pixelated. If cell phone photography is your only option - we totally get it -  just make sure to reference the “Specs” and “Size, Resolution & Format” sections below to make sure you’re getting the most out of those images.

Whenever possible, use photos taken with a proper camera, or, hire a photographer for a photoshoot. 

Stock is also an option; you can rely on ours, or head over to any of the stock photography websites out there -- we find that Unsplash and Stocksnap have some great options if you’re looking for free stock photography. Just be sure to cross-reference the resolution and image size with our Photography Specs section above when downloading. 

Size, Resolution & Format

The top three things you need to be aware of when uploading imagery to your new BentoBox website are the following: image size, resolution, and file format. 

Image Size

Image size is the actual size of your photo or image in pixels. This includes the dimensions and actual kilobytes (KB) or megabytes (MB) of the image (or how “heavy” your image is). For your BentoBox website, you’ll want to use images no larger than 800kb. The larger your image files are, the longer it will take for your website to load. Keeping your images at or below 800kb means your photography will retain their quality without compromising the rate at which your website loads.

Resolution

Image resolution is how many pixels are displayed per inch of an image (ppi). Normally when you print something, you want a high resolution to ensure print quality; in web design, you want to balance resolution with image size. For your website, you’ll want images with a width of about 1800px, and a height between 1260px - 1500px. Any higher and you risk slowing the page down, and any lower and you risk a low-quality image. 

Pro-Tip: If you’re downloading stock images, use the “save for web” option if available; that way it’s already optimized for web design, and you, the user, don’t have to do anything and can skip worrying about resolution and image size. 

File Format

A file format defines the structure of the file. The BentoBox platform is equipped to host JPG, PNG, and GIF images. JPGs are great for photography as they do a good job of compressing the file size, and the integrity of the color profile is maintained. To optimize your photography for web usage, make sure to save your images with an sRGB (standard RGB) color profile. In contrast, PNG files are typically “higher quality” than JPGs, resulting in larger file sizes. Unlike JPGs, though, PNGs can handle transparent backgrounds - which makes them perfect for logos and illustrations.

GIF files support basic looped animations. GIFs are generally larger in size due to the amount of information they carry and should therefore be used sparingly on your website to avoid the risk of dragging down your page loading time.

Uploading photos

For more information on uploading and managing images in the BentoBox backend, click here for instructions on using the Media Gallery.