They Ask, You Answer

A revolutionary approach to inbound sales, content marketing, and today’s digital consumer.

Learn MoreLearn More

Free Courses in IMPACT+

Dozens of sales, marketing, and content courses inside IMPACT+. Start learning now.

See all coursesSee all courses
IMPACT+ Membership
IMPACT+ Membership
Coaching & Implementation Services
Coaching & Implementation Services

Services Overview

See how you can dramatically increase your inbound leads and sales.

Services Overview

Digital Sales and Marketing Mastery

Fast track your team’s success with IMPACT's most popular service.

Digital Sales and Marketing Mastery

Web Design

Launch a beautiful website that consistently generates leads and revenue.

Web Design

Virtual Sales Training

Equip your sales team with comprehensive training designed to help them close more deals in today's virtual-first world.

Virtual Sales Training

HubSpot Training & Implementation

Train your company to take ownership of HubSpot and get the most out of your investment.

HubSpot Training & Implementation

Case Studies

See dozens of examples of companies succeeding with Digital Sales and Marketing Mastery and They Ask, You Answer.

Case Studies
Become a Coach
Become a Coach

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

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

Melissa Smith

Sr. Front-end Developer, 8+ Years of Web Development Expertise, 2x Recipient of IMPACT's Helpfulness Core Value Award

April 26th, 2016 min read

common-mistakes-adding-images.jpgImages 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

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-350x150-.pngDistorted 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.

FREE On-Demand: The Website Optimization Summit Opening Keynote

Watch Liz Moorehead’s takeaway-filled opening keynote from the Website Optimization Summit for FREE inside IMPACT+.

Your business website should be your most profitable virtual employee -- closing deals left and right. Yet, business leaders and digital marketers just like you are unwittingly undermining the money-making potential of your website. 

Let Liz Moorehead show you the simple and powerful ways you can immediately increase the revenue potential of your business website, no matter what industry you’re in, in this information packed keynote.

Watch Free On-demand

Keep Scrolling to Continue Reading

Watch Liz Moorehead’s opening keynote from the Website Optimization Summit, FREE on-demand inside IMPACT+. Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it!
Watch Free On-Demand
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.

A FREE online learning community with on-demand courses, hundreds of expert-led sessions, thousands of your peers ready to support you, and much more.
Check it out
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!
Watch Free On-demand
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!