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.
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 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 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)
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
- Not suitable for complex images
- Not always enabled for uploading through various Content Management Systems (for example, WordPress would require a change to enable the upload of SVG files)
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 Unsplash, Pexels 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.