Images help describe what you are trying to mean inside the article. Presenting with images keep your readers more engaged in the topic. So, nowadays, almost all bloggers prefer to use images inside their articles.
But do you know an image needs optimization? Optimizing images can be helpful for your page SEO in many ways. During content creation, most people still think that image optimization is all about using proper alt text and naming them well.
However, optimizing an image is much more than just naming it and using suitable alt text.
In this article, I will describe some useful steps which you can use to fix your site image issue that appeared on GTmetrix and Pingdom.
Breaking down the image added above:
- Due to the image optimization problem, the page speed score in GTmetrix is very low.
- You can see the total page size is 6.78 MB which is significantly high; I would keep in under 3 MB so that the site can be loaded in just 1-2 sec.
- Serve scaled images are the issue that appears in GTmetrix/Pingdom because of unscaled images according to your template settings.
- Optimize images is the issue which appears because of the lossless version of those images can save extra data which will improve your page speed score.
* Remember page speed score is another essential metric that can help your page to rank high in search engines.
Learn How Fix Image Optimization Issues That Appears in Pingdom and GTmetrix
To fix these issues, apply the following optimization techniques.
#1. Find Unoptimized Images
After adding the images into your post-scan your URL to find image problem. There are tools like GTmetrix and Pingdom, which can help you identify the problem with image optimization issues. GTmetrix shows the issues in detail so I would recommend you test a particular page with GTmetrix.
As soon as the scanning is finished, it will display all the results into two different tabs, “Page Speed” and “Yslow.”
There are seven types of image-related problems that can occur during page scanning. Here’s what to do to fix those problems:
- Serve Scaled Image: Resize the recommended images into the correct scale that your theme’s HTML & CSS support.
- Optimize Images: Compress the images losslessly.
- Specify Image Dimension: Define the width and height of images in HTML or CSS codes.
- Make Favicon Small and Scalable: The recommended size of a favicon is 16x 16x.
- Use a Content Delivery Network (CDN): Serve your images from a CDN URL.
- Minimize Redirect: Serve images with HTTPS.
- Combine Images Using CSS Sprite: Combine multiple images into one image using CSS sprites.
#2. Serve Scaled Images
If you get this warning to serve scaled images by GTmetrix, it means that the page has some oversized images. GTmetrix will recommend you to resize those images into the correct dimension (will be provided by GTmetrix) that your theme requires.
As soon as you scale the images to the recommended dimension, the serving scaled images warning will disappear. Scaling the images will help you to decrease the page size as well.
Caution: Do not change the image title while scaling the images.
You can either use an online image editor or any offline tool to resize the images as required. I use iLOVEimg, which is a free online editor and allows you to compress, convert, and resize images. Another tool that also works great for compressing both PNG and JPEG images is TinyPNG.
First of all, download the recommended image file from GTmetrix. Open the image editor and upload the image file which was downloaded from the GTmetrix link shown in the warning.
Note down the recommended image size from GTmetrix and set the dimension in the image editor. Resize and download the resized version.
Now upload back the resized image to the same file location using the cPanel file manager or any FTP client. Note that you should see an overwrite confirmation popup while uploading the image then select overwrite and upload option.
Follow this procedure and resize + upload back all the images which appear on GTmetrix recommendation. As soon as you finish the process clear your website cache and rescan the page with GTmetrix and the warnings will disappear.
#3. Optimize Images
The “optimize image” warning usually appears when the page contains some uncompressed images. Losslessly compressing an image will reduce the size of the image and image files will resize themselves instead of via CSS. Most importantly, the page load time will decrease by a little %.
To fix this problem, the open optimized image in a new tab which is recommended by GTmetrix and download it.
Now copy the original filename from GTmetrix (Image URL) and rename the downloaded file by pasting the copied name.
Now with the help of a Cpanel file manager or any FTP plugin and upload back the optimized images into the correct location (wp-content/uploads/date/….).
The location must be the same to solve the problem. While uploading the optimized image, make sure you get a popup to replace the old image file with the new upload. Then select confirm.
Repeat this procedure for all the unoptimized images. Once finished clear cache and re-test the page with GTmetrix/Pingdom and optimize images warning will be solved.
#3. Specify Image Dimension
Mentioning the image width and height (In HTML and CSS codes) enables faster rendering. This mention helps the server by rejecting the need for unnecessary repaints.
“Specify Image Dimension” warning appears when GTmetrix finds any image on your website without width/height mentioned inside the HTML or CSS code. These days some of the themes automatically add the image dimension while some others don’t.
Visual editor plugins for WordPress and live page builders such as Divi and Elementor allows you to mention every image dimension. It is the right approach by the developers so that you won’t face this problem + using these plugin you can fix the issue that appeared in GTmetrix too.
But if you don’t use any visual editor in WordPress then adding width/height in HTML code will help you to solve this warning. An excellent example of using dimensions in code is:
Once you have edited all the images and added their respective dimensions then clear the site cache and recheck the page in GTmetrix whether the issue was fixed or not. If you have done it correctly, then the problem won’t appear again.
#4. Make Favicon Small and Scalable
Favicon is the icon connected with a web page. This little image that remains in the “favicon.ico” file is stored in the server’s root. During a page load, the browser requests this .ico file, and hence it needs to be present with the page.
Every single time a browser asks for this favicon file, the cookies along the server’s root is sent. So making the favicon small in size will help to reduce the cookie size for the server, and it will improve the website performance score in testing tools.
You need to make sure that the favicon size is 16x16px, and the file is in favicon.ico format, and is cached using a caching plugin. Making favicon cacheable avoids frequent requests for it.
#5. Use a Content Delivery Network (CDN)
CDN (content delivery network) is a set of web servers distributed over multiple locations all around the globe which delivers your content more efficiently to the users. The advantage of using a CDN is that it can provide an equally fast website performance to all your users from different locations around the world.
When you are using a CDN, you need to serve the images from a different URL, which is called 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
The CDN URL can be different for different CDN providers. There are many CDN providers available; I prefer to use KeyCDN and Cloudflare. But this can be your personal choice. Most of the CDN providers are good, make sure that you have picked the right one.
Cloudflare – Cloudflare serves the website contents with 150+ data centers while KeyCDN has in total of 34 data centers. Cloudflare is much easier to combine with other CDN providers, which will increase the data centers resulting in faster content delivery.
But Cloudflare doesn’t set separate CDN URLs for the images. Instead, it serves the same image with caching+compression. So to get a different CDN URL you can serve images from KeyCDN.
KeyCDN – Setting up KeyCDN with your WordPress site is easy.
Create an account, verify your email address and you will be ready to serve your site + it contents with CDN. Create a new custom zone URL where you want to pull content from during the browser request.
Go to “zone” from the KeyCDN dashboard and fill-up the form.
Save the zone, and it will lead to a new window where you will see the newly created Zone’s status + your CDN URL and SSL status. You can add more zones if you want and manage your available zones efficiently.
Now on your WordPress install CDN enabler plugin (lightweight) and use the CDN URL from KeyCDN that you have created earlier.
Now clear your website cache and Cloudflare cache (if you use Cloudflare) and re-test your website address in GTmetrix. This time the “Serve Images From CDN” warning should disappear.
#6. Combine Images Using CSS Sprite
Nowadays, themes developers use small icons to create and design a beautiful website.
Moreover, we use icons in our pages, mostly on the homepage. On my website, there are four icons on the home page. But they are one image which has combined using CSS sprite.
It is a good practice because combining four images into one decrease the total number of browser requests to the server and speed up page loading time as well as decrease server load.
Creating CSS sprites can be a little bit technical, or you can use a CSS sprite generator.
Quick note: Don’t apply CSS sprite for your great images on your page such as featured images, images that describe your writings. Because combining these images will lead to loss of individual alt tags. Alt tags are an influential SEO factor for images.
#7. Some Bonus Tips To Optimize WordPress Images
Above mentioned techniques will help you to fix image optimization issues in GTmetrix + optimize WordPress images. However, there are more factors when it comes to image optimization. You can use these tricks to optimize website images, even higher standards. I will mention a few ways which you can apply to the image.
#7.1 Apply Lazy Load
You can halt the image loading while the other parts of a website such as layouts, fonts, CSS are loading. It may or may not affect the visitor’s experience, depending on how fast your web server is! Because as soon as the site starts loading the images will be waiting for other components to be fully downloaded.
Now if your site can load the non-image part real quick then applying lazy load is beneficial.
I use Autoptimize caching plugin for my site, and there is an option to enable lazy load for images. On applying lazy load, the site score has improved from 90 to 93 on GTmetrix along with a slight improvement in loading time. If you consider using a different plugin, then use the lazy load plugin.
(You can see my GTmetrix site report here) [lazy load enabled]
For more Lazy Loading plugins alternatives read our post – 10+ Best Free Lazy Loading Plugins To Speed Up Your WordPress Website.
#7.2 Remove EXIF data
EXIF data contains information such as image shutter speed, image ISO, focal length, the model of the camera, image data, and much more. These pieces of information don’t need to include while using that image on your website. So try to remove them.
Popular WordPress image optimization plugins like Imagify, ShortPixel, and Smush have an option to keep or remove EXIF data. So while configuring these plugins, make sure you have unchecked it.
#7.3 Use Correct Image Format
I prefer to use JPEG, PNG, and WebP format on my website.
PNG is an uncompressed version of an image. So you should use PNG with small images with fewer color effects because a high-resolution image with more color effects can increase the size of a PNG file.
JPEG is concentrated so that it can be used for colorful images. JPEG is lower in size, and hence, they lose their quality. You can see the difference between JPG and PNG from this popular demonstration by Labnol.
WebP is a new web-optimized image format which is a combination of both lossless and lossy compression. Developed by Google and useful for the website as it provides better image quality with less image size.
Final Words
As long as images remain one of the crucial parts of an article and webpage, image optimization is necessary. I tried to mention some key points using which you can optimize WordPress images. However, as I said earlier, there are more tricks that you can apply to speed up the page performance.
Some of them which I have not added in this article (Because it is a performance-related article) are Hotlink Protection, Name + Alt Tag, Image URL Redirect minimization, and leverage browser caching especially for images, etc.
Anyway, make sure to optimize your full website performance since this is a crucial factor in SEO these days. If you have any thoughts or doubts regarding this article mentioned below, I’m always happy to hear from you + help you.
