We recently did a presentation where we talked about the most important pieces of a brand style guide:
- your logo
- color palette
- brand fonts
- elements/patterns
- brand photos
Since we do a lot of website work, we wanted to walk you through what makes a great photo for your website and online marketing. It is one of the questions that we get the most! As you collect photos for your brand style guide, you can use the following tips to choose the best ones for your website.
Let’s be practical, on-brand, and still grab attention!
First and foremost, your website photos need to be practical. You might have a brand photo that you just love but there are a lot of things to think about when you are designing for a website. Websites are definitely different than print since you just don’t know what sort of device your customer is using to view your site. You don’t have control over the exact structure of your site like you do with your print marketing. Most of your photos will need to look great in horizontal and vertical format, as they will get cut off on certain devices.
What about hero images?
The most important images you will need for your website are your hero images (the ones that show up on the very top of your page and usually take up a lot of real estate). In a lot of cases, these images will have header text on top so it’s best if the photo has a lot of space on either side or in the middle for the text to be placed on top without competing with the background image. You’ve worked really hard on your content and brand messaging and you don’t want to take the focus away from that text or important calls to action.
These hero images are best without a main focal point because they will need to be formatted more vertically for the mobile and tablet versions versus your horizontal desktop website. Since having a responsive website is one of the most important items on your website development list, you may need to make a few hero image sacrifices to allow for the most visually pleasing site on every platform. See the images we’ve included above and below for examples of the photo clipped that we’re explaining here.
Note: If you are a Quick Launch website customer and want to skip to the quick tips list for your website photos, click here.
Where can I get images to use on my website?
Now that you understand the formatting of your images, let’s make sure you don’t get arrested! You’ll need to be very mindful of image licensing. No, that image you found on Google isn’t free to use where you’d like. Remember Google is just a research collection for you to view. Try finding royalty-free images on Unsplash or Pexels or purchase stock images from AdobeStock, iStock, etc., or, even better, have professional photography taken.
When using stock photos and images, be sure to choose relevant images. If it feels cheesy or generic, it probably is.
Bonus idea: When searching for an image, type in the hex numbers from your brand color palette into the search bar. You’ll find images with your brand colors included and you just may end up looking like they were taken specifically for your business!
Let your brand personality shine through!
Photography is another great way to convey the personality of your brand. Be sure to match those photos to your personality. Are you more casual and fun? Buttoned-up and super professional? Keep your personality adjectives front and center when choosing your website’s photos and other imagery.
Now that you have the right photos from the right places in the right colors, let’s talk about sizing for your website.
It’s all about the pixels!
For web design, it’s all about pixel dimensions. In your website photography, you will need a variety of sizes and orientations with the majority being horizontal images. You’ll want to err on the larger side because images can always be downsized, but you can’t make them larger without losing quality. So larger (more pixels) is better.
To check the pixel count of an image:
- Right-click on the image (or, on a Mac, control-click).
- Choose Properties or Get Info.
- Click the Details tab. (or, on a Mac, More Info).
- You’ll see the image dimensions in pixels.
What size images do you need for your website?
For normal screens, website images that are 1200-1920px wide should be perfectly usable. But we have one more fun consideration to throw into the mix!
Retina screens are becoming more popular and are being included as standard on a lot of newer computers. To allow for crisp display on a retina screen, it’ll be best if you double the pixel size to 2400-3840px wide and at least 1200px tall.
In general, the more pixels, the better. Your web developer will be able to size down or crop accordingly. We develop every site with an image optimizer in place so if you are not using us to develop your site, make sure that you have an image optimizer plug-in installed on your WordPress website so those large images that would make for a slow-loading site will be downsized as needed on your website.
Photo Naming – an easy win for SEO
Now that you have images for your website which are on-brand and sized as needed, we will leave you with one last bonus tip. Name your images using a few keywords that you are trying to rank for in search engine results. This will help with the website’s SEO (search engine optimization). For example, if you are a bakery and you’re using images of your delicious pastries, tell your audience what is in the photo as well as where you are located. So, a photo of an almond torte cake from a bakery in Pittsburgh, Pennsylvania might look like this: almond_torte_cake_pittsburgh_pa.jpg
That’s all, folks! Just remember to size your images accordingly, always use an image optimizer and use photos to help continue to strengthen your brand profile. Need more? Check out the full brand style guide blog and create your own today!
As always, we are here if you need us! Schedule a strategy session today!
Quick Launch Websites
Photography & Image Tips
Our Quick Launch website is very popular for those who want a well-built site without having to sacrifice quality because of a tight budget or timeline. Since the client is responsible for collecting content and images for these sites, we want them to feel as supported as possible.
Read below for tips on image collection for your site. Still need a little help? Book a strategy session and we will be happy to help you with all of your Quick Launch needs.
- Pixel Count: For normal screens, hero images should be 1200-1920px wide, but doubled to considerably retina screens. It’s best if your image is 2400-3840px wide and at least 1200px tall. How do you check pixel count of an image?
- Orientation: Your hero images, which show up at the top of your website pages, will be horizontal on desktop and more vertical on mobile and tablet versions of your site. See the pixel count above for the width and height.
- Color: use your brand’s HEX colors to search for stock photography with that color in the photo.
- Versatility: On a desktop computer your website will display horizontally and tablet and mobile devices are more vertical. Because of this, your image will need to be very versatile with no main focal point, if possible, since it will be cropped to fit the device. If necessary, you can use different images on mobile and tablet versus desktop for an additional development fee.
- Naming: Use keywords that you are trying to rank for in your image name. But make sure that you are using words that do describe that image as well.
Curious about our Quick Launch Websites? Check them out!
And don’t forget to share the goods with your small business friends!
