5 Essential Elements to Using Images on the Web

The old adage is, “A picture is worth 1,000 words.”

And, old adages are often right. But in today’s digital age, a picture is worth even more. It’s worth Facebook fans, Instagram likes, and Twitter shares. It’s worth reader engagement, email newsletter signups, and click-through-rates.

In short – a picture – the right picture – can be the difference between making a sale and losing a lead.

The right picture can be the difference between making a sale and losing a lead.Click to Tweet

But, understanding the importance of images is only half the battle. You also need to know how to find and use them appropriately.

In this post we’re going to cover optimization, sourcing, and how to organize a successful photo shoot.

1. Optimizing Images

When it comes to image optimization, there are two different components to consider: sizing and share selection.

Sizing Images for the Web

The more data a web page contains, the longer it takes to load. Data includes all aspects of a web page – the text, typography (aka font), video, sound, and images. In the print world, high-resolution images are a must. But in the digital world they cause serious problems. Their file size it huge and takes a long time to load. While this topic is extremely complicated and deserves its own post (if not two or three) these are the main points to keep in mind:

Use images that are 72 dots-per-inch (DPI).
Reduce pixel height and widths to meet the specific slot for which they are intended.
Be smart about how you crop images for device screen sizes and densities. For example, users on an Apple laptop need an image with a higher density than users on Chrome Book or the image will be blurry.
Use srcset in img tags and use picture elements to wrap img tags to let the browser know which images to display. When do you use an img tag with src-set vs a picture element? If you need better art direction and have to completely swap image size ratio across screen devices. For example, if you have a portrait shaped image on small screens and a landscape image on large screens, use a picture element with nested img tags. Otherwise, an img with scrset works wonders. Read more about picture tags and srcset
Use Media Queries in css to denote different background images for screen size, orientation, and density.

Preselecting Your “Share” Images

Because social media has become so intertwined with our everyday lives, it’s important you put your best foot forward on platforms like Facebook and Twitter. What does this mean? It means when one of your blog posts or pages from your website is shared, they communicate a meaningful message.

Preselecting social share images ensures you’re always putting your best foot forward.Click to Tweet

Each page of your website and blog post should be optimized with a predetermined title, description (aka meta description), and image. This gives social media platforms like Twitter and Facebook the specific information you would like displayed.

To learn more about how this process works, check out our post on Twitter Cards.

2. Sourcing Images

Images can range from pictures and caricature drawings to infographics and picture quotes. But, where are you supposed to get images? Sure, you could snap a few pictures using your phone. But, sometimes that’s just not a great option or an option at all. Luckily, there are a variety of online resources at your fingertips. Here are some of our favorites:

Canva – This online design tool allows you to easily create your own graphics without needing a design background. The option has lots of great layout choice, but the pro plan takes things to a whole different level with additional fonts and editing capabilities.
Thinkstock – Powered by Getty Images, Thickstock gives you access to millions of royalty-free images. It’s important to note though, royalty-free does not mean the images are free. You will still have to pay for the right to use them.
Gratisography – A free resource, this site gives you access to tons of high-resolution images you can use for your personal and commercial needs. The pictures are only sorted into a few categories and you won’t always find exactly what you’re looking for. But, free is a very good price.

3. WARNING: Make sure you have permission to use any image you use.

Every image you see on the web someone worked to capture and/or create. Their work is protected by intellectual property rights. This means, using an image without permission is stealing and is a prosecutable offense. In order to protect yourself and your business, it’s essential you have permission for each image you use. Not sure about your use? Always double check with a lawyer - these laws can vary in the US state by state.

4. Professional Photography Lets You Tell Your Story

As wonderful as stock photography can be, it doesn’t compare to pictures of your actual business, products, and services. As you tell your story, you to want give prospects a look at what they can actually expect.

If you own operate a gym and your website shows pictures of tall ceilings and hundreds of cardio machines, that’s what new clients will expect when they visit. If you run a security company and every guard you feature looks like an ex-Seahawks linebacker, you might be over delivering.

What you want and should use is good photos that showcase who your business really is and what clients can realistically expect. To make sure your professional photo shoot is a success, here are a few of our go-to tips:

Create a Shot List – Prior to the photo shoot, take the time to think about and write down what images you need. Create a list of the products and services you want to showcase. Consider where the images will be used and what orientation would best suit that purpose. If you definitely need a stellar landscape photo of your business front entrance, make sure your photographer knows in advance. Identify each person who needs a headshot. And, determine what action photos you would like.
Have a Photo Release Ready – If you use any images of a person in which they are distinguishable as themselves, you need to make sure the individual has signed a photo release.
Prep Your Space – Just like when your in-laws visit, this is a time to put your best foot forward. Make sure to clean your space prior to the photo shoot. And, remove any items that might not be attractive such as garbage cans.

5. Quick Tips for Taking Your Own Photos

While we are definitely proponents of hiring a professional, sometimes we know that’s not in the cards. Use these five tips to get the best do-it-yourself (DIY) results:

Natural Lighting – Lighting is one of the most important aspects of great photos. Whenever possible, you want to shoot with natural light. Additionally, you’ll want to avoid shooting in bright, direct sunlight. This can cause intense shadows and lots of glare.
Knolling – Knolling is the practice of neatly arranging a variety of objects and then capturing them from overhead. You’ll want to use a background that’s pleasing to eye and relatively neutral. This allows the objects themselves to shine. Great backgrounds can include food plans, white surfaces, and cement floors. Here are some great examples and an awesome tutorial.
Reflectors – Reflectors allow you to bounce light and soften shadows. While you could buy a professional reflector, a large piece of white cardboard also works great.

Use a reflector to reduce harsh shadows.Click to Tweet

Rule of Thirds – You can find the rule of thirds in all aspects of life. For whatever reason, we as humans gravitate towards things that are broken into three parts. In the case of photography, this typically means breaking an image down into three parts both horizontally and vertically – which actually gives you nine sections total. Ideally, you want to place the subject of the image in one of the outer lying sections.

Tilt – As you walk through life, you’re not typically taking in your day straight on. Your gaze is often tilted ever so slightly. Adding a bit of tilt to your images can help them appear more realistic.