In the online marketplace, visibility is at a premium, and to rank well on search engines, optimising every element on your website is crucial. Images are high-calorie elements, laying unnecessary weight on an otherwise slender website. According to SpeedCurve, almost 75% of page weight is consumed by images, which can add up to more than 5 megabytes, a majority chunk of a website’s byte capacity. So, should you limit how many images your website has just to lighten the load? Not necessarily, but you should definitely give special attention to image optimisation.
Forty thousand years ago, humans understood the world purely in visual terms. Images, pictograms and carved symbols were the primary tools of communication. Modern humans are no different. Despite the arrival of the written word and the printing press, people respond more rapaciously to images. An image is far more pleasing to absorb — and more likely to be remembered due to the dual coding of visual information in our memory — than dense columns of text. In web design, if the ratio of image to text rules in favour of the latter, you seriously risk losing visitor engagement.
What Does Image Optimisation Mean?
Image optimisation is one of the most important aspects of optimisation on WordPress for SEO. Images provide balance and dynamism to a page and help to break down large chunks of text into more digestible morsels. This improves your website’s user experience and contributes to better visitor retention.
Heavy images, that is to say, high-definition images with a lot of detail, must be crushed down so as not to decrease the loading speed of your website. Let’s say a beautiful image of a sunset contains a count of 300 pixels per inch. This is often unnecessarily heavy for images displayed on screens. Optimisation will crush this figure down to a more sensible 72 pixels per inch. The image is fundamentally the same, except fewer pixels are available to create the image. The process of optimisation shrinks the image so the pixels have an easier job of filling the gaps the missing pixels have left. As a result, the trade-off is a slight reduction in definition. However, an optimised image can maintain more than enough of its original clarity and vibrance for the purposes of web pages.
Image optimisation aims to ensure your images look immaculate on both smartphones and desktops and enhance user engagement. The three key elements that play a considerable role here include:
- Image file size
- Image width and height
- Image compression level
What Are the Benefits of Image Optimisation?
Images are often the most significant contributor to determining the overall page size and substantially impact your website’s performance. Consequently, image optimisation is a key element of building a fast-loading website, enhancing your brand experience and increasing visitor retention.
Consistently following best practices in terms of image optimisation helps you lower your webpage’s weight, which leads to the following benefits:
- Improved website loading speed
- Improved performance
- Enhanced browsing experience
- Better website rankings
- Lower bandwidth usage
- Reduced amount of storage space required on the server
How to Optimise Your Image in WordPress?
Most websites encounter the same issues when utilising high-quality images. Problems such as large file sizes, inadequate optimisation, incorrect formats, unnecessarily large dimensions, unresponsive images and SEO errors such as missing alt text attributes are landmines too frequently tripped.
Here are some ways to optimise your images on WordPress for SEO:
Choose the Best Image Format
To get started, get familiar with several types of image formats that exist for better and more streamlined use of images. The most commonly used image formats are JPEGs, PNGs and WebP, which all have their strengths and weaknesses.
JPEG is a compressed image format that is best suited for photographs and complex images with a wide range of colours. It offers high compression ratios while maintaining good image quality. JPEG is the default format for most digital cameras and is widely supported across web browsers and devices.
PNG is a lossless image format that supports transparency. It is suitable for images with sharp lines, text and graphics. PNG images have larger file sizes compared to JPEG, but they retain more detail and quality. PNG is commonly used for logos, icons and images that require transparency.
WebP is a modern image format developed by Google that provides both lossy and lossless compression. It offers smaller file sizes compared to JPEG and PNG while maintaining good image quality. WebP is becoming increasingly popular and is supported by modern web browsers. However, because WebP is not supported by a few older versions of browsers, you may wish to consider converting JPEG images to WebP with a plugin and serving WebP as the primary option but having a fallback option as JPEG, which is served to browsers that don’t support WebP.
Resize Images
Image scaling is one of the most effective and common ways to optimise images on WordPress for SEO. It refers to resizing images to improve the resolution and sharpen the image simultaneously. Correctly scaled images will positively affect the site’s speed and performance and improve your SEO score.
There are many tools you can use to resize images, including JPEG Optimiser, Photoshop, JPEGmini, Lightroom and more. You can also use various WordPress plugins, but it is generally best practice to reduce the image size before uploading the file to WordPress.
Compress Images
Compression is another important part of the puzzle when it comes to image optimisation. Image compression is used to reduce the size of a graphic file in bytes without corrupting the image quality to an unacceptable level.
High-quality files are unreasonably large and have significantly affected the page speed. On the other hand, compressed images are often 40% lighter than unoptimised images and load faster, which means better SEO. You can easily compress your images with tools such as Tiny PNG, which is available both online and as a WordPress plugin.
Optimise File Names
It is crucial to label your images with descriptive and short file names. The file name is an important ranking factor, as it gives Google clues about the image’s subject matter, makes your content more interesting and ultimately improves your search engine visibility.
For example, if you have an image of a silver laptop, instead of using “IMG_00035.jpg”, give your file a name such as “silver-laptop.jpg” to make it easier for people and search engines to understand the content of the image.
Use SEO-Friendly Alt Text
Alt text is another crucial SEO ranking factor that helps Google understand the content of your image. It is an alternative text added to the image tag to describe your image, increase accessibility and help users and search engines understand what the image is all about. If the image cannot be loaded, the alt text is displayed instead. You should use alt text for all images that are not purely decorative.
For example, the alt text for the abovementioned “silver-laptop” image would look like this in plain HTML code: <img scr=“silver-laptop.jpg” alt=“Silver laptop”>.
Specify Image Dimensions
Specifying the dimensions of your images contributes to improving your website’s loading speed, which is particularly important given the fact that more than 50% of visitors abandon websites that take more than 3 seconds to load.
Resize the images to fit the content of your page, including the width and height attributes of every image. WordPress provides images in multiple sizes once you have uploaded them and allows you to refine the dimensions automatically. However, that doesn’t mean that your file size is also optimised properly, which leads us to the next step.
Remove EXIF Data
An important step in reducing the file size of your images is to remove the EXIF data. Exchangeable Image File Format (EXIF) is a standard that defines specific information related to an image, such as the date and time when the image was captured.
Removing the EXIF data can keep the size of the images small and post them on a low bandwidth while hiding your information. There are many plugins available that can help you remove EXIF data, such as EWWW Image Optimizer and ShortPixel.
Lazy Load Your Images
Traditionally, when a webpage is loaded, all images are uploaded at once. This kind of data dump puts enormous stress on the overall loading speed, erodes functionality and eats through a lot of bandwidth. Lazy loading staggers the image upload process, loading only when an image comes into view from scrolling.
Lazy loading is beneficial to both the website’s visitor and the website owner, as it can significantly improve page speed and responsiveness while reducing server loads. For example, lazy loading images can help create a better user experience by providing a faster website response time and allowing users to receive content quickly.
The additional bonus of lazy loading is that it preserves a lot of bandwidth. This can dramatically reduce running costs and, over time, save you a small fortune.
Use Responsive Images
Responsive images are images that have been modified to scale correctly with the device they are viewed on. Size and resolution are adjusted to complement the layout display of multiple devices. Responsive images are an essential part of SEO because they allow the page to load faster, which has a direct impact on how search engines rank the page. Responsive images also ensure that the same content looks great across different screen sizes. Responsive images also consume less bandwidth and improve user experience. With this in mind, using responsive images is an essential part of any SEO strategy.
Cache Images
Image caching refers to the process of storing or saving images temporarily in a cache for quick and efficient retrieval in the future. Caching is a common technique used to improve website performance by reducing the time it takes to load images.
Installing a cache plugin to store the larger files on your site, including images in the user’s web browser, can help you boost your website’s speed. A cache plugin creates a copy of your page once it fully loads and then serves that cached version to other users to minimise the loading times.
Serve Images via CDN
A content delivery network (CDN) is a globally distributed system consisting of edge servers that ensure fast delivery of website content such as images, videos, JavaScript and CSS. If your WordPress website already uses a CDN, it will pick the cached version of the images from the server nearest to your location and speed up your website by limiting the number of internet hops required to show your image from your original server.
For example, Cloudflare is a reliable and free CDN provider that offers fast content delivery in addition to performance optimisation, caching and protection against various cyber threats. While Cloudflare also offers paid plans and more comprehensive solutions, the free version is usually sufficient.
Final Thoughts
Images are the most significant contributor to determining the overall page size and substantially impact your website’s performance. Optimising images on WordPress for SEO is essential to improve your loading speed, provide a better user experience, implement effective SEO and save storage space on your hosting server.
Slow and heavy images can kill your engagement and conversion rates — but this needn’t be the case if you consistently follow best practices for image optimisation. The simple procedural modifiers described in this article will keep your pages running smoothly and those images popping, adding up to a thoroughly enjoyable user experience.
Altlier is an award-winning web design and digital marketing agency. Our team builds SEO-optimised websites and provides image optimisation services. To see how we can help your business, check out our services page or get in touch with us.
