Images and Infographics

Iona Robson
Plant Based Planet
Published in
2 min readOct 19, 2018

Infographics are a great way to get people to interact with the website and take on information. According to Lloyd (2014), 3 in 5 people learn through visuals, making infographics an easy way to teach a large audience. For business growth, they are incredibly important, as proven by Siricharoen (2014) who says “Businesses that publish infographics raise their website traffic an average of 12% more than those that don’t”.

Infographics can be broken down into different types: maps, bar charts, line graphs, pie charts, pictorial and 3D. Butler (n.d.) makes some useful notes on how to ensure a successful infographic. To make sure the design doesn’t become cluttered and unreadable, the design should have a strong visual hierarchy and designed using a grid to keep it all aligned. Like in any design, white space is important to balance it out and allow for breathing space. This will allow the visual hierarchy to be noticed and draw the audiences eye around the infographic.

However, the key point Bulter makes is that designers must ensure they don’t skew data through visual representations. By comparing some visual charts, certain results may be implied to the audience. This is often mistakenly done through the use of scale in design and can lead to confusion.

Images are also incredibly important to a website. Fagerstrom states that “visitors do not read the text on your website, they scan”. They can make or break even having visitors to a site as the more high quality images, the longer the loading time. This is why it’s important to choose the right file format.

Photographs should be saved as JPEGs as they are better for an array of colour but slightly lower pixel quality. It’s recommended, however, that if the image is to be the page width, it should be at least 2000px to ensure no pixelation which could ruin the effect of the photo. They should be 72dpi as it ensures fast loading times with decent image quality.

As for illustrations, they are best set to PNG as they support transparent backgrounds. But, if a website is entirely PNG this will slow it down lots as PNGs are bigger files. The main thing is to always use save for web option when it’s available to ensure the image size vs quality is optimised.

Lloyd, I. (2014). Why Every SEO Strategy Needs Infographics — SEO & Marketing Blog — WMG. [online] WMG. Available at: http://www.webmarketinggroup.co.uk/why-every-seo-strategy-needs-infographics/ [Accessed 12 Oct. 2018].

Siricharoen, W. (2014). Infographics the new communication tools in digital age. [ebook] Bangkok: ResearchGate, pp.170–173. Available at: https://www.researchgate.net/profile/Waralak_Siricharoen/publication/256504130_Infographics_the_new_communication_tools_in_digital_age/links/0c9605232e6f666b1f000000.pdf [Accessed 14 Oct. 2018].

Butler, N. (n.d.). 8 Design Mistakes That Ruin Your Content (and Easy Fixes). [online] Column Five. Available at: https://www.columnfivemedia.com/8-design-mistakes-ruin-your-visual-content-easy-fixes [Accessed 14 Oct. 2018].

https://uxplanet.org/how-to-use-images-on-your-website-and-what-to-avoid-47a9d11c0b46

--

--