At first glance, images may seem to be trivial elements on your site. But in reality, it is the exact opposite. Images can make a huge difference between websites that provide an awesome user experience and those that don’t. If your WordPress website is taking time to load slowly, then you must be using a number of full-sized images there.
This means that your website is affecting your SEO; it is increasing your bounce rates and is keeping your audience at a distance. That’s bad for your business. This is why even if you are running only a personal website you must keep that website “in shape” just like yourself.
Now there are a lot of ways to speed up a WordPress site and each one of them complements the other. One cannot say that there is a universal method. So to watch The Ultimate Guide to Image Optimization for Better Performance of Your WordPress below –
In a word speeding up your website is a sum of all these methods. Obviously, you have guessed by now that Image Optimization is one of those methods. And that is what we will dive in-depth today.
In this Ultimate Guide to Image Optimization for your WordPress site we will go through everything you need to know:
- What Image Optimization means and why it is so necessary these days;
- Factors that affect the WordPress page load speeds;
- How you have to prepare your images before you upload them to your WordPress site;
- How you can optimize your WordPress for those images;
- How to improve image SEO and finally
- How to efficiently deliver your images.
So keep reading further and by the end, you will have the full knowledge about Image Optimization. But first, let us begin by understanding what Image Optimization actually means?
What is Image Optimization?
As we have seen before it is a technique to speed up your WordPress site. But the question is what does Image Optimization do? Simply put it is a method to reduce the file-size of your images in such a way that it does not have any negative impact on the way in which images appear on the screen. The main aim here is to decrease the image file size without imposing any quality loss.
There are a number of ways in which you can do this by using different tools and techniques available in the market. Now you may be thinking “why shrink my image file-sizes?” This is particularly important when you are using a host of different images on your site so that your page doesn’t take too long to load. With Image Optimization, you can upload more images on your site without having to worry about then weighing down your page speed.
When considering optimizing your WordPress site in general, your top priority must always be Image Optimization. Simply because it wouldn’t matter how great your site content is if users leave your site even before they have the chance to consume it.
Why is Image Optimization necessary?
Image Optimization is particularly important for the following reasons:
- It can speed up your page load times;
- It can improve your site SEO greatly;
- It can reduce server loads drastically;
- It can also reduce your overall website size such that you will need much fewer resources.
Sitting in 2021, any website that takes ten seconds or more to load will keep your audiences at a distance. Even though there is no exact definition for an optimal page-load speed and time as of yet, recent studies, however, do show that:
- The first ten seconds play a crucial role in how long your audiences will stay on your website. They are bound to bounce off of your site if all the page contents are not displayed within that short amount of time.
- In 79% of cases, it was found that if a user is not quite satisfied with the site speed, they are most likely never to return to that particular site.
- In another 47% of cases, unsatisfied users were found not only to never come back to that site but also they were found to discourage others by sharing their user experience with them. This is very likely to leave a negative review on social media platforms.
Looking at all these statistics, one can see how crucial it is to keep your website page load time under ten seconds. Realistically speaking it shouldn’t even be ten seconds but rather three seconds at best. This is where Image Optimization works like a trump card.
Table of Contents
Factors affecting your WordPress Page Load Speed
Even though our main focus for this article is on Image Optimization, we will take some time to understand the factors that are affecting your WordPress page load speed as a part of the bigger picture, viz. WordPress Optimization. It is important to understand these factors:
-
Use Lightweight Images
Though Image Optimization you can make your “lightweight”. They can really help to improve your page load speed. This is done by compressing images to their maximum limit without any loss in quality, viz. Lossless Compression.
-
Chose your WordPress Hosting provider wisely
Those who are serious about running their WordPress site will never vie for a cheap monthly hosting plan. There is of course a reason for that. That is because websites with a higher load and with faster site speed demands are not compatible with these hosting plans. That is why you will need to choose your hosting provider carefully. You will have to spend some time to filter out a quality managed hosting provider having their data centres spread across multiple regions.
-
Optimize your Code
Of course, this is another very important factor that affects WordPress site speeds. Optimizing your code generally means to:
- Use superior themes and plugins;
- Always keep these themes and plugins updated;
- Never use plugins with overlapping functionalities;
- Uninstall any plugins or themes that do not have any use;
Developers on their end need to remove formatting and comments and get rid of codes that are no longer in use.
-
Avoid Multiple-use Redirects
Sometimes using redirects are necessary to avoid the nasty 404 errors. But it is always recommended to avoid using any Multiple-use Redirects. Typically it is okay to have single-use redirects only.
With that cleared up, it is now time we focus on what we came here to learn: WordPress Image Optimization.
Getting Started with WordPress Image Optimization
Now WordPress Image Optimization process can be broken into four phases.
-
Preparing Your Images for Optimization
There are a number of things you need to sort out before you upload an image on your website. You need to prepare the image as best as it can be. This is a major and crucial part of Image Optimization.
You need to create the image properly and for that, you will have to understand the best when and where an image is necessary or not. This is very important as images use up a lot of your resources in order to deliver to your audiences. That’s why it is an expensive site asset and you really cannot use them every here and there.
This is why in order to create original images you have to consider the more inexpensive assets like headings and texts instead to communicate with your audiences and stylize your page wherever applicable. However, adding texts to your images is never considered to be a best practice. Moreover, with responsive designing, they may become harder to read. Creating text over your images with CSS is however a much better practice.
Sizing & Cropping Images
Now that you have your image, you need to size it properly. And keep in mind that the bigger is not better. Scaling your images so that it can fit their containers is very important as it can improve performances, in the long run, is recommended even by Google PageSpeed Insights.
Moreover, in case an image is not scaled, i.e. oversized, page loading takes time as the browser needs to manually scale the image. Now how do you resize your image? Your go-to answer should be to use the developer tools in your browser. You need to find out the different size of image containers you have on your site.
Once you know that, you need to use an image editor next. Resize the image according to the largest container it may be placed in. In the case of Retina images, you will have to double the width and height of the largest container.
You can now upload the image and use it in the designated container. In the case of new scaled images, you simply put it there. However, if you are correcting an existing image, you will have to replace the URL with that of the new image after you upload the new one.
As for cropping your images, always focus on creating tighter crops by cutting out the excess detail and space from an image. Best recommended ratios for image SEO are 4:3 and 16:9 for image rankings. Try to avoid panoramic images.
Compressing Images
Understanding image graphic types is important for understanding Image Compression and based on this there are two types of images, Vector Images and Raster Images.
While the former are mathematically generated geometric shapes, the latter consist of tiny blocks called pixels arranged on grids. Resizing Vector Images can be done without quality loss. Raster Images however is totally dependent on the pixel sizes for their quality, hence resizing will make them look “pixelated”.
Other than graphic types, the other thing you need to keep in mind is the image compression type. This affects the image quality when it appears on the page.
In the case of Lossy Image Compression, the original image data is completely removed when it is compressed. The human eye may not perceive some minor detail thus not always causing a visible loss of quality but that of data.
However, what is perceivable is the image becomes half as large when compression is done at 75%. It is thus recommended to compress images between 70-85%.
Lossless Image Compression however does not remove any data while compressing and so there is no loss in quality. The drawback however is that since no data is lost, the file size becomes larger.
With the WordPress 5.3 release developers can avail improved support for image optimization. This update lets WordPress to detect when a large image is uploaded and automatically scale the image to generate a web-optimized version of it on the page. Also the new full-size in WordPress is at 2560 pixels.
Using appropriate Image Formats
Depending on what you want to convey with your images you can pick and chose the image format type. Each has its own advantages and disadvantages.
JPEG
- Best for large photographs;
- Standard file type and is supported in all browsers containing millions of colours;
- Use Lossy Compression;
- Does not support animation and/or transparency.
PNG
- Best used to preserve detail like for example a screenshot text;
- Uses Lossless Compression;
- PNG-8 supports 256 indexed colours;
- PNG-24 supports 24-bit colours, which means you can create an array of different colours, while PNG-32 has an additional alpha channel for advanced transparency.
WebP
- Open-source image format combining both JPEG and PNG formats;
- Smaller file size;
- While WebP uses Lossy Compression, WebP Lossless uses just as it sounds.
SVG
- An XML-based markup language that creates two-dimensional vector graphics;
- Compatible with all browsers;
- On the downside, since it is a markup language, WordPress doesn’t allow them by default;
GIF
- Best only for animation;
- They produce large file sizes;
- Limited colour-palette.
What about the Image Resolution?
Generally speaking 72 PPI (Pixels per Inch) is a good target resolution for web-based images. However, this can by no means be called a perfect image resolution. The basic idea is that as long as your uploaded image does not appear pixelated after compression, your image resolution is ideal for the site.
Colours however play a vital role in the image “weight”. If you observe you will see that a simple image in black & white colours at 1000×800 pixels with few minor details will weigh about 100KB. The same-sized image, if contains high contrasts with vivid colouring, the weight will increase up to eight times than before.
Most often your site host will limit you on maximum file size and weight that you can upload, however, the size-weight ratio is always dependant o the image structure and colours. This means there is no optimal WordPress size-weight ratio.
Adding Image Titles
This is the final thing you need to sort out before you upload your images. You have to change the default title of your image into a concise and evocative title. Using keywords wherever applicable is always recommended. However, never use them where they are not. This affects image SEO.
-
Optimizing WordPress for Images
Now that your images are all prepped, you need to get into your WordPress site. WordPress has a bunch of awesome features to work with and optimize your site.
Also Read : 5 Best Practices For The Remote Workers In The SEO VPS Industry
Default File Sizes in WordPress
Whenever you are uploading an image into the WordPress media library, it creates additional image sizes by default including, Thumbnail, Medium, Medium-Large & Large along with any additional theme-specified sizes.
It also preserves the original file size under the name Full as in full-size. You can adjust these defaults in the Media Settings section as well as add custom sizes.
Thumbnails are mostly required for either adding custom image sizes or modifying default image sizes as well as for switching to a new theme with different custom sizes.
Responsive Images for different screen-sizes
WordPress has the functionality to serve responsive images for different screen-sizes as it uses varying image sizes. This was introduced from version 4.4 onwards. It uses the “srcset” attribute to provide the browser with a list of various sized multiple images.
This helps the browser to load the appropriate image size for the designated device. These “srcset” codes are written and set automatically.
Retina Images
Retina Images have four times as many pixels as a normal raster image. If you want to preserve the detail in your Retina image then you will have to create one by filling those new pixels with enough data.
-
Improving Image SEO
In recent years Image SEO has gained much importance. As they have a lot of opportunities to drive traffic. The best-optimized images always rank high in search results whereas duplicated written contents are penalized.
Improving Image SEO relies much upon properly identifying images with the appropriate HTML attributes.
Image Titles & Alt Texts
This is different from the file name title. The title of the file that you add while creating it in any image editor is more important than the image title field that you add in the WordPress media library. The former is the one that contributes to Image SEO.
Alt Texts are important for both Image SEO and accessibility. An effective Alt Tag must always have a to the point description that communicates the image content to someone who is not able to view it directly.
Image Captions
You can provide context to your image by adding captions to it and other surrounding texts. This is important for Image SEO as it helps Google to understand what the image wants to convey. However, captions are not necessary for every image and mostly carry out a call-out action like in the body texts. As they are set apart from the rest of the text and are highlighted, they are likely to attract more.
Image Sitemaps
Image Sitemaps are required to make sure that Google indexes all your images on your site. They are especially important for frequent updating of your page contents, like an e-Commerce site.
-
Efficient Image Delivery
we are all done with optimizing our WordPress site. All you need to do now is deliver your images. And this is the final phase where you need to pay attention. This is nothing but a few techniques with which you can efficiently deliver your images.
Browser Caching
This is a very reliable way to improve your site speed and is very helpful in efficient image delivery. The images are stored in a cache for faster retrieval. This helps browsers to retrieve images from the cache whenever required without having to go through the server where they are originally stored thus delivering faster load speed and less load time.
Content Delivery Networks or CDN
This is another technique to improve page speed while image delivery. A CDN requests your site content(s) from the nearest server location. This is because CDNs are located globally to retrieve data faster.
However, keep in mind to avoid changing CDNs or activating and/or deactivating them frequently. This can have negative SEO impacts.
We saw how and you need to prepare your images, how to optimize WordPress, how to improve Image SEO and finally what techniques you can use for efficient image delivery. So that you know all that you need to know about Image Optimization its time you get started.
Also Read : 10 Steps To Improve Landing Page Performance Of Your WordPress Website
