Increase traffic and conversions with images best practices

Increase Your Traffic & Conversions With Correct Use Of Images

When adding content to your website it is often tempting and easier to use graphics for things like buttons, separators and banners but there are many drawbacks of doing so. Not only is it easier but perhaps we think that adding graphics in place of text is sometimes more visually appealing, however this is not always the case either.


In this post I hope to explain:

Checklistfirst the reasons why we should think about using code or text (html and css) over graphics where it is possible.

ChecklistThen I will explain when and how we should use graphics to get a good healthy balance and keep within Google guidelines of correct use of images.

ChecklistI hope to show and demonstrate how using best practices when it comes to graphics on your site will massively improve your websites usabilty.

ChecklistThese changes will increase traffic that comes from the search engines and be a tool that will increase your returning visitors and followers.


Let’s bear in mind that using best practices does not only benefit the sole purpose of that practice but by using best practices Google will rank your post higher. Not using best practices will have a negative impact on your SEO and your user experience. This means less visitors, less conversions and less returning visitors.


Reasons To Use Code and Text Before Deciding To Use Graphics Wherever Possible.

W3C Accessibility Standards1 – Google and The Visually Impaired Cannot Read Images.

Are you using graphics that have content in? By this I mean a button graphic or a banner that has been completely created in a graphic editor like photoshop. As they are 100% graphic they usually have no code associted with them and are just inserted as images. If you are not sure you should ask your designer about this because Google and the visually impaired cannot read images.


It’s not just important to make all content accessable to everyone it is absolutely essential and the law. If you run a website for your business and it does not reach the design standards for accesability you could be sued for discrimination. Check out Web Accesability In Mind to see the relevant laws for your country.


As well as those with disabilities Google Bot cannot read images. This doesn’t mean that images should not be used. It means that text should always be used for links, important names, titles and content. Buttons should be styled with css and alt tags (code added to images to show alternative text for them) should always be used when you use an image.


When you are creating your pages you should always ask whether your page can still be read even with the images switched off. To answer this I use a tool for firefox called the Web Developer Add-On. Use the images drop down to switch off your images to see how your page is viewd. How about if a text reader is relaying the information to a blind person? Can they understand it and navigate properly? And what about Google Bot? Can it read all your important content and navigate properly?


turn off images


See these two buttons? Now switch off your images and see the difference?

I’m A Button With Real Text 0% Image




So the first button is made with a real text link and is styled completely with css and the second button is 100% image added as an image and linked up to a link. Unless the image has an alt tag it will not be read at all by a google bot or a text reader so will be completely missed.

Yes you can use the alt tag but as a button should be a link, the link should be a html text link and this shows Google that the button is more important and should be followed rather than an image.


Google Page Speed2 – Pagespeed.

Another reason why we should use text and code before using images is that images take time to load. If your images are not optimised (made into the smallest possible file size without loosing quality) they will have an impact on your speed loading time and this will force your users to leave and you will lose your credibility with Google..


Here are a few statistics that may surprise you about website speed.


  • 40% of people will leave a page if it takes more than three seconds to load according to a study by Akamai.
  • A one second delay in page time equals a 7% loss in conversions, 11% fewer page views and a 16% decrease in customer satisfaction says Radware
  • There was a report by Web Performance Today that Walmart saw a 2% increase in conversion for every one second of improvement. That’s 2% per second.


How quick is your website loading? Take a look with the Google Page Speed Tool. This will give you a score out of 100. If your score is in the green then congratulations. If it’s in the orange or yellow then you should take a look at what it recommends you fix. It will even explain what those recommendations mean and how you can fix them yourself.


When Is A Good Time To Use Graphics?

As said earlier this doesn’t mean that you shouldn’t use graphics. Graphics should be used in some instances to make the page visually appealing. Images capture the readers eye, separates the content nicely and adds SEO value. This means you can actually gain traffic from correctly optimised images.


So How Do I Correctly Use Images To Increase Traffic & Conversions?

Here are the best practices and tools that you should be using to correctly use images in your posts and pages.


1 – Make sure all links are made with text and styled with css.

Do not use images for buttons and links. The easiest way to implement this on WordPress is to use shortcodes. Often themes come with their own shortcodes. Shortcodes are a bunch of ready made code that you can copy and paste into your posts. The theme creators have already created the styles for you so you just choose the style you want, get the code and paste it into your editor. If your theme does not have shortcodes you can easily find a plugin to add to your theme that will allow you to use them such as these recommended shortcode plugins.


2 – When using images make sure you optimise them.

That means adding alternative text and reducing the size of the file so that it does not take too long to render in the users browser. Here is a good guide by WordPress for adding images


3 – There are a few ways you can reduce the file size of your images.

You can do them manually with a program such as photoshop. There are free online tools you can use, just do a Google search for image optimizer and you will find loads. I like to use a plug in called which optimises all your images by the click of a button and everytime you upload an image.


4 – Make sure you test your site with Google Page speed when you are finished.

If there are images that need to be optimised, this tool will tell you.



If you want to know if your site is properly optimised or want help getting it optimised please let me know and I will be happy to advise you








  • Ah that’s treasure for us non-tech savvy peeps 😀 jazakillah khair Sarah 🙂

    9th April 2016 at 6:26 pm

Leave a Comment: