How to Optimize Images in WordPress

by Gerald Jackson on Jan 26, 2021

Visual aspects of blog posts are just as important as the written content that they accompany. Not only do images and embedded videos enhance the reading experience for your audience, but they signal to search engines like Google that your content is rich and engaging. 

Rich and engaging content is what ranks, so you can see how that might be a critical part of any content strategy. 

In modern content and SEO development, however, you can’t just throw images up on a page and call it a day. Images that load slowly, take up too much space or look bad can impact your SEO rank and your audience engagement efforts. 

That’s why it’s important to optimize your images before you publish content to the web. 

Here, we will talk about image optimization in WordPress. We’ll focus specifically on the importance of optimization, how to approach optimization using WordPress plugins and tools and how to manage basic SEO optimization with built-in WordPress functionality. 

In this article, we cover:

1. What image optimization means for WordPress users.
2. What steps you should take for SEO image optimization.
3. Image formats and how to use them for optimum display and performance. 
4. Best standalone programs you can use to optimize images for WordPress. 
5. The top image compression plugins for WordPress.
6. The best tutorials to get you started with image optimization

What is Image Optimization in WordPress?

If you’ve never worked with images or image editing before, you may have never come across the term “image optimization.” The truth is that depending on the context, optimizing an image can mean a number of different things. For WordPress developers, image optimization is tied directly to making images accessible to readers and Google website crawlers in equal measure. 

What does accessibility mean in the context of WordPress optimization? It all boils down to performance:

• Websites load quicker when they use images with file compression. File compression is the technique of taking the raw data of an image file and compressing it by removing superfluous information. This allows you to reduce the size of an image file, which makes it easier for the user to download it. Some forms of file compression can degrade image quality, but many newer techniques and tools have emerged to retain image quality while reducing file size.
  
• Along those lines, optimized images are often encoded in specific file formats. The three major file formats used in web design are JPEG, GIF and PNG. Each format trades the benefits of more or less compression with higher or lower image quality.
  
• Optimized images also stick to a certain set of dimensions. Dimensions are the size of the file, usually expressed in a “width x height” format. For example, a 900×600 image is 900 pixels wide by 600 pixels high. Resolutions will usually also include a measure of the Dots Per Inch (or DPI). DPI is actually a holdover term referring to print quality, and in modern image manipulation it is also referred to as Pixels Per Inch (PPI). In either case, DPI is the quality of the image, with higher DPI providing a higher-quality image. 

Image optimization in WordPress is all about minimizing load times without impacting image quality too badly. By providing optimized images, you can serve content to users faster, which is good for them and good for your SEO. 

What is SEO Optimization for Images in WordPress?

While file compression and formatting are incredibly important for images embedded in your WordPress site, it’s also important to include specific HTML elements and page layout techniques that help with accessibility and readability.

• Always include Alt Tags with all your images. An alt tag is information that describes the image for search engines. These alt tags can contain keywords and other relevant information that helps Google recognize what the image is and what it is for, increasing its chances of contributing to your site’s visibility.
  
• Additionally, Title Tags help readers understand what an image is and demonstrates your commitment to accessibility. Title tags define the text that will show up when a reader hovers their mouse over the image.
  
• Pay attention to image placement near keywords and relevant content. Google can coordinate image proximity to keywords based on meta information and rank content higher if that corresponds with the search terms readers use. 

There are a few other things that you can do, including using XML sitemaps to serve image information to search engines, but they are beyond the scope of this article. 

Why Is it Important to Optimize Images in WordPress?

To understand why image optimization is so important for WordPress websites, you need to understand how images work for Search Engine Optimization (SEO). 

Images contribute to your search engine rank primarily in three ways:

1. Images contribute to higher search rankings overall. When Google algorithms crawl and rank websites, they look for properly-formatted images as a marker of high-quality content. Images that load fast and that contain data like tags that are relevant to the topic suggest to Google that your content is robust and engaging.
   
2. Images provide the opportunity to rank in Google’s image search feature. Many searchers will look through Google images alongside regular search results. Having images that rank gives you another opportunity to show up in front of your audience.
   
3. Images make content more attractive to readers. Whether those images contribute to the aesthetics of the page or share information through charts or graphs, images make content richer. That means readers are more likely to read your content again and share it with others.

However, these criteria only matter if your content can rank. And, according to Yoast, site loading speed is the king of SEO. Why is that? Because:

1. Google attributes more influence to sites that load fast.
2. It’s easier for the Google bots to crawl fast sites. 
3. Readers expect sites with fast loading speeds, and will bounce from slow sites within 3 seconds. 
4. Conversion-oriented pages also suffer from slow loading times, even if the reader stays on the page. 

What Are the Best Optimized Image Formats for WordPress?

As stated above, the best image formats for optimized images usually involve some sort of compression.

