How to make sure your photos are helping, not hurting your website

A website can only be as great as the content it contains.

In my 10+ years designing sites for businesses I’ve found it doesn’t matter how beautiful the site is if the content sucks, and it doesn’t matter how simple the site is if the content is superb.

By the way, when I say content I mean two important categories: written content (the words on your website, your Instagram captions, etc), and visual content (brand photos, stock photos, graphics).

We’ll talk more about written content later, but today I wanted to share a few tips on making sure the photos on your website are helping and not hurting, because this is something I see all. the. time.

Print

First and foremost - grainy, poorly lit photos are worse than none at all.

I’d rather see you use absolutely no photos whatsoever than to put up that grainy headshot of yourself that you took against the bathroom wall with *gasp* flash.

I’m serious. Don’t do it. We can find a better way, I promise.

So Tip Numero Uno is your photos need to be well lit and clear. They can be basic as all get out, white background wall and all, so long as they are well lit and clear.

What if you just can’t even with the photography though?

There’s good news for the non-photographers... stock photos have come a LONG way.

Stock photos are high quality photos, usually taken by professionals, that are offered up for lots of different people to use. Some are expensive, some are free, some are pay-per-use. You have to have a license to use them, and those come in different varieties too - commercial or personal for instance.

They come in a million different types. You can find pics of bridal parties getting ready for the big day, families in cars laughing, animals, food, hipsters, hippies, you name it. They won’t help you with your headshot or pictures of your products, but for just about anything else you can find a stock photo that will work.

If the words “stock photo” bring to mind a terrifying mental image of white guys in suits sitting around a conference table with laser pointers, you’ll be pleasantly surprised to know stock photography is in the midst of making a full recovery from those days. The diversity isn’t *quite* there yet, but it’s gotten so much better.

I have a whole post here on how to find good free stock photos if you want more info on that.

Pictures on websites usually fall into one of two categories...

Let’s move away from the types of pics you can use and talk about how to make sure they look good on your site.

First, there are two main places you’ll use photos:

Header/banner images

These are the photos you might see at the top of a web page, or even throughout the first page of a website. They’re usually wider than they are tall, sometimes even the full width of the browser, and they may have text or buttons over them.

header - banner.png

Images inside content

Other images are mixed in with your written copy. These can be landscape or portrait layout, generally won’t have text over them, and will be much smaller to leave room for words on the page.

Images inside content.png

Banner photos should always be in landscape layout, but keep mobile in mind

As I mentioned above, one rule of header/banner photos is that they will nearly always be wider than they are tall. You want to keep that in mind when choosing a photo… I can’t tell you the number of times someone has asked me to use a tall photo in their header and then been disappointed when only a sliver of it actually showed on the site.

Another thing to keep in mind with these photos is that everything is a little different on mobile screens. For one, the header area will be much smaller, so you’ll want to choose a photo that translates well to being only about 2.5” wide, also the sides of the photo might be cut off as it zooms in on mobile, so try to keep any important content directly in the center.

Some pictures might need to be resized to work well on your site.

Adding pics to your site without resizing them could cause a couple of issues.

For one, if the picture you’re adding is really big, it can cause the site itself to slow down over time by taking up too much room on the server. There’s really no reason to use full size or full resolution images on your website.

Also, if you don’t know how to add pictures at the proper size, they can take over the page and push content out of the way. This results in a hard to read, poorly laid out site.

Fortunately, resizing your pics before you add them to your site is fairly easy.

If you’re on a Mac like I am, you can use Preview to resize any photo. First, make a copy - just in case something goes wrong or you decide to use the full size picture elsewhere later.

Then you can open the copy in Preview and choose Tools -> Adjust Size from the menu. In the popup box you’ll see Width, Height, and Resolution.

Since this picture is for a website you can lower your resolution to 150 and make sure ‘pixels/inch’ is selected in the dropdown beside it.

For the width and height, it depends on where you’re using it. I recommend a width of around 2000-2500 pixels if you’re using it as a header image. If it’s going inside the text aim for no more than 500 pixels wide, but you’ll have to play with proportions to find what looks best on your site.

If you aren’t on a mac, or just want a different method, there are several websites where you can resize pics for free. PicResize is one of the more popular ones and what I generally recommend.

Remember - you can make a picture smaller, but not larger.

Increasing the size of a photo from its original dimensions will make it pixelated, blurry, and generally crappy looking. You can always make a picture smaller, but increasing the size is a no-no.

Cropping vs. Resizing

Resizing a picture changes the dimensions of the whole photo. Cropping actually removes the parts you don’t want, leaving only the parts you want to see.

You can crop a photo in the Mac Preview app by clicking and dragging a box over the photo, then going to Tools -> Crop in the menu. Photo resizing sites will also have an option to crop instead of resize.

To place pictures, think of your page like a magazine with columns

When you’re finished cropping and ready to place a picture on your website, keep in mind that for the most part the picture is there to enhance the written copy. You want the copy to have enough room to be readable.

If your picture is taking up more than half the screen and the copy is squished over to one side - that’s not readable.

Pictures inside your content should take up less than half the page width

It helps to think about how magazines are laid out. Flipping through a magazine you’ll notice they usually have a larger/wider feature image at the top of an article - this draws you in and gives you some context, plus adds a little visual interest. The other photos throughout the article rarely take up more than the width of one or two columns of text.

Your website is probably not laid out in columns, but if you mentally divided it into four equal sections across the width of it, you would want your photos to take up less than ¼ to ½ of that on a desktop monitor. (This will be naturally be different on mobile)

Fortunately on platforms like Squarespace it’s easy to resize pictures once they’re placed by just dragging the handles. If you’re using WordPress you can select from predetermined sizes in a dropdown portion of the picture settings as you’re placing it or editing it.

A picture is worth a thousand words, but you still really need words

Hopefully this helps you feel more empowered when it comes to swapping out photos on your site or adding new ones altogether.

I want to leave you with one last note about pictures. They’re important, obviously. A picture really is worth a thousand words. But there are so many reasons you still need the words. Lots of people access the web with screen readers, which are mostly incapable of describing a picture, but can read every word on a web page out loud to someone with visual impairment or a disability.

If you use a photo to convey a piece of important information, but don’t actually write words about that information, you’re potentially leaving out part of your audience.

In the same vein, SEO (search engine optimization), which everyone is uber concerned about these days, also relies on rich written content to rank your site.

Even if you’re using videos to convey important information, I still want to see those words in writing. What about mamas who are holding sleeping babies while visiting your site and don’t want to risk waking them with noise from a video? Or people in offices or coffee shops or libraries?

Use your photos and videos to enhance your written words, not to replace, and we’ll keep the internet accessible and working for all of us.

Have more questions about using photos on your site? Hit me up in the comments and I’ll be happy to answer them!


Is your brand working for you? Grab my brand checklist and find out!

 

Here’s some more words you might enjoy