The importance of images for websites and what to look out for

The importance of images for websites and what to look out for

Whether you are managing a corporate website or an online shop, quality images are essential for engaging the user and converting clicks into sales. 

Images are the best way to communicate a lot of information in a short space of time. In a few short seconds the right image can tell a user what you do, your size, your level of quality, how you do it etc. and much more. As the saying goes, "a picture tells a thousand words."

Research tells us that website users scan websites, they don't read. Images are the best way to communicate complex information without forcing the user to read. They set context and convey a perception of your choosing.

Think of an art gallery. White walls, popping images and content all to draw your eye to the story on the canvas. Focus your message. Less is more. No distractions.

Other reasons quality images are so important are to communicate your brand, improve the user experience and assist with search engine optimisation (SEO).

We often get asked by clients, what to look out for when selecting and adding images to a website, so we thought it might be a good idea to list some recommendations below.

Image selection and preparation

Good branding and simple user experience can help a website stand out from its competitors.

It’s important to start with high quality images, this may require the use of a professional photographer or suitable stock images.

The image needs to be clear and unambiguous while also being in keeping with your brand and in the same style as all the other images on your site. Don't make the mistake of selecting stock images that are all shot with different lighting and styles.

As we know, users don’t spend a lot of time on a page so focusing their attending quickly is so important.

Image file dimensions and size

With Google's mobile first requirements the page load time is a key ranking factor and makes for a good user experience.

Best practice is to save your images at the actual pixel size they will be displayed. For example, a blog post image could be 900 x 600 pixels and only 100KB in size. A good rule of thumb on the internet, the file size of any image should not need to be larger than 200KB in size, saved at 72 ppi (pixels per inch).

Also keep in mind your website will look more attractive if you use a consistent image size across all images in the same section. Such as blogs, product lists and galleries.

Image file formats

JPG

Photographs are best saved as JPGs. This pixel based compression format can retain the most colours in a photograph when compressed at a high level of compression.

JPGs have a great compression algorithm and should be used when it’s important to have a small file size.

PNG

PNGs are also a pixel based compression format but are best when using large, flat areas of colour. They also have the feature of supporting transparent backgrounds.

SVG

SVGs are used for logos and icons. This is a vector based compression format, similar to fonts which doesn't use pixels. SVGs can be saved as a graphic file or in code.

Note: There are also icon libraries, like Font Awesome or Flaticon, which offer vector icons and social logos for your website. Those icons can be embedded and used similar to web fonts.

WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web to create smaller, richer images that make the web faster.

WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser. Developers have also added support to a variety of image editing tools.

How to optimise website images for SEO

  • Do not use blank spaces in image file names.
  • Do not use special characters in image file names.
  • Use descriptive keywords in the file name.
  • Separate words in file names using a hypen "-".
  • Resize images to optimise load time and appearance.
  • Use alt tags in the code when embedding the image.

Image editing software

At Flux Creative we are use the Adobe suite of products. Photoshop and Illustrator for editing images, icons and logos.

Some alternative free online image editing tools are:

Here is a brief tutorial video that shows you how to use Pixlr.

    Free stock image libraries


    If you have any further questions or would like to speak to one of our experts feel free to contact us for a free half hour consultation.