How to Be Smart about Photos on your Website
The Sprocket Report
A picture may be worth a thousand words, but if it’s not helping to convert visitors to clients, your picture’s not worth much at all. Read on for how to make the graphic images on your website work for you instead of against you.
Earlier this year Microsoft released a study that says the human attention span is down to 8 seconds, one second shorter than a goldfish’s. To convey your marketing messages quickly, it only makes sense to use a few good photos. But it does take a little effort to make your photos “good.”
The main mistake website owners make is not sizing their photos properly. If you use your raw cell phone photos with thousands of pixels, you will drag down your site’s load time. On the other hand, blowing up 100 x 100 pixel image to be your banner image is going to look hideous.
If you don’t have a graphics program, try one of the free online tools like PicMonkey. Upload your image, crop or resize online and then save it to your computer. You will see the actual size of your photo as you work so you can create the exact size you need. A 300 x 500 pixel image is a nice size for most web pages, although banners need to be much larger. For social media platforms, there are plenty of online cheat sheets that provide size guides.
Pay attention to scaling as well as sizing. How many times have you seen photos that are squished flat or squeezed together to make them fit into a specific space? That’s lazy editing which makes your business look unprofessional. It only takes a couple of minutes to crop your images for the best impression.
Different from photo images, vector images scale appropriately as you resize them and are used for art such as logos. Crisp, clean logo images are particularly important to your company’s reputation, so don’t just scan your letterhead and upload it to your website. Use the original vector art provided by your graphic designer.
Images can be square (all sides equal), portrait (taller than wide) or landscape (wider than tall). Sometimes a logo looks awkward on a web page because it’s a “portrait” trying to fit in a “landscape” space. Consider creating both long and tall versions of your logo. For instance, Google’s new redesign includes a landscape logo with a square icon to match.
With PicMonkey you can crop photos to be landscape or portrait, but you’ll be better off if you shoot photos in the orientation that you need from the start rather than torturing the images to fit later. Make sure you have plenty of space so you can crop the image appropriately. Graphic artists can do plenty of photo magic, but it’s time-consuming and therefore costly.
Check out your competitors to see what kind of photos they use. Different industries have different styles and you want your images to tell the right story to web visitors. A professional photographer is really your best bet, but if the budget is too tight, at least do a little research first.
The final step to smart web graphics is to label them in the alt tag, the text alternative that describes the image. You may need technical help with this, but it’s important to your SEO and to folks who can’t see your photo. Keyword “stuffing” in the tag is bad, but the right text is good for everybody. For instance, if your website showcases custom sailboats, then a photo with an alt tag of “Sailboat with teak deck” is both people- AND SEO-friendly.
Studies show that visual content is not just pretty, it’s important to successful marketing. This is one of the places you may want to use professional services to make the best impression. Need advice from an experienced eye? Give us a call today! We’re always happy to help!