Updated: Mar 25
You've heard the phrase, "a picture is worth a thousand words," right? Well, in the online marketing space, that couldn't be more true!
As a professional web designer, nothing is more glaringly obvious that someone doesn't know what they're doing than their photos. The photos you choose to showcase what you do to the world are a dead giveaway of where you're at in your business. They can either say, "I'm a pro and I really know my stuff," or "I'm totally amateur and buyer beware!" In short, they can make or break you.
In my many years of doing this, I've seen it all. Hardly any website surprises me anymore, for good or bad. As such, I'm really good at spotting the subtle hints you're dropping with your photos. The general public might not be as attuned to it as I am, but they'll still sense something is off if your photos aren't up to snuff, even if they can't put their finger on why.
And this isn't just true of your product photos, either! It goes for ALL the photos you use, from blogs to banner images!
So what makes a good photo? What sets the pros apart from the amateurs?
Most of the internet, and most .JPEG files display at 72-dpi. That just means that for every square inch of image, there are 72 pixels inside. This tends to bring down image quality, especially with smaller images.
Conversely, most computer screens now display 1600 x 1200 pixels on your standard 22-inch screen. I've had clients in the past send me 3x5 images at 72-dpi to use on their websites... imagine how low-quality an image like that would appear on a screen that size!
And screens are getting bigger! Some people browse the web on giant 30-inch desktop monitors with a crystal-clear 4K HD display. You should keep all screen sizes in mind when choosing your photos - nothing screams amateur more than opening a website with a pixelated, granular, low-resolution banner image!
And it's not as easy as just getting into photoshop, upping the dpi and increasing the image size. There's obvious pixelation in the image of the herb stripper above, but can you also see the little 'halos' around the tool and the stalks? those are called .JPEG 'artifacts,' and they appear when an image has been scaled above its intended size. This is because image files only contain so much data - you can't create new pixels where there aren't any - not without some heavy editing, at least.
So what's the ideal size for photos? Generally speaking, I prefer photos in the range of 12 x 18 inches with 300-dpi. If the file size slows down page loading times, you can always scale it down from there. But it's much more difficult to scale an image up. So larger files are a better starting point.
The good new is that most smart phones can take super high-res photos now!
I know we're not all photographers, but as a designer, I've always had a good eye for composition, and my brain doesn't always understand why some people just - don't! I am consistently shocked when I hand my phone over to a friend to take a picture and the image I get back is cut-off in weird places, off-center, angled, or has some other odd composition... how do they not see it...?
But not everyone has a designer's or photographer's eye, and I forget that sometimes.
Some of the keys to good composition are:
Simplicity - eliminate clutter and keep unnecessary elements out of frame.
Rule of thirds - center-aligned images are great for product shots, but not as great for banner images, because they're awkward to put text over.
Tilt - lines in the environment should be straight, like horizons, curbs, trees, pillars, etc.
Lead Space - For moving subjects, or subjects facing to one side of the frame, there should be ample space toward the direction they are looking or moving in.
In the example on the right, the space is on the wrong side of the frame. It makes the planks of wood the subject and the construction worker an afterthought. It makes the viewer wonder, "Who is he talking to?" and distracts from the subject of the photo. Overall, it feels... unnerving.
Your average website visitor is not necessarily going to pick up on these small details. BUT they will be turned off, even if they don't know exactly why. Our brains are programmed to search for patterns, and visually speaking, we've evolved a fine-tuned sense to pick up on them. It's instinctual, and the human brain feels comfortable with some patterns, where it feels distressed by others.
Your colors convey emotions, and your photos should reflect that.
I've seen many websites make the mistake of not color-coordinating their photos with their site colors. Never-mind site colors that are uncoordinated, confused, and all over the place - I'm talking about photos with color pallets in conflict with the site's colors.
Your site colors affect your visitors' mood, and influence how they interact with your products or services. See the chart above for reference on the general mood each color can evoke in your visitors. If your photos clash with the colors that are already on your site, it can make your visitors confused about how they should feel when looking at them.
So be sure that your photos evoke the mood you want to convey, and the color scheme of the photos don't clash with the rest of your site's colors.
There is so much more I could teach you about photo coordinating, this is just a place to start. I hope it helps!
Need some help with developing your site photos? Book a free 30-minute gameplan call with me & we'll go over effective strategies for using images to your advantage! 😄