It’s been a long time since images were something too big to load over the Internet. Today, websites can’t exist without them. Even though Internet speeds have dramatically increased over the years, it’s vital that you take care of pictures on your blog.
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 how to optimize images for WordPress.
Why should you optimize images for WordPress? If you make an effort, you can expect the following:
- 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.
Quickly test 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 slower.
Optimize images for WordPress before upload
While blogging, most people don’t take all the necessary steps in order to optimize their images. 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 nor the 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 disaster.
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.
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, always popular 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 just 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 can it 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 like the one shown above, 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. Next time before you upload a PNG photograph, give it a shot and try saving it as JPEG to see the difference. For more detailed explanation, please check out the difference between PNG, JPEG, GIF, and SVG.
Take care of filenames
While filename might sound unimportant, it’s actually something you should be very aware of. 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. For example, if you’re uploading a picture of Ferrari California, the file name should be “ferrari-california.jpg.” If you use an SEO plugin for WordPress, you already know that it checks your alt tags for keywords. Yes, it really is that important to have proper image name.
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. Not only 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 easier.
Although you won’t need captions all the time, make sure you add ones for images that need additional explanations (for example, screenshots).
Edit images with WordPress
If you realize that a picture still needs further editing, you should know that WordPress allows you to do so even after you’ve uploaded the file. 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 you save 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 several days.
Use WordPress plugins
Of course, there are dozens of WordPress plugins that can help you optimize images on your site. In this article, we are not going into details about the plugins; make sure to come back in a few days when we’re about to show you the best of them. Some of the popular choices include:
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 (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 when a user gets to them.
Have responsive images
Although the majority of WordPress themes are responsive, 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 hiring a professional for the job – it isn’t as easy as it might sound.
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 for 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.
We hope that this article will help you realize the importance of image optimization. Even if you can’t or won’t do all the necessary steps to optimize images for WordPress, at least do something about it. Don’t forget to subscribe to our notifications so you don’t miss our next articles. We’re about to talk more about image optimization and show you some of the plugins for the job.
- The most popular image optimization plugins for WordPress
- 8 simple ways to optimize and improve the loading speed of your WordPress homepage
- 10 simple and quick ways to speed up your WordPress site for free
- Reduce the number of HTTP requests and speed up your WordPress site