If your infographic is the star of the show, the backend of your website is its green room — the limited-access area that helps prepare it to look its best when facing the adoring public. Your infographic is no diva, but it does have some requirements, depending on its size and shape. 

Check out some of our favorite infographic formats, and get our best practices for making sure your website can handle whatever size you want to work with.

Infographics come in all shapes and sizes!

Some have data and charts. Some have photos. Infographics are a fun and flexible way to tell your story, no matter what format they take. When considering what size or shape to make your infographic, your options are limited only by your imagination. And the backend of your website. And maybe the time and tools you’re able to dedicate to the process. 

Most infographics Lemonly creates for clients are delivered as a JPEG, PNG, and/or SVG file (usually around 1,000 pixels wide by 6,000+ pixels tall), but that’s by no means the only way to tell stories with sweet infographic-style visuals. 

It’s best to start by considering the size or format that makes most sense for the story you’re telling. At least one of the following shapes will certainly suit your purposes. 

Classic infographic

Classic infographic (1,000 pixels x 6,000+ pixels)

• Traditional vertical format
• One of our favorites (we call these “classic infographics”)
• Great for most story types
• Fits about a page and a half of content
• Works nicely in a digital format, like a vertical-scrolling web page

Example: Classic infographic for the Country Music Association ›

Horizontal infographic

Horizontal infographic (1,000+ pixels x 1,000 pixels) 

• Optimized for horizontal scrolling
• Fits around a page and a half of content, similar to a classic infographic, just tipped on its side
• Handy for things like illustrated scenes 
• Also nice for pieces that will sometimes be printed and handed out 
• Might not be ideal for mobile devices
• But great for slide decks (if the text is big enough)

Example: Horizontal infographic for Lemonly’s 2020 annual report ›

Square infographic

Square infographic (1:1)

• Nice, digestible layout for a more limited amount of information (around half a page of content)
• Good reader retention since there’s not far to scroll 
• Be careful with text size (i.e., don’t try to post it on Instagram just because it’s square — you know better)

Example: Square infographic for Marriott ›

Microcontent (carousel)

Microcontent for a slider or carousel

• Broken up into slides, like a series of small infographics
• Works well for a series of stats or a step-by-step process (one main idea per slide, up to a couple bullet points or sentences each)
• Can be easily repurposed for social media, included in presentation decks, sprinkled throughout a blog post, printed and pasted onto a small ceramic tile to make a unique pendant necklace, etc.

Example: Microcontent series for WHO ›

Once you have an idea of the shape your infographic will take, it’s time to take a peek under the hood of your website.

Testing… testing… 

Infographics don’t always work if you  upload them to your website like any other JPG. You need to confirm your site can handle them. Unfortunately, some website backends don’t want to cooperate with an image over a certain number of pixels wide or long.

What’s the best way to be sure your website can handle whatever shape and size of infographic you want to make before you make it? It’s going to take some testing — and you might have to talk to your website overlords. 

How to talk to your web team about infographics 

If you’re not the one responsible for actually publishing content on your website, you should talk to your web team when planning to create an infographic. If you’re a Lemonly client, we’ll send you a fun little test infographic to upload on a private page on your site before we get started on your first infographic, just to make sure it looks okay. That way you know how the final infographic will look, and you can follow the same process when we deliver your final files.

If you’re not a Lemonly client, you can save an infographic from elsewhere on the web (even from our website — it’s fine) and use that as a test image. Just make sure you’re saving it at the right file size/dimensions (typically 1,000 px wide for a classic infographic). 

If you’re going for a carousel or slider-style treatment, you might need to have a more detailed discussion about functionality with your web team.

Once you have a test image on file — get it? 😉 — for your vertical, horizontal, or square infographic, it’s time to approach the website team. A simple email like this should do the trick. (You can even feel free to copy and paste — just remember to add the right names and dimensions.)

Hey [amazing and capable website colleague]!

Our team is planning to create an infographic to place within an upcoming blog post. I realize we’ve never done one before, so I wanted to make sure that would be feasible with the backend of our site.

[FOR A JPG] Would it be possible to upload this attached example infographic on a private page to see if that would look okay? We’re planning on the final deliverable being a JPG that is [XXXX] pixels wide and [XXXX] pixels long. Please let me know if our website has any limitations in terms of both image dimensions and file size.

[FOR AN SVG] Could we upload the attached example infographic to a private page on the site to see if that would look okay? The final infographic we’re planning will be a [static or animated] SVG approximately [XXXX] pixels wide and [XXXX] pixels long. I’m including more detailed instructions from Lemonly, our infographic agency, below along with the test infographic. Please let me know if our website has any limitations in terms of both image dimensions and file size.

We want to make sure we’re designing the infographic to be as easily read as possible, so this will help us tremendously. Let me know if you have any questions! 

Cheers,

[Your Name]

Boom! Just like that, you can avoid a good chunk of hassles we deal with when an infographic is delivered for the first time. 

Test infographic red flags:

• It cuts off before the end 
• It looks pixelated
• It doesn’t animate as expected (for animated infographics)
• It scales too small to read 
• It’s been somehow replaced with a stock photo of two pleasant Italian grandfathers playing chess in the park

After the test, if your website team mentions any limitations, particularly when it comes to dimensions, these should be noted right away and passed along to the creative team designing your infographic. 

Start shaping your stories with infographics

Even if a classic vertical infographic doesn’t work out with the limitations of your website, you can still use sweet visuals to help tell your story. It just might take a little extra creativity. Explore different sizes and keep testing things out on your website. It’s a great excuse to make friends with your web team! 

In the meantime, get some infographic inspiration from Lemonly’s past work.