Different Ways to Display Infographics on Your Site

HigherVisibility Publisher Channel Content by

ways to display infographics

Whether you’re hiring someone to create an infographic for you or you are creating it on your own, it’s an exciting content-type to start working with. Infographics are a great way to keep a readers interest and help explain complicated or boring subjects. So once you finally have your infographic ready to go, it makes sense to get ready for that increase in clicks and engagement.

Unfortunately, your amazing infographic isn’t going to do any good if you don’t know how to display it. There are different options you have for embedding your graphic onto your website, so it’s important to take the time to really understand how to display your graphic correctly. Lucky for you, it’s pretty easy.

Getting Technical: How to Display Infographics on Your Site

Whether it be that you can’t fit the entire infographic on your site or something is going on with the images, there always seem to be challenges that people have to face when trying to use infographics on their websites. Fortunately, there are tools and techniques out there to help.

Below are a few different ways to help you successfully display an infographic on your website:


This is probably the most popular option that you’ve seen in the past.

Embedding on your site means you use an embed code, which is provided by the company or person who has made the infographic. You copy and paste this embed code to put it on your website and you’re set to go.

Unfortunately, many companies are not offering correct embed codes because it is so easy to make an error, which can lead to a problem when others try to copy and paste these codes to use the inforgraphic on their site. This is where the Embed Code Generator plugin comes into play. It helps you generate an embed code right within the Add Post section of WordPress.

All you need to do is install the plugin and fill in the information—URL to the image, where the image should link, title, alt attribute, etc. It will generate the code for you so that others can then take this code and re-post on their own site.


This plugin will help make sure the infographic is sized correctly.

Most blogs have a width of around 600 pixels for posts, but infographics typically range from 800-1000 pixels, causing problems for those trying to display the graphic. What many companies do to compensate is simply shrink down the infographic so that it fits, but as you might imagine, these infographics are never very successful because the print is too small to read and the images are too small to really see.

You have two options to solve this problem:

  • First, you can make it so that people can click on the image and then have the image open to its normal size in a different tab.
  • Second, and probably the best option to solve this problem, is to use a plugin called Lightbox. All you need to do is install the plugin, link to the image itself, and then readers can see the infographic as an overlay over the content. There is a dark or light background that will make sure the background page is dimmed so you can easily see the infographic. In other words, they will be able to see the full size image without having to leave the page.

The Takeaway

Getting infographics on your site correctly means more than just generating the right codes. Keep in mind that embedding an infographic incorrectly can be very obvious on some websites and look unprofessional, so not only will some of these tools help you simply get the infographic on your site and help people share, but they’ll also help ensure that people aren’t clicking away.

Extra Tip: Remember to really do your research before deciding if an infographic is right for you. Infographics work best if they are focusing on something specific and they aren’t too cluttered with numbers and images.

Do you have any ideas about how to effectively display infographics on a website? Has anything worked for you or not worked for you in the past?

Working Photo via Shutterstock

More in: 3 Comments ▼

HigherVisibility HigherVisibility is part of the Small Business Trends Publisher Channel, offering a full range of professional interactive marketing services. The mission of HigherVisibility is to provide clients “Valuable Solutions with Visible Results.” HigherVisibility works with companies of all sizes, offering advice on topics ranging from keyword research to algorithm updates.

3 Reactions
  1. I really like it when people make infographics more bite-sized. Whether that means chopping up a really long one into smaller sections or just designing a handful of them instead of the one mega-infographic, it makes it more interesting and readable to me.

  2. Nice post. Time and time again I see people with badly displayed infographics. Like the idea of using lightbox to correct this and sort out sizes etc… I also think there are a lot of people/sites out there who just pinch infographics from other sites and display them on their own site, ignoring the embed option – without really thinking of copyright infringements. Not sure how Google rates infographics anymore either.