The Ultimate Guide To Optimize WordPress Images [Updated In 2021]
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 result.
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.
Hint: If your website needs high-quality images (Example: Stock Photo Website, Photography Website, Travel Blog, etc) then optimization of images will not help you because it will reduce the quality as well.
#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 details 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.
GTmetrix will show image related test results like this:
#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.
Resize The Images Manually:
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 iloveimg and upload the image file from your computer or you can download the original image from the GTmetrix link shown in the warning.
Caution: Do not change the image title.
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 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/….).
Hint: While uploading the optimized image to your file manager to replace the old image file you should get a “replace” confirmation.
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 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 performance the website as well.
You need to make sure that 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 contents 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.
For example:
Image URL without CDN: https://yourdomain.com/wp-content/uploads/2019/05/an-image.png
Image URL with CDN: https://static-ea7a.kxcdn.com/wp-content/uploads/2019/05/an-image.png
There are various CDN provider 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 provider 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 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 (light weight) by developed KeyCDN and use the CDN URL that you have created 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.
See this image below.
On WordPress, the easiest way to leverage browser caching is editing your .htaccess file and add the following code into it.
Caution: Only add this code. Don’t make any other changes inside the .htaccess file.
#Customize expires cache start - adjust the period according to your needs
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType text/html "access 600 seconds"
ExpiresByType application/xhtml+xml "access 600 seconds"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
#Expires cache endInside 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 needs the most time to download are stored on the visitors’ computer, and won’t be needed to download again until the next year.
Hint: Sometimes, changes in WordPress for browser caching doesn’t get detected immediately after changing the .htaccess file. But it does work well.
#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
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.
Hint: Don’t use CSS sprite for your important images such as featured image, images that describe your posts. Because combining these images will lead to lost of alt tags for each of them. Alt tags are a powerful SEO factor.
#9. Bonus Tips To Optimize WordPress Images
Above mentioned techniques will help you to optimize WordPress images. However, these are not everything about image optimization. There are more other tricks which you can use to optimize website images as well. I will mention a few ways you can apply with the image.
#9.1 Apply Lazy Load
Halt the image loading process while the other part such as layouts, fonts, CSS are loading. It will not affect the visitor’s experience because as soon as the image comes inside the display it will load separately.
I use Autoptimize caching plugin and there is an option to unable image lazy load. If you use another plugin, the lazy load should be available there as well. Else, use the lazy load plugin.
#9.2 Remove EXIF data
EXIF data contains the information such as image shutter speed, image ISO, focal length, model of the camera, image date, and much more. These information doesn’t need while using that image on your website. So consider removing them.
Popular WordPress image optimization plugins like Imagify, Smush, ShortPixel have an option to keep EXIF data. Make sure you uncheck that.
#9.3 Use Correct Image Format
I prefer to use PNG, JPEG and WebP format for my website. PNG is uncompressed version so you should use PNG with small images with less color effect. JPEG is compressed and can be used for colorful images. JPEG is lower in size and hence lose its quality. See this Illustration below by Labnol or this article comparing RAW vs JPEG.
WebP is a new image format employing both lossless and lossy compression developed by Google and useful for the website as it provides image quality with less image size.
#9.4 Use Proper Image Name And Alt Tag
Search engine checks both name and alt tag of an image. So naming your image file before uploading and setting alt tag after uploading are an important task.
Avoid keyword stuffing in image name & alt tag. Just describe the image naturally.
<img src="https://www.rankwp.in/wp-content/uploads/2019/05/how-to-install-wordpress" alt="how-to-install-wordpress" width="577" height="247" />To find images with missing alt tags you can use Image Alt Tag Checker and locate the image to add a proper alt tag.
#9.5 Enable Hotlink Protection
Hotlink protection prevents other people from copying and pasting your image on their own websites. Using your images on their website can consume your hosting bandwidth resources.
Caution: Hotlink protection can prevent featured image from appearing on social sites such as Facebook, Twitter.
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. Have any thoughts regarding this article! Mention it below in the comment section.
