How do you optimize an infographic for your website?
Infographics are popular for communicating key information in a visual way. Infographics are perfect for sharing on social channels and for driving traffic to your website. You have your ideas, but where do you start and where do you want to end up? This article, “Quick tips on Infographic Optimization,” focuses less on the design and more on the optimizing of the actual graphic for use on your website. After all, if your image doesn’t upload to your website or your visitor can’t read it, what good is it?
Based on research of several articles as well as the default template size of various infographic generating tools, here’s some quick tips.
Pixel size for Infographics
What should be your pixel dimensions for your infographic? Canva uses a default size for their infographic templates of 800 pixels wide by 2000 pixels long. Other sources say target 600 pixels wide and a maximum of 8000 pixels long. My recommendation is to think about where the infographic is to be placed and how it is to be used. Are you putting it on a webpage OR in a sidebar? If you would like it readable on a webpage and you have a sidebar, typical webpages are ~1024 pixels wide with a sidebar of 250 pixels or so. This means for it render according to the actual size, you would want it to be less than 750 pixels in the page area or less than 250 pixels wide in the sidebar. This sizing is general and does not take into account spacing between columns, padding, etc., but it is meant to force one to think about the dimensions. My recommendation, if you are placing the infographic on a page with a sidebar, keep it to 600 pixels wide. If there is no sidebar, target 800 pixels wide. This offers flexibility in placement and provides some white space to enable the infographic to stand out and not look crowded. It also helps insure the graphic is also readable on most tablets.
If you are looking to use it on other social media channels, then see this infographic on sizing images for social media.
Your infographic should be less than 1.5 MB, preferably less 500KB. Tools like JPEGMini or TinyPNG can be helpful. Be careful when compressing your image size that you don’t loose too much quality and render your image unreadable.
Remember that JPGs are best for images that have graduated color like a photo. PNGs are best for vector images with simple colors, lines and fonts or if you want to have “clear” background.
DPI (Dots Per Inch)
A common guide is to save your image to 72dpi for the web, 150dpi for retina screens and 300dpi for print (e.g., poster or handout).
Keep fonts to a maximum of two styles. Make sure the final image is readable. Target only 3 font sizes. Remember sans serif fonts are easy to read. See the Design Resources page for an infographic on typography.
Aim to keep the number of colors to 5 or less, preferably 3 using variations within those three for emphasis.
Make sure your concepts flow, from top to bottom and left to right and use plenty of white or negative space. Don’t try to include too much information or you risk loosing the readers attention and making the graphic too complex.
See also this infographic on good and bad infographic design techniques.
The beauty of an infographic is that it conveys information in a simple visual presentation. In summary, think about where you are placing your infographic and how it will be used on your website. Be sure to keep your images clean and small:
- Target a pixel size of 800px wide by 2000 px long,
- Target a file size of less than 500 KB, and
- Leverage tools that can compress your image with minima loss of quality.
Use these tips to insure your infographic can present your concepts in a readable format on your webpage.