What would websites be without images?
These days, even medical journals come with images to keep things interesting. So, if you’ve been writing your WordPress pages without breaking up your content with images to lighten the mood or illustrate your point, your visitors probably find your content to be dry and unengaging.
Of course, the size of image files can be pretty huge. And this is a barrier for some people. Images on a WordPress site can consume over 60 percent of your website’s bandwidth, causing slow loading speeds for your webpages.
To be sure, this is a genuine problem as it can affect your website’s ranking (since search engines give a higher ranking to faster loading sites). It could also hinder your chances of success (since visitors aren’t willing to spend more than 7 seconds for a website to load). However, you honestly can’t afford to avoid using images altogether.
What’s the solution?
You need to learn how to optimize WordPress images for your site. The good news is, I am about to tell you everything you need to know to make your website load WordPress images fast. But before I get into that, let’s take a look at the errors you’ve probably been making when uploading images to WordPress.
Table of Contents
Common WordPress website image mistakes
Failing to properly optimize an image before uploading it on WordPress can cause various problems, such as slowing down your website’s speed and performance, and negatively impacting SEO. Below are the most common mistakes with images:
Dimensions are too large
The larger the dimensions of an image, the larger its file size will be. But that’s not the only problem.
When you use an image that’s too small on WordPress, you end up with a very zoomed-in, blurry, or pixelated result.
When you use an image that’s too large, you end up with the complete opposite – an image that struggles to fit into the slot.
Even if an oversized image manages to fit in and look presentable, its file size is still consuming a lot of your website’s bandwidth and disk space, bogging down the site’s overall performance. You can easily prevent such issues by adjusting an image to the proper size before uploading it.
The standard size for WordPress images is 150px square for thumbnails and 300px width for medium-sized images. Aim for this when resizing your images. You can use free online tools like ImageResize.org to do this, or even the Paint tool on your computer.
IrfanView is an especially good choice if you’d like to resize images in batches rather than individually.
Wrong image format
JPEG and PNG images both work on WordPress sites. But there’s a proper time and place for each format. Rather than use them interchangeably and without forethought, use JPEG for photographs or images with a variety of colors.
If you need vector graphics or computer-generated images, the PNG format works better.
Ignoring progressive JPEGs
You’re probably wondering what a progressive JPEG is. It actually looks the same as a regular JPEG image with one slight difference – how it loads out.
A regular or baseline JPEG image has one layer, and the image loads at once. That’s not an optimal setting for a quick load out. If the internet connection is slow, the page may load with an incomplete image or with a loss of resolution.
With a progressive JPEG, the image consists of multiple layers. These layers gradually load one after the other until you get the full image without any loss of resolution.
Not using Lazy Load
Lazy Load is a useful tool that eliminates the need for a webpage to load an image unless a visitor scrolls to where the image is. This ensures that the website doesn’t have to expend bandwidth and other resources loading an image that the visitor possibly isn’t even going to view. The result is a faster loading speed with fewer wasted server resources.
Not using CDN
The further a visitor is from the server hosting a website, the slower the page loading speed will be. Content Delivery Network (CDN) keeps things fast by allowing visitors to access a website from a server that’s closest to them.
If your website’s visitors are from all over the world, setting up CDN with WordPress is wise if you want to optimize the loading speed of your pages and images.
Adding no ‘alt’ attribute
Search engines use the ‘alt’ attribute in images to identify what the image is. Without it, search engines will have a hard time deciphering which images to present in response to a search query. This oversight doesn’t affect the loading speed of your website, but it does affect its performance in search engine results.
To boost the SEO of your website or pages, be sure to add relevant keywords as the ‘alt’ attribute of your images.
Not compressing images
If you want lightweight images that load quickly, changing the image’s dimensions isn’t enough. You also need to trim the fat by compressing the image to a smaller file size. The smaller the file size, the easier it will be to upload the image to your WordPress site. Such images also load faster when a webpage is opened.
There are various WordPress plugins that you can use to compress an image’s file size without disrupting the image’s quality, such as WPSmush.it, Kraken, and Imagify.
Not using image captions
Captions give the reader an idea of what an image is about and how it contributes to the text. It’s especially useful for tutorial pages. You can also use captions to optimize WordPress images for SEO purposes.
Wrong or no image filename
Not adding relevant keywords in the filename of an image will negatively impact the onsite SEO of your website.g
How to Optimize WordPress Images
Now that we’ve seen what you haven’t been doing to optimize your WordPress website’s images, let’s look at the steps you can take to turn things around:
Identify your non-optimized images
Knowing which pages have non-optimized images is the first step to fixing the problem. To help with this, there are lots of helpful tools, such as GTmetrix. Use GTmetrix to evaluate your site and you’ll get results regarding where non-optimized images are located by consulting the Page Speed/YSlow tabs.
It’s best to first target the images that appear on more than one page or throughout your website, like the images in the sidebar/footer and logo.
Fix the dimensions of your images
If the GTmetrix results show serve scaled image errors, that means some or all of your images are too big and need resizing. You need to resize the images to a more suitable size, which GTmetrix will recommend to you.
Stick with the GTmetrix recommended pixel size and the serve scaled images errors should disappear. You can do the resizing with a WordPress plugin or do it offsite with a tool then re-upload the images to your WordPress site.
However, using a plugin is more convenient, and some plugins let you resize multiple images at once, eliminating the need for repetitive work. But note that where you need to place an image will determine its correct size. For instance, a thumbnail image will require a smaller size than other images. So, be sure to only process images in bulk if they have similar size requirements.
Specify image dimensions
Since widgets, certain page builders, and custom HTML don’t automatically add the proper dimensions to an image, you’ll have to do it yourself. Specifying the image dimensions involves entering the width and height into the HTML or CSS manually. But if you are using Visual Editor, this step isn’t necessary.
To get the proper dimensions to use, check GTmetrix. You can also use GTmetrix to test pages after uploading images to see if the new dimensions are correct.
Losslessly compress images
Compressing images losslessly means reducing an image’s file size without reducing the image’s quality. It’s the perfect way to optimize WordPress images without compromising the size or clarity of the image.
You can accomplish this with tools like Imagify, Kraken, Smush, and so on, without causing image errors or diminishing the image’s quality. With the Imagify plugin, you can optimize images losslessly in bulk. It’s free for the first few images and you get another free set of image optimizations the following month. Beyond that, you need to pay for the service.
Use CSS sprites
You can use the CSS sprite generator to combine several images and create one image. This will minimize how many images load on a page, reducing loading time significantly.
However, replacing important images that contain crucial alt tags with CSS sprites isn’t the best idea. Thus, you should only use CSS sprites for images that are on your page for strictly aesthetic purposes. If an image describes content, or contributes to it in any other valuable way, don’t CSS sprite it.
Get rid of image URL redirects
If you recently got an upgrade from HTTP to HTTPS, or now serve images from a CDN, save yourself a lot of trouble by bulk updating your image URLs. The point of the update is to ensure that your image links are serving the current version of your website. You can easily do this with a tool like Better Search Replace and avoid wrong redirects.
Use a CDN
Serving images from your host server slows things down for your visitors, especially if the visitor is accessing your website from a location that’s far from the physical server. Optimize your site by setting your images to load from a CDN.
You can use Cloudflare or StackPath to do this. Both are effective, but StackPath comes with a 30-day free trial and assigns you a CDN URL. Simply copy the provided CDN URL and paste it into your cache plugin, then use Better Search Replace to edit your old image URLs to contain your assigned CDN URL.
Cache images
A caching plugin speeds up image loading by minimizing the steps a server takes to retrieve and serve an image. You can use a cache plugin to cache images. Both WP Rocket and Swift Performance are good options. Both tools are also useful for caching your favicon, but it must be in 16x16px format before you can cache it.
Remove EXIF data
Images contain EXIF data that state details like focal length, shutter speed, the date created, ISO, aperture, camera model, and so on. Your website doesn’t need any of this information. You can install the VA Removing Exif plugin to automatically remove such data from the images and make them lighter before uploading them to your WordPress site.
If you already have Imagify, Smush, or ShortPixel, you can also use any of them to remove EXIF data automatically.
Don’t embed images from other sites
Upload images directly to your website, rather than copying and pasting their links from a different site. The copy/paste approach will lead to the image generating extra requests when visitors open the page. That slows down page loading speeds because your server isn’t the one hosting the images and has to contact the image’s host server to retrieve it.
Cloudflare Image Optimization
You can also use Cloudflare to optimize WordPress images in several ways. For instance, you can use Cloudflare Mirage from the Cloudflare speed settings to improve image load times on devices with a slow internet connection, as well as reduce image requests.
It speeds up loading times by resizing images to be lighter versions when the internet connection is poor. On the other hand, reducing the number of requests for all of a website’s images and turning it into a single request enables visitors to access images immediately.
There’s also Cloudflare Polish for compressing images and removing EXIF data from them. Cloudflare Hotlink Protection is more useful for security since it prevents visitors from copying images from your site and using them elsewhere online.
Lazy Load images
Lazy Load is a lifesaver if you need to reduce the number of resources a website uses. It accomplishes this by delaying the loading of images on a web page until the visitor scrolls to where the image is on the page.
Since the website doesn’t have to load all the images on a page at once, loading speed is greatly improved. You can also use Lazy Load For Videos to delay the loading of videos until the visitor scrolls to where a video is on a page.
Save in the correct format
JPEG images are typically smaller and can be compressed much more than PNG images. It’s best to store an image in PNG format only if you intend on using it on a website as a simple image with few colors.
A JPEG image may not be as high-quality as a PNG image due to its smaller size, but it’s an ideal format for uploading an image with lots of colors. You can install a tool like GIMP that will automatically format an image to suit where on a website you are uploading it.
Image filenames and alt text
When you add no filename or alt text to an image, search engines have a hard time figuring out what to associate the image with. The alt text and the filename can be the same.
For SEO purposes, make sure alt text and image file names contain keywords that are relevant to your website.
Some plugins automatically add alt texts to images, but such plugins can’t fulfill this function if no filename is available on the image.
Also, while adding keywords in the filename and alt text, avoid keyword stuffing (using keywords excessively) or search engines may end up penalizing your site.
To identify images that are without alt text on your WordPress website, you can use tools like Screaming Frog. It’s free and useful for not only finding images with missing alt text but also adding the missing text.
Open Graph (Facebook + Twitter)
The proper format for images on Facebook, Twitter, and other social media platforms are different. When sharing posts from your WordPress site, you can use Open Graph to get the right image format for the social media platform you are targeting.
The tool automatically adjusts the dimensions of the image to suit the custom dimensions of the social network it’s going on. You can access this tool from the “Social” settings in Rank Math.
Optimize your GIFs
Some people prefer using GIFs because they are so eye-catching. Others avoid GIFs because they weigh more than images and can slow down a page’s loading speed. You can get the best of both worlds by resizing and compressing your GIFs before posting them. You can do this with a tool like GIF GIF. But note that no matter how well you resize a GIF, its file size won’t be as small as an image’s.
Optimize for featured snippets
Featured snippets are those snapshots of a website’s content that Google shows at the top of a search result. The featured snippet is usually a direct response to the search query.
A snippet may display as an answer, table, or list. Also, depending on the source of a featured snippet, the snippet may or may not contain an image. You can increase your chances of having your content show up in a snippet if you properly optimize the content as well as the image from your site.
If your content shows up in a featured snippet, it can drive more traffic to your site. To increase your chances of having your WordPress content being the featured snippet, you need to:
- Apply a keyword that people want a direct and short answer to. You can use Moz Keyword Explorer or Answer The Public to find such question keywords
- Provide the answer to the question keyword in the form of a relevant paragraph, list, or table. Also, target the keyword by using an exact match within your content
- Get an image that’s relevant to the keyword, optimize it, and add it to your content
- Make sure your content is fact-based and backed with quality references such as graphics, statistics, and links
- Increase your chances of being in the featured snippet by targeting question keywords that already have answers, but the current snippet feature answers the question poorly
- Optimize your content and images until the webpage gets to the first page of search results for the keyword
Cache Gravatars
Gravatars are basically avatars that appear beside the name of a visitor as he/she uses the internet. You often see a Gravatar when a person posts a comment. The problem is, if your posts generate a lot of comments, that’s a lot of Gravatars, which can negatively impact your website’s loading speed.
Fixing the problem can be done by disabling Gravatars completely on your site, or, breaking up comments to show less than 20 at a time.
Other solutions include:
- Using a cache Gravatars plugin like Optimum Gravatar Cache or FV Gravatar Cache
- Keeping your Gravatar default blank or using a custom image from your server
- Deleting comments, especially pointless ones to reduce the number
- Keeping the dimensions of your Gravatar images as small as possible – 32px or less
Conclusion
The above are all simple hacks that you can use to optimize WordPress images for greater performance, especially to make your site faster and rank higher in search engine results.
To make your work easier, try using one of the following WordPress plugins:
- Screaming Frog SEO Spider
- WP Rocket
- GifGifs
- Better Search Replace
- Cloudflare
- GTmetrix
- Automatic Image Alt Attributes
- CSS Sprite Generator
- Imagify
- Lazy Load
- Smush
- StackPath
- Lazy Load For Videos
- Optimum Gravatar
- Cache
- VA Removing Exif
The purpose of each of these plugins is mentioned in the post. But remember to not install multiple plugins with overlapping functions. For example, WP Rocket offers most of the optimizing options you need, such as Lazy Load, caching, and database cleanup.
