Building a website is a process that takes time. With content, site navigation and pages to think about, making sure your website runs efficiently is key to attracting customers and improving your SEO. This also extends to the images you use.

Laptop with image editing program open

Images are more important than you think…

It may come as a surprise, but images are usually responsible for the majority of your website size. The time taken for your website to load and its perceived performance boils down to the quality of your images. 

If you want to improve your website performance, making sure all your images are optimised is essential and it’s one aspect of your site that you don’t need expert knowledge in.


Sizing

When uploading images, remember to take into consideration the size of the image. Dimensions are important and they can change depending on the intended use. However, there are some general rules. For example, it is unlikely that an image on your website would need to be 6000 pixels wide. Here are a few examples of different sizes for varied use:

  • If most of your users are likely to be viewing your website on a monitor, a full width banner would need to be no bigger than 1920 pixels. Any more than that would waste bandwidth. 
  • Avatars tend to be a lot smaller, so the image size will reflect that. There are a lot of variations on the web of which size is best, but the consensus is that the maximum for avatar images should be 200×200 pixels. 
  • Content Management Systems such as WordPress have the tools to resize images for you on upload, but it is a good idea to resize them beforehand so that you can have more control over their appearance, rather than having to crop them afterwards. This also saves time on upload and storage space.

Choosing Appropriate Image Formats

Images can be saved in a variety of formats and it can get confusing which one to use. Which format you use depends mostly on the type of image you want to create.

JPG / JPEG

JPG image of scenery
Example JPG Image

JPG images are better for photograph-type images.

They can be compressed but lose quality if compressed too much. A certain level of quality loss isn’t necessarily worrying. Generally, you can get away with 60-80% compression before the quality is severely impacted.

Trial and error will be needed to find a good balance between file size and quality.

JPG Pros, Cons and Suggested Use

Pros

  • A level of control can be held over compression and quality
  • Most widely used image format

Cons

  • Loss of quality when compressed
  • Does not handle transparency in images
  • Does not work well for logos and text due to artefacts in images when compressed

Suggested Use

  • Display of images / photographs
  • Background images (such as in banners)

PNG (Portable Network Graphic)

PNG image of an elephant with transparency
Example PNG Image

PNG images are generally better for illustrations.

They won’t lose quality like JPGs and the overall output for PNG images will be sharper than the same image as a JPG.

Using PNGs for photographs is a bad idea as the file size will inevitably be larger.

PNG Pros, Cons and Suggested Use

Pros

  • Does not lose quality through compression (lossless)
  • Supports transparency in images

Cons

  • Usually results in a larger file size for more complex images such as photographs when compared to JPG

Suggested Use

  • Simpler images such as illustrations, potentially logos, icons and images that may be based on text
  • If transparency is required in the image (such as to overlay on a different background)

SVG (Scalable Vector Graphic)

Example SVG Logo
Example SVG File

SVGs are good for logos, icons and other small images.

They are also good for illustrations that aren’t too complex.

The file size is a lot smaller and they are able to scale infinitely without losing quality.

SVG Pros, Cons and Suggested Use

Pros

  • Can be scaled up in size without losing quality
  • Small file size

Cons


Suggested Use

  • Logos (as these are generally quite simple graphics)
  • Icons

Modern Image Formats

There are more modern image formats available to use that can offer greater compression with fewer quality loss drawbacks. These would include WebP, JPEG 2000 and JPEG XR.

Although these are seemingly the formats for the future, with WebP becoming increasingly supported by most modern browsers, the support is not quite universal at this moment in time.


Sourcing Images

Where you get your images is another thing you need to consider. Unless you take/create them yourself, you may come into trouble with copyright.

Avoiding copyright can be simple. Using Google search for images, for example, is a bad idea as images there may not be copyright free. Look to use some of the website that offer free stock photography such as UnsplashPexels and Pixabay.

There are some well-known websites that you are required to pay for, such as Shuttershock, but we advise checking out the free sites first.

No matter what images you intend to use, keep in mind the sizing, format and source to make sure your website remains running efficiently as possible.


Bonus

Enabling SVG uploads through WordPress

As standard, WordPress will prevent the upload of SVG files in to the Media Library.

If you are familiar with modifying aspects of your theme or have access to a developer that can help, the following can be added to your WordPress functions such as via the functions.php file of your theme:

/**
 * Allow SVG upload
 */
add_filter('upload_mimes', function( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
});

Alternatively, to achieve the same without the need for any knowledge with editing the theme code, you could install a plugin such as SVG Support.