May 24, 2021
How to Optimize Images for Your WordPress Site
Website performance has a strong impact on users’ first impressions. A slow loading site can drive visitors away and potentially hurt your page ranking. Conversely, websites that load fast will get more traffic and achieve a better ranking on search engine results.
In fact, 40% of people will leave websites that take more than three seconds to load. One of the best practices when trying to improve performance is to optimize the images on your site. Image files can take up a significant amount of disk space and cause a page to load slower.
This article will explain what image optimization is, how it works, and how you can use it to optimize your web performance. We will go through five different image optimization methods and include a list of the best image optimizer plugins.
What Is WordPress Image Optimization?
Image optimization reduces an image file size as low as possible without losing its quality.
Combined with the best SEO (search engine optimization) practices, image optimization can also boost your website ranking in search engine results.
There are several methods for the image optimization process, such as resizing the images’ dimensions, changing the format, and compressing the files. We will break down and show you how to perform each method in the following sections.
Why Optimize Images for WordPress?
Optimizing website images help reduce the bandwidth usage on your page, which results in faster loading time.
Whenever visitors access your website, the web browser will send a request and download your images before displaying them. Unoptimized images can lead to slower loading times because they take longer to load, resize, and render.
Aside from site speed, here are some of the main reasons to optimize images:
- Enhance user experience – a fast loading site leads to lower bounce rates and higher user engagement.
- Improve SEO rankings – optimizing images will improve your site’s visibility in Google Image Search as the search engine will have an easier time indexing them.
- Preserve server space – reduced image files take up less server space, allowing more files to be uploaded.
Although optimizing images can help boost your site performance, it’s always recommended to check other contributing factors that might affect your speed as well. In the next section, we’ll figure out how to run a website speed test.
How to Test Your WordPress Site Performance?
To ensure your site performs well, it is crucial to run performance tests regularly. Identify what factors are slowing your website and how you can fix those issues with the help of website speed test tools.
This section will show you how to test your website performance with GTMetrix. This free tool provides an easy way for you to test and monitor your page’s speed and performance. Simply access the official site and enter your website URL in the provided field.
The system will start analyzing your website and generate a report. Once it’s done, you will see GTMetrix grade and web vitals scores, as follow:
Under the performance scores, you will see six other tabs covering different information and suggestions on how to improve your site speed.
You can see an overview of your site report along with the top issues you need to fix on the Summary tab. If your report shows the need to optimize images, then effective image optimization should improve your performance.
NOTE: To improve the accuracy of your report, you need to consider several variables, such as the number of tests, locations, and test subjects.
5 Methods for Optimizing Images for WordPress
When optimizing images, your goal is to reduce the file size without sacrificing the image quality.
There are multiple approaches you can take to optimize images. Combine a couple of methods to reduce the image file size as much as possible while still maintaining the quality.
1. Choose the Right File Format
Before you start optimizing, it is important to choose the correct file format. The file format you choose will affect its total size and ability to optimize the image. To begin, let’s look at the most common image file formats available:
- PNG (Portable Network Graphic) – uses lossless optimization and has the largest file size, commonly used for vectors, logos, icons, and digital arts.
- JPEG or JPG (Joint Photographic Experts Group) – has a smaller overall file size and works great for photographic images.
- GIF (Graphic Interchange Format) – works best for animated images, only uses lossless optimization, and has limited color choices.
Aside from the main formats above, there are other image types such as WebP, SVG, and AVIF. However, not all browsers are supported by these formats, so it’s not recommended for creating images for the web.
A good rule of thumb in choosing the proper format for your images is to go with either PNG or JPEG. This is because both formats can be resized or compressed without losing much overall quality.
Use JPEG for images with lots of colors and PNG for those that feature less of them.
2. Compress Your Images
When compressing images for your site, you’ll need to find a balance between the compression quality and the file size. Minimal image compression results in larger files but higher quality, while a high level of compression will give you smaller file sizes and low quality.
This is why you need to understand the difference between lossy vs lossless compression to figure out which method will work best for you.
- Lossy compression – removes data from your original image file to reduce its overall size. This method is irreversible, meaning once you compress images with lossy, you can’t restore the file back to its original form. Additionally, the more you compress, the more image degradation will occur.
- Lossless compression – reduces file size while still maintaining its quality. The lossless method only removes additional and unnecessary data from the image file. For this reason, you might not get a significant reduction. Unlike lossy, however, you can always restore the image back to the original.
If you run a website that presents high-quality images, like a photography site, then it’s better to rely on lossless compression so visitors can see your photographs in detail.
Meanwhile, an image-heavy site, such as an eCommerce store, might benefit more from lossy compression as it provides better file reduction and helps with site speed.
To help you get started, we will list some desktop-based tools, web-based services, and a few WordPress image compression plugins.
Desktop-based tools offer you more control over your optimization settings compared to web-based applications. If you’re used to working in a photo editor like Photoshop, you might prefer this approach.
Some of the most popular desktop-based tools include:
- Adobe Photoshop – this software has a built-in image compression tool that optimizes images without impacting the resolution.
- GIMP – a free alternative to Photoshop that offers a JPEG compression feature with adjustable quality level.
- Affinity Photo – provides an image optimizer feature that supports a wide range of formats from PNG to SVG.
- Paint.NET – a photo editor for Windows users that allows you to compress files down to your desired image sizes.
Although the tools above have a steep learning curve, they allow you to customize the image optimization settings that work best for your needs.
Automatic Image Compression Services
If you prefer a more straightforward approach, you can use an online image optimizer.
These tools are great if you don’t want to spend time learning the ins and outs of photo editing software. Some of the most common web-based tools include:
- TinyPNG – compresses up to 20 images at once. Files up to 5 MB can be optimized for free.
- Kraken.io – this image optimizer service handles compression for JPEG, PNG, and GIFs. There is also an option to bulk upload all of your images in a zip file.
- Jpeg.io – converts any file formats to JPEGs and automatically compresses them before serving them back to you.
- ImageRecycle – comes with a free performance tool that scans your site and reports images that need to be optimized.
With the tools above, all you need to do is access their web pages and upload your photos. The system will start working to compress your images, and you can simply download them once it’s done.
WordPress Compression Plugins
Like with most WordPress tasks, there are plugins that you can use to compress images. To find the right one, head to your admin dashboard and navigate to Plugins -> Add New.
In the search field, typing in “Image Compression Plugin” will bring up several plugins in the directory.
Choose a plugin of your preference and click on the Install Now button. Wait for the installation to finish, then click Activate. Depending on the plugin, you might have to configure its settings to get it up and running.
To help you find the best WordPress image optimizer plugin, we have included a list of our plugin recommendations in an upcoming section as well.
3. Resize Images for Optimal Display
Displaying oversized images will not only waste your server resources but will also slow down your response time.
For example, if an image’s default display size is 200×300 pixels and you change it to 800×1200 pixels, the web browser will have to render extra data to fit this image on your page. When you add more than one image, this can add up and result in unnecessary delay.
With that in mind, it is important to scale your images to their proper display size when you export them to your site.
The best approach is to find out the maximum width of your theme’s content area and size your images accordingly – you can do so with Google Chrome’s inspect tool.
To start, access your site and right-click on any content on your page, then choose Inspect.
A window with a bunch of code will then appear on the right side of your screen. Simply hover your mouse through every line of code until you see a highlighted column.
There will be a tooltip on top of the highlighted part – this specifies the dimensions of your content area. In this example, the maximum width is 964.8 pixels which means you need to scale all images to fit the given dimensions.
You can also change the WordPress default sizes from the media library by going to Settings -> Media. Enter the maximum width and height of your preference and click Save Changes.
That said, older images you have uploaded before the customization will be left unaffected. Also, when you switch to a new theme, it might override your settings to the theme’s default settings. To avoid these situations, you can install a plugin such as Regenerate Thumbnails.
4. Ensure Images Are Neatly Cropped
WordPress has a built-in image editor that lets you resize your images by cropping them straight from your dashboard.
However, once you’ve cropped your images, the original files will still take up your server space. Also, by performing too many edits within the dashboard, you can save multiple versions of the same file.
Thus, we recommend cropping your images before uploading them. If an image needs to be cropped to fit the site better, then delete the image, crop it from your computer, and re-upload it.
5. Improve Image SEO
Optimizing your images alone will speed up your site and already improve your chances of ranking higher. However, there are a few additional steps you can take to improve the SEO of your images:
Optimize Image Title Text
An image title is a text that will appear whenever you point your cursor over the image. It helps readers to understand the image better.
To change your image title text, navigate to your post editor where you’ve placed an image. Hover over the image and click the pencil icon, which will bring up the Edit option.
On the Advanced Options screen, you’ll have a place where you can enter or change your image title.
Set Alt Tags
An alt text or alternative text appears whenever an image fails to load on the web browser’s screen or is read out whenever the content goes through a text-to-speech program. In short, it helps describe what the image looks like.
This text can also help Google understand your content and help your page rank better. For this reason, you want to write your alt text as specific and descriptive as possible. The more detail you provide, the better Google will understand it.
With alt text, you also get a chance to add more target keywords to your content. However, be mindful when including the keywords as your main priority should be providing context to the image.
To change your image alt text, go to your visual editor and hover over an image you’ve inserted. Click on the pencil icon, and it will bring up the Edit option.
On this screen, look for a box labeled Alternative Text and enter your focus keyword or related keyword into that box.
Use Proper Image File Names
Google uses file names to identify images’ appearance and function on a web page.
By optimizing file names, you help to improve the relevancy of your content with the images. Moreover, Google can help them rank in the image search results – which can be an excellent source of additional traffic.
For example, instead of having file names with a random assortment of numbers and letters, try to add target keywords in your file name. This will better describe what the image is about.
Finally, if you’re using multiple words in your file name, make sure you’re using a hyphen between your words, as Google will read them as a space. Otherwise, your file name won’t be properly readable.
Best WordPress Image Optimization Plugins
Image optimizer plugins offer all-in-one solutions for your image optimization needs. Below, we have selected the top-three best WordPress image optimization plugins to help you get started.
- Downloads: 80,000+
- Rating: 5/5
- Notable features: image CDN, cloud media library, retina support
- Pricing: freemium (premium plans start from $19.08/month)
Optimole is an image optimization plugin that optimizes your site’s images from a global CDN (content delivery network). Combined with a cloud-based solution, Optimole helps reduce the load on your server and speeds up your loading time.
The plugin comes with a one-click setup and automated tools. Simply create an account and insert your API key to activate. The tools will then automatically run in the background to optimize your images.
Optimole has a free version that supports 5,000 monthly visits. To get more visits, you can purchase one out of the two premium plans. The Optimole Starter plan costs $19.08/month for 20,000 visits, while the Optimole Business plan provides 80,000 monthly visits for $39.08/month.
- Downloads: 500,000+
- Rating: 4.7/5
- Notable features: auto-optimization, image backup, online-app integration
- Pricing: freemium (premium plans start from $4.99/month)
Imagify increases your website speed by automatically resizing and compressing images with different formats. Aside from still images, Imagify also works great to optimize animated graphics.
Imagify provides three optimization levels – normal, aggressive, and ultra – the higher the level, the more quality will be reduced. There is also an option to backup your original images in a folder and restore them when needed.
The free version of Imagify limits users to 20MB images per month with a maximum upload size of 2 MB per image. Meanwhile, the premium version offers 500 MB for $4.99/month and unlimited image data for $9.99/month.
- Downloads: 800,000+
- Rating: 4.6/5
- Notable features: lazy loading, bulk optimization, CDN support
- Pricing: freemium (premium plans start from $7/month)
EWWW Image Optimizer (EWWW IO) might not have the most straightforward user interface, but the plugin still provides an easy way to optimize your images in WordPress. It will automatically optimize, lazy load, and compress every new image you upload.
This image optimization plugin also optimizes existing images and converts them to new formats, such as JPG, PNG, GIF, and WebP. Users can choose compression level for each image format, from lossy to lossless compression.
EWWW IO performs image optimization using your own server tools, allowing you to maintain your site’s privacy. Moreover, EWWW IO provides 80% compression, JS/CSS optimization, and CDN support for their premium plans.
Images on your site work to capture visitors’ attention and keep them engaged. They help represent your brand and add context to your posts. In addition, you can also add images to break up long content and make it more readable.
However, most WordPress site owners tend to upload and use images that aren’t optimized for the web, which results in slower loading times. This is where image optimization comes into play – using optimized images can help you deliver faster performance for your visitors.
You can choose several methods to optimize your images, from selecting the right file format to compressing images. There are also various image optimizer plugins you can install to get the job done on the go.
- Optimole – compresses images and delivers them via global CDN.
- Imagify Image Optimizer – automatically replaces your original images on your server with the optimized ones.
- EWWW Image Optimizer – optimizes images with lazy loading and converts them to new formats of your choice.
How has optimizing your images improved your loading time and performance? Share your experience in the comments below.