How to Use Your Brand Photos on Your Website

How to Use My Brand Photos on My Website

I can remember the first time I put my website together. I'd spent more weekend days than I care to admit perfecting what I felt was a beautifully designed site – oh my sweet innocent self.

The truth is, it was a hot mess but you don't know what you don't know.

After working with industry experts and lots of self-education my site is WAY better and continually improving!!

Today I want to share with you how to maximize your website with your newly created brand photos because trust me THIS will help make a world of difference!

Step 1: Terms as they relate to your website and photos.

Hero/ Banner Image

A large full width image usually the first thing someone sees when they land on your website.

Usually taken with lots of negative space to the left or right of the subject so that the header and tagline text can be easily placed.

An example of a hero image with negative space to the right for text.

Slideshow

A series of images that showcase behind the scenes, products, or services. These photos depending on your website will either be vertical or horizontal.

Pro Tip: It’s a good idea to know which orientation you prefer ahead of time so that the impact of the photo isn’t compromised by a bad crop.

Example of a slider gallery from Wix with vertical images.

Collection Images

Usually much smaller and are either a square of vertical crop. Primarily used to showcase products or services.

This is important because you want to make sure the photographer composes the photo for a vertical crop!

Example of a collection image with a square crop on a Shopify website.

Inline Images

Inline images are used to support copy on a website. Usually a mix between custom stock photography or lifestyle photos.

These can be a mix of both vertical and horizontal. If you want to be real on top of your game play around with the different orientation options and see if there is a preference. If you find your gravitating toward horizontal images then make sure that’s the bulk of your images you use on your website.

An example of an inline image to support copy.

Step 2: Sizing and Why It Matters

You would think that as advanced technology is that it would be a seamless experience when it comes to taking your beautiful photos your photographer gave you to add to your website.

Unfortunately, it’s not that simple and most websites have different standard sizes. So getting the sizing right is a MUST if you want your photos to have highest impact.

Who’s job is it to get the sizing right?

Yours - in order to create photos that will best suit your site it’s important for you to communicate with your photographer either before the shoot or before they deliver the gallery so they can crop for you.

All cameras have a standard crop, knowing the final size of the photo will be before hand can help your photographer make sure they are composing and shooting with that in mind. I can’t tell you how many beautiful photos I’ve captured only to see the crop size cute off most of the image dulling it’s final impact.

The right size for the job means the difference between amateur verse professional.

Where do you find image sizing for your website?

My favorite way to find out anything I don’t know is a good ole Google search.

Type in what are the recommended image sizes for (fill in the blank with your website host name.)

Step 3: The Power of Cropping

Now that you know the recommended sizes for your website it’s time to start cropping. Why crop?

Cropping allows you full control on how the image will look once placed on your website. I don’t know about you but there’s nothing more annoying when I drop a photo in only to have it focus on the wrong part of the photo - such a nightmare!

Given you’ll be using these images for a variety of platforms my best advice to make this as easy as possible is to create Canva templates that will allow you to crop the photo ahead of time.

Sometime website hosts will even give you the option to crop the photo right there - you just need to know the correct crop size.

Another great and totally under utilized tip is to crop your image down and create a whole new one.

This is especially useful if you find you don’t have enough stock images from your brand shoot for inline images. Play around with various ways to crop the photo and see what cool images you can create.

Step 4: Image Optimization

Probably one of the most important things you need to do for your website is make sure that your images are properly optimized.

Image optimization allows your website to load quickly. Now a days most consumers will bounce (leave) your website if the load time is longer than 3 seconds.

You and I may really despise this but if you think about it - you’ve probably left a website for the same reason.

So how do you optimize your images for your website?

Well, first it’s likely your photographer has already done this for you so check with them.

I use Pixiset to deliver client galleries, when client’s go to download their images they have two options High Res and Web Size.

Let’s say you want full control over the optimization - then I recommend a wonderful tool I use called JPegMini. It’s a one time purchase and it allows you to optimize your images without compromising the quality.

Step 5: Create a Beautiful Website

Alrightie now that you’re ready to put your photos on your website here are some pro tips to keep in mind.

Hero/ Banner Images with Text

You’ll want to have an amazing hero image that grabs your audiences attention and is specific to your business. This is a great place to have a photo of yourself if you’re a service provider or a custom stock photo.

Text color can be black, white, or one of your brand colors - this will depend on your preference visually.

If you find you’re having trouble with the text standing out enough trying bringing the image opacity down and adding shadow to the text. Most drag and drops websites offer this capability.

Pro Tip: try to choose an image that is minimal, too much in the photo will create confusion in your audiences mind on what they should pay attention to.

Break Up Text with Inline Images

You invested in quality photos and you need to use them! A wall of text is a big NO NO. People are more likely to engage and remember what they read when there is an image associated with it.

When a person lands on your page and see a whole bunch of words their brain goes into overdrive trying to find the most important info. And because it’s really overwhelming most people will leave the site to find one that is more visually appealing and easy to understand.

Inline images help build and communicate brand values without words. Copy then supports the photo by adding information.

Thanks so much for reading! If you found this blog helpful then you'll want to check out some other posts all about branding below.

If your working on building your brand and want to skip the learning curve check out my Free Authentically You 3 Part Mini-Series that walks you through the basic foundation for building an authentic brand.