The Ultimate Guide to Images for your WordPress Website

Images are crucial to any website. They can play a significant role in engaging your audience, showcasing your offerings and can offer a visual role in your branding. However, if not managed properly you may find that images can slow your site. This can have an impact on user experience and can even have negative effects on your SEO rankings.

In this guide, we will walk you through the best website development practices for handling images on your website, best methods for optimisation, and other ways to ensure the best way for your website to serve images.

With these helpful hints and tips you will be able to upload images without fear of impacting performance – and some may even help with SEO, website performance and user experience as a whole.

Having well optimised images is vital for your website. Here are several reasons why:

• Website Speed: Having fast-loading images will improve your website’s overall speed and performance. This could help with SEO rankings.
• User Experience: Quick loading images will help with your user experience. Although some of your customers may have a stable, fibre optic connection when surfing at home you also have to consider those who are trying to access your website using data on their mobile phones. Having well optimised images, or ones served via a CDN, could reduce bounce rates on your website, and avoid user frustrations whilst waiting for your site to load.
• SEO Benefits: Search engines prioritise fast loading websites. Optimised images on your WordPress website could positively impact your search engine rankings. Plus some additional steps, such as renaming your images correctly, can help.
• Bandwidth Savings: By having well compressed images can reduce your bandwidth usage, making them more efficient to load. This is vital for those who potentially have throttled hosting.

Below, we have collated some of the best practices that we would recommend for your WordPress images. Some of these tips may give only marginal gains, but if used across your whole site then you can be sure of large wins.

By following these steps, you can ensure that your website will remain fast, efficient and user friendly for all devices and connections.

When it comes to image file types, there are many to choose from. Each comes with their own benefits, but some can also have some downsides.

Using JPEGs Instead of PNGs Where Needed

Two of the most common image formats on the web are JPGs and PNGs. Choosing the right option for the right images on your site can help massively.

JPGs are ideal for photographs. Once correctly resized and compressed they offer a smaller file size than most other common image file types.

However, a JPG file does not offer transparency so that the image can be placed over a background. This is where a PNG file would be better suited. We would recommend that your logo file is a PNG file, as this file type also offers sharper edges, which is crucial for your branding.

By choosing JPEGs for most of your images, you’ll save on bandwidth and improve load times.

Next Gen-Image Formats

Next-gen image formats provide far superior compression and quality compared to traditional image formats such as JPG and PNG files. Using WebP and AVIF files can scientifically enhance performance on your website.

WebP, developed by Google, offers lossy and lossless compression. This means that you can reduce file sizes without compromising quality – ideal for websites for photographers.

AVIF, or AV1 Image File Format is even more efficient than WebP but may not be supported by all browsers yet. It is important to take this into consideration when using for your site, especially if your target audience are people who may not be as tech-savvy and use old browsers.

Although offering great savings to image sizing, you may have to ensure that your theme supports next-gen images, or adjust some of your WordPress settings to allow the upload of these files.

It is always important to resize your images to the dimensions required for your design. Using image editing programs such as Photoshop, or an online photo resizing tool such as Photopea will ensure that your website doesn’t have to use unnecessary bandwidth serving a large file.

By resizing your images to smaller sizes to suit your design will also most likely mean that the file size will be much smaller.

Image optimisation plugins are a great way of further compressing your images to remove excess bloat and file size when uploading. There are many available on the WordPress Plugin Directory, but as always with WordPress plugins it is always a good idea to choose a well-supported or premium version if possible.

One good option is Imagify, which allows a range of compression options on upload and can even convert your images to next-gen formats. Other well-known plugins include Smush and ShortPixel, which also offer excellent optimisation features.

When using any image optimisation plugins, you should ensure that the outputted images are compatible with your website and any other plugins installed on your website. You also have to be sure that your server will be able to handle any bulk optimisation tasks that these plugins offer, as these can be quite resource heavy.

Although these plugins can help save you time and image size, we would always recommend that you resize and compress your images before uploading to your site first – meaning that any potential savings made by the plugins will help even further.

A Content Delivery Network is a series of servers around the world that work together to deliver content such as images, videos and other digital assets. By having these servers closer to the user accessing your site, it means that these files can be loaded onto your website in a faster and efficient manner.

If you are using a CDN for your website images, this will normally result in your images loading quickly on your site. This can also reduce the bandwidth of your server as this will no longer need to load images.

Some CDNs, such as Cloudflare and Amazon CloudFront, can also provide image optimisation services. These can include resizing, compression and converting to other formats.

Although CDNs can improve your overall website speed and performance, they do come at a monthly cost.

Caching plugins are a quick and easy way to not only improve the loading times of your images, but also enhance your website loading times overall.

A caching will store static versions of your images, meaning that your server will not have to load every time a user visits your website. By doing this, your images can appear almost instantaneously in an efficient manner. Some caching plugins work in tandem with Content Delivery Networks to improve this further.

Some popular caching plugins include WP Super Cache, W3 Total Cache and WP Rocket. It should be noted that although these plugins do offer fantastic performance savings for your site as standard, you may have to tweak some of the settings to ensure that your website loads correctly.

Images can improve the visual look and feel of your website, but did you know that they can also be used to help with your SEO efforts? By correctly renaming images on your site with relevant keywords can help enhance that page’s visibility in search engine results.

For example, instead of uploading an image originally titled “IMG1573.jpg”, use descriptive names that use relevant keywords such as “carpentry-services-norwich.jpg”. Using hyphens for spaces can help improve readability for search engines to help your efforts further, helping you build better rankings and more relevant traffic.

If your web page has lots of images then be sure to mix up the names of your files to avoid over optimisation of that page.

By correctly managing and optimising images on your WordPress website can offer you improvements in user-experience, SEO efforts and website performance. However, before you start bulk editing, installing plugins and making wholesale changes to your website it is always a good idea to consult your website development and SEO agency beforehand. This will ensure compatibility with current functionality on your website and avoid conflicting works already made.

If you are interested in our website development and SEO services, then please get in touch with us today for a free, no obligation chat.