We all prefer to use images inside our article. Images are beneficial to describe what the author is trying to manifest inside an article. Displaying some images keep your readers more involved in the topic.
During content creation, when it comes to image optimization people usually suggest using proper alt text. However, optimizing an image is much more than just naming it and using suitable alt text.
Here in this article, you will read about five different techniques to optimize WordPress images which will help you to fix GTmetrix/Pingdom warnings as well as potentially rank images high up in the search engine.
While optimizing an image for SEO is necessary, optimizing that for page loading speed is the significant part. As a result of optimization, you will achieve better page speed and SEO results.
Pre-publishing Image Optimization:
It’s always better to optimize WordPress images before uploading them to the media gallery. You can take advantage of powerful tools like Photoshop or your favorite image editor.
Prepare the image nicely by cutting, resizing, compressing, and saving in a proper format (PNG/JPEG/GIF) before uploading. Don’t forget to give a descriptive filename to it.
1. Find Unoptimized Images
After assigning the images into the published post, the post-publishing image optimization part will start. First of all, we have to scan and identify the problems with the uploaded images. There are tools like GTmetrix, Pingdom which can help you detect the problem with an image. GTmetrix shows the problem in detail so I would recommend you test a particular page with GTmetrix.
Run your website through GTmetrix. As soon as the analysis is complete GTmetrix will display all the results regarding that page into two different tabs “Page Speed” and “Yslow”.
There are 7 types of image related problem can occur on a page. We will first try to solve the most important ones before heading towards the least cause problems.
- 1. Serve Scaled Image: Resize a large image into a correct dimension that your themes HTML & CSS specify.
- 2. Optimize Images: Compress the images losslessly.
- 3. Specify Image Dimension: Define the width and height of images in HTML or CSS
- 4. Make Favicon Small and Scalable: The preferred size of a favicon is 16x 16x.
- 5. Use a content delivery network (CDN): Serve images from a CDN URL.
- 6. Leverage browser caching: Cache image files using a caching plugin.
- 7. Minimize Redirect: Serve images with proper HTTPS.
- 8. Combine Images Using CSS Sprite: Combine images into as few files as possible using CSS sprites.
2. Serve Scaled Images
If you get a warning to serve scaled images by GTmetrix, this means that the page includes some oversized images. GTmetrix recommends you to resize them into the correct dimension (will be provided by GTmetrix) which matches with your theme design.
As soon as you resize the images into the recommended dimension the warning of serving scaled images will disappear. It will help you decrease the page size as well.
In this case, you should be resizing the images manually. Using a plugin will not be helpful because every image is recommended to set in a different dimension.
You can use an online image editor to resize the images which are required. Open the editor loving and upload the image file from your computer or you can download the original image from the GTmetrix link shown in the warning.
Set the recommended dimensions inside the editor and resize the image and download the resized version.
Check the original file location in GTmetrix and now upload the resized image to that location using the hosting file manager or any FTP client. You should see the overwrite confirmation popup while uploading the image and select confirm.
Resize and upload back all the images which required proper scaling. As soon as you finish the process recheck the page with GTmetrix and the warnings will disappear.
2. Optimize Images
This warning usually appears when a page contains losslessly uncompressed images. Losslessly compressing an image will help to reduce the size of the image, resize image files themselves instead of via CSS, and most importantly decrease page loading time.
To fix this issue open the optimized image in a new tab which is recommended by GTmetrix and download it. Copy the original file name from GTmetrix (Image URL) and rename the downloaded file by pasting the copied name.
Now open your website file manager or use any FTP plugin and upload back the optimized images into the correct location (wp-content/uploads/date/….).
Repeat the same procedure for all the unoptimized images. When finished re-test the page with GTmetrix and optimize images warning will be solved. Previously I have published a complete tutorial on image optimization. You can follow the procedure from there.
3. Specify Image Dimension:
Specifying the width and height for the images (In HTML and CSS) enables faster rendering by rejecting the need for unnecessary repaints.
This warning appears when GTmetrix detects any image in your website that doesn’t have width/height mentioned inside the HTML or CSS code. Some themes automatically attach the image dimension while some others don’t.
Visual editors and live page builders like Divi, Elementor allows you to specify image dimension so they can assist you to fix this problem.
If you don’t use visual editors then adding width/height in HTML code will end this warning. A great example of using dimensions in the WordPress widget area is:
4. Make Favicon Small and Scalable:
Favicon is an icon connected with a web page. This little image remains in the “favicon.ico” file in the server’s root. During page load since the browser requests this .ico file, hence it needs to be present there.
Every time a browser requests this favicon file, the cookies for the server’s root are sent. So making the favicon small will help to reduce the cookie size for the server and improves performance the website as well.
Every time a browser requests this favicon file, the cookies for the server’s root are sent. So making the favicon small will help to reduce the cookie size for the server and improves the performance the website as well.
You need to make sure that the favicon size is 16x16px, and the file is in favicon.ico format, and is cached using cache plugin.
5. Use a content delivery network (CDN)
CDN is a set of web servers distributed over multiple locations around the globe to deliver your content more efficiently to the users. The advantage of having a CDN, it can provide an equally fast website performance to your users across the globe.
While using a CDN you need to serve the images from a different URL, which is your CDN URL.
Image URL with CDN: https://static-ea7a.kxcdn.com/wp-content/uploads/2019/05/an-image.png
There are various CDN providers available, but I use KeyCDN and Cloudflare. Cloudflare serves the contents with 150+ data centers while KeyCDN has 34 data centers. Cloudflare is easy to combine with other CDN providers increasing the data centers for more faster content delivery.
Since Cloudflare doesn’t set CDN URL for the images, hence you can serve images from KeyCDN. It’s very easy to set up. Just create an account on KeyCDN, verify your email address and you will be ready to launch.
Create a custom new zone URL where you want to pull content from.
Go to “zone” from the KeyCDN dashboard and fill up the form.
Saving this Zone will lead to a new window where you can see the newly created Zone’s status, and access the CDN URL as well.
Install CDN enabler plugin (lightweight) by developed KeyCDN and use the CDN URL that you have created a few moments ago.
Clear your website cache and Cloudflare cache (if you use Cloudflare) and re-check your website address in GTmetrix. The “Serve Images From CDN” warning should disappear upon using this technique.
6. Leverage browser caching
We can set a default expiry time for our website resources like CSS, images, java scripts, etc under which if a person visits your website again using the same browser, the browser doesn’t have to download that resource from the server. This lead to a quick page load.
On WordPress, the easiest way to leverage browser caching is editing your .htaccess file and add the following code into it.
Inside this code, we have mentioned jpg, jpeg, png, and gif and set their expiry time to 1 year. This makes certain that the media files which need the most time to download are stored on the visitors’ computer, and won’t be needed to download again until the next year.
7. Minimize Image URL Redirect
URL redirection increases waiting time to load a resource. Redirecting a website to [https] URL from it’s original [http] URL takes extra time to load a page and can show a minimize redirection warning.
GTmetrix recommends using [https] URL to prevent content redirection.
Redirection in WordPress website can be minimized or completely stop by updating the website URLs to [https] version with the help of Better Search Replace plugin.
Alternatively, you can change the site URL inside WordPress general settings. (In case you do not serve images from CDN or other hosts)
8.Combine Images Using CSS Sprite
The website theme uses small icons to represent a beautiful design. Even we use icons in our pages, mostly on the homepage. In my website, there are 4 icons on the home page. But they are actually 1 image. You can do that using CSS sprite. Combining 4 images into 1 image decrease the total number of browser request and speed up page loading time as well.
Creating CSS sprite is a little bit technical or you can use a CSS sprite generator.
Final Words: As long as the image remains one of the most important parts of an article optimization is necessary. I have added some key ways to optimize WordPress images in this article. However, there are more roads which you can follow to speed up the page performance.
Make sure to optimize your website performance since this is a key factor of SEO these days. I have any thoughts regarding this article! Mention it below in the comment section.