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 online shop, images are one of the keys for user engagement and conversions.

The three main reasons why they are so important are: branding, user experience and SEO.

We often compare websites with art galleries. White walls, popping images and content. Less is more. No distractions. Content is king so to speak.

We often get asked by our clients what to look out for when selecting and adding images to their websites.

That’s why we thought to list some of our recommendations below.

Website image selection and preparation

Branding and an exceptional user experience distinguishes your business from your competitors.

It’s important to start with high quality images. Best to engage a professional photographer or to use quality stock images.

The image has to tell a story, be suitable from a visual communication point of view and help to increase conversions.

As we all know users don’t spend a lot of time on individual pages. That’s why capturing their attending is so important.

As they say: “A picture is worth a thousand words”.

Image file dimensions and size

With Google's mobile first approach the page load time is one of the ranking factors and an important part of the user experience.

It’s best practice to save the image the actual pixel size it will be displayed. A blog post image for example could be 900x600 pixels.

Your website will also look more attractive if you use a consistent style and size. This is extremely important for blogs, product lists and galleries.

The file size of images should be 100KB or less. A resolution of 72dpi is enough for web use.

Image file formats

JPG

Photographs are best saved as .jpg.

This file type can handle all of the colors in a photograph in an efficient way.

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

PNG

Graphics, especially those using large, flat areas of color, should be saved as PNGs. The PNG format also supports transparent backgrounds.

SVG

SVGs should be used for logos and icons. SVGs can be saved as a flat file or as SVG Code.

Note: Three are also icon libraries, like Font Awesome, 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.
  • Use descriptive keywords in the file name.
  • 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 using the Adobe CC suite. Especially Photoshop and Illustrator for editing images, icons and logos.

Some alternative free online image editing tools are:

Free stock image libraries

In case you have any questions or want to speak to one of our experts feel free to contact us for a free half hour consultation.