6 Common Mistakes You’re Making When Adding Images to Your Website

Images are an essential part of your marketing strategy.  I’m sure you have heard this many times before, “a picture is worth a thousand words.” Well, according to NewsCred:

• Articles that contain images get 94% more views than articles without.
• 40% of people will respond better to visual information than plain text.
• 93% of people say that visually imagery is the #1 factor impacting purchasing decision.

With that being said, after you’ve spent hours crafting the perfect blog post or page, don’t wimp out on the visuals! Aid your message using a chart, graphic, video, or even gif, but no matter which medium you choose, don’t forget to make sure that the file is fully optimized.

As important as they are, visuals can slow down your site’s load time dramatically. With that in mind, here are six common mistakes you’re making when adding images to your website and how to avoid them.

Mistake #1: You uploaded gigantic images.

Keep this in mind: most visitors wait about three seconds for a website to load on desktop or laptop and about five seconds on their mobile device. If your image takes longer than that to load, you can wave your visitor goodbye because they don’t have the patience to wait.

Solution: Decrease the size of the images on your website, by using Photoshop’s “Save for Web & Devices” or for those who don’t have photoshop, Compressor.io. Try to keep your file below 700KB.

Mistake #2: You didn’t rename the files.

It’s really easy to overlook this one.

Many people just keep their default file name, whether it is the naming convention from their camera or from a stock photo site, but when it comes to SEO, it’s important to include your focus keywords to help your page rank for them.

Creating a descriptive, keyword-rich file name is absolutely crucial for image optimization.

Search engines not only crawl the text on your site, but also the keywords within your image file names.

Solution: Take the extra few minutes and rename your image, but remember DO NOT KEYWORD STUFF.

Mistake #3: You didn’t add a description (ALT-tag).

Just like overlooking renaming your image, many people tend to overlook adding an ALT tag.

ALT tags are a text alternative to an image when a browser can’t properly render them and also help the visually impaired get a understanding of what kind of image you have displayed on the page.

Like your file name, your ALT tag also adds SEO value. Appropriate tags to the image can help you website achieve better rankings when robots go to crawl your page.

Solution: Just like taking the few minutes to rename your image, take a few more minutes to add an ALT Tag to your image. Simple rules to follow when it comes to ALT tags:

• Describe your image in English, just like your file names
• DO NOT KEYWORD STUFF

Mistake #4: You used wrong file extension.

Many would ask, is there really any difference in the different file types? The short answer is, yes.  Not all file formats are the same, each has specific uses, with it own sets of pros and cons. Here’s a breakdown of the most common:

• JPG (or JPEG) has become the standard image of the web. JPG images are ideal for rich color photographs, gradient images. JPGs are also “loosely,” which means they retain all color information but compress file size which can result in a loss of quality.
• GIFs are lower quality images than JPGs and are great for those with simple illustrations and blocks of colors (not the best option for photographs). GIFs are also widely used in animation because it is the only file type that enables transparency and interlacing.
• PNGs are becoming more popular. PNGs support many more colors than GIFs and they don’t degrade over time with re-saves like JPGs. This file type is good for logos, charts, etc.
• SVG is vector format that will remain sharp and clear no matter what device you view it on.

Solution: Learn the difference between the different file types and make sure that you are using the best option for the image at hand. Doing this will help ensure that your image has the biggest impact possible, without slacking on technical performance.

Mistake #5: Your image just doesn’t look right (distortion).

Distortion of images often strikes when you least expect it. The most common version is seeing your image stretched out of proportion.

Distorted Image

Properly Scaled Image

Solution: Scale the image proportionally and if that isn’t something you can control talk to your developer and have them take a look. In HubSpot, for example, grab from the corner of the image, if you grab from any other part of the image, your image will not scale properly.

Another common distortion occurs when the image was saved at low quality.

Solution: Take the original image and re-save it. If you are using Photoshop, you can preview and compare multiple versions of your image, and get the estimated download times.

For image sizes we typically like to keep our images no wider than 1200px and smaller than 600KB, but if it is a little over it isn’t the end of the world. We know if it’s tough to keep those detailed images from losing their quality.

If you don’t have Photoshop try out these other image editing tools, PicMonkey, Pixlr, FotoFlexer and GIMP to help you resize images effectively.

Mistake #6: You’ve bought a generic stock photo.

Yes, stock photos can be a convenient option when you don’t have the time to have your own photo shoot, but sometimes it isn’t the best option. There are a lot of overused stock photos out there and if you’re using one you know you’ve seen before, it’s likely your audience has too.

Solution: If you can’t find the time to hold your own photo shoot or create a custom graphic, take the time to look for the right stock photo. Look past the first page of search results. Find an image that is different and that is also a really good match for your brand. Even look for ones that you can edit or customize to fit your needs.

Take a look at this list of 10 Free Stock Photo Websites That Don’t Suck, that we put together. Then, if you’re still stuck, here are some tips to help you choose the perfect stock photo.