When you take a picture with a camera or create an image on your computer, there are several image formats you can save it as. Many cameras will allow you to save images to RAW format, which contains all the image information from the camera sensor. Likewise, early computer image formats like Bitmaps (.bmp) were completely uncompressed. Both files were usually incredibly large and hard to load over internet connections. 

To make images easier to load on the web, designers have picked up three standard file types:

• JPEG, or .jpg, is the standard image format for most web pages. A JPEG file is compressed to retain significant information about color and shading. However, many JPEG files can lose image quality if they’re compressed too much.
  
• GIF, or .gif, is a simpler form of lossless compression. These files are often smaller but do not contain the same level of color information. Ultimately, that makes them more suited for simple logos rather than photos. GIFs are also popular for frame-by-frame animations where image quality isn’t as important.
  
• PNG, or .png, is another form of lossless compression used for complex drawings, graphs or any image with text. PNGs come in typically higher qualities than JPEGs. But, photo professionals still prefer JPEG file formats for photos.

Several other image file formats exist, but most website users require some combination of the above three. SVG images, for example, are vector images that use XML and metadata, which allows users to scale them without impacting the look of the picture. However, most platforms disallow this image type due to size constraints. 

How to Optimize Images in WordPress Through Image Compression

If you’re optimizing images for WordPress, the first step you can take is to compress the image so that it loads faster for display. 

Depending on the use of the image, you can compress it into a JPEG, PNG or GIF file. If you aren’t loading high-resolution images, then you have some more flexibility when it comes to compression and image quality.

Remember: if you’re uploading photos, you most likely want to use JPEG files. If you’re posting logos, infographics or other images with text, then consider using PNG files.

Speed Up Your Website with Envira Gallery’s Compression Tool

The Compression Tool directly inside Envira Gallery lets you to optimize your images and reduce their file sizes.

The image compression tool is available for users with any paid Envira Gallery subscription (Pro tier or higher).

If you’re using Envira Gallery Lite, head over to our documentation to learn more about upgrading your Envira Gallery license.

If you’ve already upgraded, you’ll just need to update the Envira Gallery plugin before you can begin compressing your images.

Learn how to set up the new Compression Tool inside Envira Gallery so that you can speed up your website and page loading times.

Below, we’ll cover how to use Smush to compress our images. This compression plugin is perfect for users who simply want to compress their images easily inside their WordPress installation.

Steps to Compressing Images for WordPress using Smush

Install Smush. In the WordPress Dashboard, click on Plugins > Add New. The plugin market screen will open.

Search for “Smush.” When the Smush plugin card loads, click Install Now. When the button changes to Activate, click it again to turn it on.

A new link for Smush will appear in the Dashboard menu. Click it to go to the Smush dashboard page. A help dialog will immediately startup on your first visit to the page.

Click Begin Setup to move to the next screen.

Automatically optimize new uploads should be turned on. If it’s not, select it, then click Next.

Make sure to select Strip my image metadata, and click Next.

Select Enable Lazy Loading, then click Next.

Optionally, check Allow usage data tracking and then click Finish Setup Wizard.

Now, Smush will automatically compress all images uploaded to your WordPress site. It will also strip any additional metadata from your Finally, Smush will optimize your pages so that images load in accordance to their placement on the page.

Next, go to your image gallery. You’ll note that your existing images are not compressed.

Click on the Smush link. This will automatically compress your image file.

How to Optimize Images for SEO in WordPress

Optimizing images for SEO is a bit simpler. There are three basic steps to take:

First, add an Alt Tag to your image. To add an Alt Tag, go to your Media Library, then select an image and click Edit.

When the editing window appears, type in an Alt Tag text string in the Alternative Tag text box. Add a caption if you like, then click Update.

Make sure that your images are close to relevant keywords. If your posts are about lemon pie, for example, and you include an image of a lemon pie, then place the image (including an Alt Tag that contains the term “lemon pie”) near a paragraph that mentions lemon pie. Google will notice this and use it to rank your content. 

Optionally, you can add a caption to the image right in the gallery itself. Adding a caption provides Google with additional metadata to help it process what your content is about. 

Remember that SEO optimization helps Google identify your images and your content for indexing and helps your pages rank in search results. 

What are the Best Programs for Optimizing Images for WordPress?

There are several tools available for optimizing images prior to posting them on WordPress. If you want more control over your image optimization then you can try out some of these software tools to help you.

You know Adobe Photoshop as a photo editor, but it’s also one of the best standalone image optimization tools for users that need control over their optimization. With Photoshop, you can take most images and optimize them however you see fit. 

Adobe Photoshop also allows you to save images in any of the above-listed formats while controlling the resolution and image quality. Photoshop lets you:

