Images are a critical component of any website especially its impact on website speed. They make websites attractive, improve user experience, click through rates and can also reduce bounce rates. But they also can slow down your website. All of these will have some impact on your website performance both on search engines and the impression your users will have about yyour website.
Further reading:
Even though Internet speeds have dramatically increased over the years, it is important that you take care of pictures on your website because it will improve your website performance.
Just because it’s easy to upload images to your site, that doesn’t mean you should do that without any preparation. Unoptimized images can, in fact, hurt your site in many ways; from affecting the way visitors think of you to the speed of your website and SEO rankings. If you still haven’t thought of that, we’re here to show you several ways of improving images in WordPress.
In this guide, we are about to show you:
- How to optimize images for WordPress to speed up your site and improve SEO
- Change the way WordPress compresses JPEG images
- The most popular image optimization plugins for WordPress
- Add lazy loading for your videos and images
- Display before and after images in an attractive way
- How to create interactive images – draw, add descriptions and links
- How to regenerate additional image sizes
- Remove width and height image attributes with jQuery
- How to create custom image sizes in Media Uploader
- Create automatic screenshot of any website and publish it as image in your post
Further reading:
WordPress Website Speed Optimization Tutorial
WordPress image optimization tutorial
How to optimize images for WordPress so that you speed up your site and improve SEO
First, you need to understand why image optimization is important. Why you should optimize images for your WordPress website. Here are the top reasons you should improve our website images:
- Faster site
- Better SEO
- Smaller backups
- Less bandwidth usage
- Happier users
You should also know that there are different stages at which you can optimize the images. You can take care of the pictures even before you upload them to a blog or you can do that after the upload.
Start By Testing the images on your site
Before you start working on the optimization, you can quickly check your site for speed and performance. By using any of the tools from the list, you’ll quickly get to know in what shape are the images on your site.
We like to use GTmetrix which will even show you the exact images that are causing your site to load slowly.
Optimize images for WordPress before you upload
Most website managers ignore image optimization before the use photos. Usually, people would just take a photo from their camera or smartphone, download one from the Internet or create one by using computer software.
They don’t think about formats, image dimensions and file names. If the picture looks good, they just assume that it’s ready for the Internet. If you don’t check your images, you’re building towards a slow website.
Resize images
Don’t upload images to your WordPress site before checking width and height of each picture. If you display images at a maximum of 700px, for example, there’s really no need for uploading a wider picture. If you do so, you will have a larger file which will make your site slower, while the output will be the same. WordPress will create additional size, but that’s not the excuse not to prepare the images before upload.
Resizing images is quick and easy. There are many free tools like Microsoft Paint that will help you with that. You can even find free online tools for resizing images like Easy Resize or Resize Image.
Image dimensions will vary from theme to theme. If you aren’t sure which one you should use, take a closer look at your theme and inspect pictures, search for documentation or ask support for help.
Change the quality
After changing dimensions, you should consider changing the quality of images. Depending on the software, there are different ways of modifying the quality of pictures. For example, Photoshop allows you to save images for the web. This option will allow you to save images at lower quality, but they will be optimized for your site.
Also, if you choose to save a picture as JPEG, Photoshop will ask you to choose the quality level. In this case, lowering the quality from 12 to 8 will dramatically reduce the size of an image, while the difference in quality won’t be that big.
If you are still not using any software to change the quality of your pictures, you can try free online Tiny PNG tool. Just upload a picture and see what difference it can make.
Choose the right format
Even after the changes in size and quality, you should consider changing the format. For starters, just by selecting the right format, you can take off a few kilobytes from an image, if not more.
The general rule is very simple. If you have a photograph, make it JPEG. If you have a logo, vector image or a very simple computer generated graphic, go with PNG. If you have a really small image without gradients or you want to show a simple animation, you can use GIF. Generally, PNG images will be quite larger than the JPEG ones, and you can benefit from changing the format.
In many cases, reformating images won’t make significant quality differences, while you can expect the difference in size. Before you upload a PNG photograph, give it a shot and try saving it as JPEG to see the difference.
Take care of filenames
Interestingly, filename are also important, This is because the name of your image file holds a valuable info for SEO. If you want others to be able to find your image on Google and other search engines, you should give it a proper name.
We suggest that you name images without using spaces. Don’t forget to include keywords if you want the page and the image to rank.
Optimize images for WordPress after upload
After preparing images on your computer, you can proceed with the upload. Hopefully, your images are just the right size and quality. You made sure the format and filename are correct. After the upload, WordPress will ask you for additional info. Don’t skip the meta information; fill in the details about your images so that you can easily organize them and prepare for SEO.
Title, description, alt text and caption
While taking care of the technicalities, you shouldn’t forget about the SEO. Always add the title and description to your media. This will help you with WordPress media management, and it will also work towards better SEO. Also, don’t forget the alt tag which will be displayed for visitors who can’t properly see your image. This will be helpful for your users, but it will also help you with SEO. Your page will rank better, and users will be able to find your new images more easily.
Although you won’t need captions all the time, make sure you add them for images that need additional explanations (for example, screenshots).
Edit images with WordPress
If you realize that a picture still needs further editing, then the good side of WordPress is that it allows you to do so even after you’ve uploaded the file. You can change the rotation, crop, and scale pictures you already uploaded. You can even edit just a thumbnail or all the other sizes. WordPress’ native editor is very simple, but it can save you from time to time.
Regenerate all thumbnails
Most of the previous techniques will help you for new image files that you are still about to upload. But what if you have hundreds if not thousands of files already uploaded to your WordPress site? Don’t worry; you can still optimize those images and change their sizes.
For a quick fix, you may be interested in a free Regenerate Thumbnails plugin that’s been used by more than one million users. If you want more control over images, you should check out some of the best WordPress plugins for image optimization which we’re going to show you in the following lines of this article.
Use WordPress plugins
There are dozens of WordPress plugins that can help you optimize images on your site.
Lazy Load images when necessary
Sometimes, the quality of pictures will be much more important than their size. This is mostly true for photographers who want their photos to be top-notch. They can’t risk reducing the size nor quality of files. Still, that doesn’t mean you should forget about optimization. To optimize images for WordPress in this case, you should consider lazy loading.
Lazy load is a technique that loads images only when users need them (that is, when users scroll to them). For example, if you uploaded twenty high-quality photographs in one article, they would tremendously slow down your site. But if you lazy load the images, the article would be lightning fast and photos would load only when needed – at the moment, it loads only when a user gets to them.
Have responsive images
It is hard to find a WordPress theme that is not responsive. However, that doesn’t necessarily mean that your images are responsive as well. Since you don’t want a large image to load on small screen, you will need to register additional image sizes for your site. If your theme isn’t using responsive images, consider changing your theme for one that does so.
Optimize images for social media
If you want to make sure that your images look good on social media, you will have to take an extra step and optimize meta tags and schema markup.
If you’re using an SEO plugin like Yoast, don’t forget to check the settings. For example, Yoast will let you set up a few things related to the social media. So, navigate to SEO -> Social and enter the information on Facebook, Twitter, Google+ and Pinterest.
If you want more, and you want to optimize images for additional social media websites, check out WPSSO – Accurate Meta Tags + Schema Markup for Social Sharing Optimization & SEO plugin.
Change the way WordPress compresses JPEG images
If you are uploading a lot of JPEG images on your WordPress website, you might have noticed they are losing on their original quality. If you have wondered, that is a WordPress issue.!
Once you upload an image in JPEG format, WordPress automatically changes the compression and decides you want the image to lose on quality. To be more specific, WP uses 90% compression on your JPGEs. That’s great if your images are only there to be used as post thumbnails or to be shown in a post, but if you are uploading your photographs, you want them to be as best as possible,
Never mind, there is a solution requiring that you use just one line of code to change this.
Stop JPEG images compression:
If you don’t want your JPEG images to be compressed, simply copy and paste the following code into your functions.php file:
add_filter('jpeg_quality', function($arg){return 100;});
Don’t forget to save the changes.
On the other hand, images might not be that big of a deal for you. So you might want them to be even more compressed and save you time on loading your site. If you change the last number in that line of code, you will be changing the quality of newly uploaded images.
Compress JPEG images even more:
The lower the number, the more images will be compressed. For example, to compress those JPEGs even more, you will need this code:
add_filter('jpeg_quality', function($arg){return 80;});
Don’t forget; default compression level is 90.
Important: This will only affect images that you upload after you pasted the code in the functions.php. To change size and quality of the images you already have in the library, you will need a plugin. See how to regenerate additional image sizes.
The most popular image optimization plugins for WordPress
One of the things we want to achieve in this post is to show you how to optimize images for WordPress so that you speed up your site and improve SEO. As you could have seen, there are a few different methods you can use. It’s important to take care of images even before you upload them to your blog. But when pictures are already up on the site, it may become impossible to reoptimize each and every image separately and then upload them once again.
In that case you can deal with it using a plugin. We will now show you the most popular image optimization plugins for WordPress. Using plugins to do this is easier.
To optimize images, you will just have to select the plugin from the list. You will have to configure it and choose things the plugin will do for you. After that, you’ll be able to relax and delegate the work to the plugin of your choice, while you can start organizing your media files.
The following plugins will help you compress the images on any WordPress site you have. They will make the site load faster and ultimately help you to improve SEO.
WP Smush
With more than 700,000 active installs, WP Smush has to be one of the best image optimization plugins for WordPress. It can quickly optimize images by using different compression techniques. The great thing about compressing images with WP Smush is that images won’t lose on quality.
When we talked about preparing pictures for WordPress, we mentioned that resizing is a crucial part of the optimization process. With this plugin, you won’t have to worry about that since WP Smush lets you set maximum dimensions. After doing so, all larger images will automatically scale down before you add them to the library.
This fantastic plugin can work with JPEG, GIF, and PNG files. It works with all of your directories, automatically takes care of the attachments, and even works on multisite. You can manually operate on each image or edit fifty of them in bulk. If you want even better results and more options,
EWWW Image Optimizer
This is one of the most popular image optimization plugins for WordPress. Just like the previously mentioned one, EWWW Image Optimizer can compress your images without affecting their quality. When you think about that the plugin can speed up your site in seconds, you’ll be already on your way to download it. Once you do that, you’ll get to optimize images in bulk, and galleries like GRAND FlaGallery, NextCellent and NextGEN will even get their own Bulk Optimize pages.
All images that use WP_Image_Editor class in WordPress will be automatically optimized, while you can manually work the magic on all the others. We like that you get to select folders which you want to optimize. For more details about this, and which plugins use the class, please open the official EWWW Image Optimizer page on WordPress repository.
Compress JPEG & PNG images
This is a great optimization plugin. If you go with this plugin, it will automatically optimize your images. Each time you upload a new one, the plugin will take over and do its job. Still, you can optimize individual pictures or do that in bulk just by going to the media library.
Compressing JPEG & PNG images even supports animated PNGs, works perfectly on a multisite, it’s WooComerce compatible and will not have problems with WP Offload S3.
The great thing about the plugin is that it allows you to set maximum width and height attributes for all the images. If you have been worrying about what it will do the metadata, don’t worry; all that info will be intact.
There are no file size limits, you get to set a dashboard widget, and it even works with the WordPress mobile app. Because all of that, Compress JPEG & PNG images has more than 100,000 active installs and deserves a spot on the list of best image optimization plugins for WordPress.
Imsanity
This pluin has great features. Ignore its funny name. Imsanity can automatically scale images, allows you to set maximum dimensions, and it even features a bulk resize option. This is important if you already have hundreds of pictures on your blog that need optimization.
This free plugin is a great option if you don’t want to struggle with the plugin’s settings a lot. All it takes is to install and activate Imsanity, set a few options, and you can forget about it; it will manage its own way towards image optimization.
It has a great feature that allows you to convert BMP images to JPG. Just in case you have a lot of BMP files you mistakenly uploaded some time ago.
ShortPixel Image Optimizer
With more than 30,000 active installs, ShortPixel Image is still one of the most popular image optimization plugins for WordPress. The plugin is packed with features, and it will be a must-have for sites that have a lot of images to optimize.
ShortPixel Image Optimizer will not only optimize JPG, PNG, GIF, and PDF documents for you, but it will also let you convert any JPEG, PNG or GIF image to WebP. The plugin works well with other gallery plugins, and it doesn’t care if your site uses HTTP or HTTPS. It will let you remove EXIF data from images (something photographers will love to have).
Optimus – WordPress Image Optimizer
Optimus will optimize your images for WordPress and it will do that without affecting the quality of your pictures. You can let the plugin work out things automatically, or you can turn off the option and only optimize images when needed.
Optimus works on multisite, it’s no stranger to WooCommerce sites, and it’s completely optimized for WordPress Mobile Apps and Windows Live Writer. It will speed up your site without you having to touch a line of code. The plugin offers much more, but you will have to opt-in for the premium version.
Add lazy loading for your videos and images in WordPress
Once you start adding a lot of video and image material on your website, it is obvious that it will start loading slower. Videos and big images will act like a heavy weight on your site and will make your visitors wait much longer than needed to load all the content. With WordPress, that shouldn’t be a big deal and here is how you can easily fix the situation.
Lazy Load for Videos
If you have a lot of Youtube and Vimeo videos, you should consider installing this plugin. Once you set it up, the plugin will place an image on your video and because of that, your website will load much faster. Once a visitor scrolls to a video, this image will be shown with a “play” button over it. After a click, the video will start loading and playing.
WP YouTube Lyte
This plugin will do its job in a quick and easy way. After installing it, just add a link to your Youtube video or use a shortcode to add one. You can choose between adding a normal video, playlist or only audio from selected video. After that, your Youtube videos will get an image over it which will enable lazy loading. Just click on the image to make your video or audio start.
See a demo on developer’s site.
a3 Lazy Load
This one is dedicated to your mobile site. If you have a lot of images and/or videos which you want to show to your visitors on mobile devices, you should take a look at a3 Lazy Load. It will allow you to add lazy loading to your images and videos and the plugin will even let you choose transition effects which will appear to users while they scroll through the content which is loading.
BJ Lazy Load
If you don’t need support for videos and only want your images to lazy load, you should check out this free WP plugin. Once installed and set up, it will replace your images, thumbnails, Gravatar pictures and even iframes with a placeholder. Similar to a previously mentioned plugin, it will load content only once a user comes to it.
Display before and after images in an attractive way
You may be familiar with before/after images. You may have seen this in fitness training program where people show their bodies before and after a workout program. You now have an idea...
If you think about it, most websites use a simple approach to showcase the differences – they take both images and place them one next to another or even one above the other.
Twenty Twenty
Twenty Twenty is the name of an awesome plugin which you can download for free in WordPress plugin repository. The plugin will let you place one image over the other and let you play with a slider so you can hide/reveal the image.
Let’s see how to create this stunning effect. Although it is relatively easy to recreate the demo effect, you will still need to know your way around basic HTML. Let’s go:
<a href="image1.jpg"><img src="http://www.loactionoftheimage.com" width="700" height="200" /></a>
<a href="image2.jpg"><img src="http://www.loactionoftheimage.com" width="700" height="200" /></a>
You should end up with something like this in your Text Editor:
[twentytwenty]
<a href="image1.jpg"><img src="http://www.loactionoftheimage.com/image1.jpg" width="700" height="200" /></a>
<a href="image2.jpg"><img src="http://www.loactionoftheimage.com/image2.jpg" width="700" height="200" /></a>
[/twentytwenty]
Create new post or open the existing one
Insert two images into the post. If you are working in a Visual Editor, you should see the image one above the other one. If you are working in a Text Editor you should see a code similar to this:
Enter [twentytwenty] tag before the first image
After the second one enter [/twentytwenty] tag
Make sure your pictures are the same size to achieve the best results
Preview or publish your post and enjoy your visually stunning before and after pictures
How to regenerate additional image sizes
It is relatively easy to register new image sizes in your WordPress theme. After you have told your system how big your images should be, named them and decided how to crop them, you are free to distribute images anywhere you want. But what about the old images?
Regenerate Thumbnails:
Go to Plugins->Add New
Search for “Regenerate Thumbnails”
Install and activate the plugin
Navigate to Tools->Regen.Thumbnails
If you want to resize all of your images, simply click on the “Regenerate All Thumbnails” button and wait for the plugin to do the hard work.
If you want to see the images which are going to be resized, or if you want to resize only some of the images, go to your Media Library where you will find a new option under “Bulk Actions” and one beside each picture in the gallery.
The good thing about the plugin is that it doesn’t delete your original images. It will only create new image sizes which you can use in your theme, while the original ones will be left for you to use them later or delete manually if you decide you don’t need them.
Remove width and height image attributes with jQuery
When adding images to a WordPress post, the system automatically adds its height and width attributes to the picture. That’s usually a good thing, but there are times when you won’t like the fact that every image gets those attributes.
If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.
But if you read the article or tried the function yourself, you’ve noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won’t help you much with your old image attributes.
Remove width and height image attributes:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>
Open header.php file from your theme folder
Copy and paste this code anywhere between <head> and </head> tags:
Save changes
The code will do its magic after you open a post which contains an image and will remove width and height tags from it.