• Save and compress to JPEG, PNG, and GIF formats. 
• Adjust the DPI and resolution of the image prior to compression.
• Get a download time estimate based on the size of the image and the kind of connections you expect to your site.

If you are going to use an external program, we recommend using Adobe Photoshop. 

What are the Best Image Compression Plugins for WordPress?

If you simply want to compress and optimize images in WordPress without having an external software package, then we have a few recommendations for plugins that could suit your needs:

Envira Gallery. The Compression Tool inside Envira Gallery lets you optimize your images and reduce their file sizes so that you can speed up your website.

• WP Smush. As mentioned above, this simple and free plugin can automatically compress images, strip extraneous data and optimize page loading for your WordPress site.
  
• Compress JPEG and PNG. This plugin gives you a little more control over your compression results, but requires you to sign up for an account. It also limits image compression to 100 files per month.
  
• EWWW Image Optimization. This simple plugin is one of the largest compression plugins on the market. That means it has great support and a great community to help new and experienced users. Like WP Smush, it can optimize images right in WordPress, but does so on their external servers.

We chose these plugins based on their ease of use. If you are a more advanced image design professional or WordPress programmer, there are also more advanced plugins that offer API access. These include plugins like ShortPixel and reSmush.it.

The Best Tutorials for Optimizing Images in WordPress

Whether you are an expert or a beginner, there are tutorials available to help you work with image optimization in WordPress through plugins and the WordPress interface:

Envira Gallery’s built-in Compression Tool is a great place to start. Learn how to get the most out of this valuable feature so that you can speed up your website.

• Beginner’s need to start somewhere. Along with the article you’re reading now, this tutorial on optimizing images for the web can help you get started with image optimization on WordPress.
  
• Some blog authors need a finer sense of control over image compression and optimization. Unfortunately, WordPress uses some default compression methods when uploading images. This tutorial helps you get around the default WordPress image compression settings.
  
• Social media photographers who want the best in optimization and compression for their portfolio blogs can use this tutorial to find the best image compression plugins available.
  
• Additionally, this article shows some of the best compression and optimization tools that work independently of WordPress, if you don’t want to mess with plugins.
  
• Finally, for more advanced users and developers, this tutorial teaches you to make a plugin that completely removes default WordPress image compression. With this kind of plugin, you’ll have complete control over image optimization in WordPress. 

Other Image Optimization Options for WordPress

Optimizing the size, speed and data associated with an image are the most important parts of using images in a WordPress site of any size. As your site gets larger and your pages more in-depth, then you may consider more advanced optimization options like the following:

• Enable Lazy Loading. Lazy loading is a technique where images lower on the page don’t load until the reader scrolls to them. Normally, a page will attempt to load all images on the page, which slows page load times. Lazy loading helps minimize this impact. A few photo gallery and image optimization plugins offer this functionality.
  
• Use a Content Delivery Network (CDN). We usually think that internet communication happens in milliseconds no matter where we are. The truth is that when a reader accesses your content from a different continent or even just a different country, images and other content can load slower. A CDN will, usually for a fee, host copies of your site on servers strategically located around the globe so that no matter who accesses the page, they get it as quickly as anyone else.
  
• Use a WordPress Caching Plugin. “Caching” is the technique of taking dynamic content from a server and making it static. This helps speed up WordPress sites because it minimizes database requests, which speeds up page loading times.
  
• Create a sitemap. “Sitemaps” are metadata blueprints of your site. They show what pages link to one another, what kind of content they include, and how the structure of the site works. These maps make it that much easier for Google to understand your site and the individual pages.
  
  It also helps optimize image indexing because it tells Google when you add new images and what kind of topics they are associated with.
  
• Social Media Tags. Social media tags help define how an image and its related metadata (alt tags, captions, etc.) show up when shared on different social media networks. Google sees this as a good form of site optimization, and it helps make your content attractive across multiple platforms. 

Conclusion

As you can see, image compression and optimization are important parts of any blog. WordPress users who rely on using images as portfolio pieces or product photos need to focus on optimizing their images so that their WordPress sites load fast.

Readers in the digital age don’t want to wait for content. They’ve shown that you only have seconds to display your content to them, images and all, before they will bounce away. 

Google notices this. They’ve built tools in their algorithm to note when content promotes slow loading times due to unoptimized images. Likewise, they can track when readers bounce from your page. In both cases, it means a lower rank for your content and fewer readers.

Remember to use the right image format for all images, and to strike a compromise between image quality and compression. Use JPEGs for photos, PNGs for logos, and compress files using WordPress tools to minimize load times. 

We’ve covered some of the best tools and plugins to use for file compression and optimization. The Envira Gallery plugin, however, combines the best in photo management tools, gallery building functions, and image optimization options on the market.

If you enjoyed this article, check out our other popular pieces:

If you want to find out more, consider signing up for our email list or following us on our Facebook or Twitter accounts.