WordPress Tutorial

How to Optimize Images for WordPress

Optimize images for WordPress

Without images, most websites would look like a massive wall of text. To capture the visitor’s attention, high-quality images are a must-have. They will break up your content and make it more readable. Not to mention the extra traffic from image searches. But to have all those benefits, images need to be optimized properly first.

Most WordPress site owners end up uploading and using images that aren’t optimized for the web, which can cause a lot more harm than good.

Below you’ll learn why optimizing your images is a must, and learn five ways you can optimize images for WordPress.

Why You Need to Optimize Your Images for WordPress

Failing to optimize your images will lead to incredibly slow loading speeds and bandwidth issues. Images can take up a considerable amount of space, and most of it is unnecessary.

Here are some of the main reasons to optimize images:

Your Site Will Load Faster

A slow loading site creates a poor user experience. This leads to higher bounce rates and less time spent on your site overall. You can’t expect your users to stick around and wait for your images to load.

Your Site Will Take Up Less Server Space

Usually, you won’t hit the storage limits of your current web host.

But, having a site that takes up less server space will make it more nimble.

You can reduce the bloat of your website and have a leaner and higher performing website. Plus, you can reduce server costs if you’re paying based upon storage.

Your Search Engine Rankings Will Improve

Google and other search engines hate slow loading websites.

By optimizing your images your performance will improve, and so will your rankings.

With optimized images, Google will crawl and rank your images much faster too, which can be a nice boost in traffic.

Optimizing your images doesn’t have to be difficult or time-consuming, and can become part of your regular posting workflow. Failing to optimize your images can be damaging to the success of your site.

Below you’ll learn how you can optimize your images for WordPress in a way that retains the quality and doesn’t sacrifice performance.

5 Methods for Optimizing Images for WordPress

Your goal with image optimization is to reduce the file size without sacrificing the image quality. There is no perfect way to optimize, but instead, it’s a balance you’ll have to strike.

There are many approaches you can take to optimize your images. You can even combine a couple methods to ensure your image file size is as low as possible.

Keep reading to learn five different methods you can use to easily optimize your images to the web.

1. Choose the Right File Format

Before you even start optimizing make sure you’ve chosen the right file format. The file format you choose will affect its total size, and ability to optimize the image.

The two most common image types are JPEG and PNG.

JPEGs are commonly used for photographs and general images, as they:

  • 
Have a smaller overall file size
  • Provide solid image quality
  • Can be resized, or compressed, without much quality loss

PNGs are used for vectors, logos, screenshots, and smaller images. Since it has a larger file size, you’ll want to use these less often.

Aside from PNG and JPEG, you’ll find dozens of other image types. But, they aren’t recommended when creating images for the web.

But, there is an exception. You’ve probably noticed the explosion of GIFs in recent years. These little-animated videos can be used to enhance your existing content. If you’re planning on inserting a small video, make sure it’s in GIF format, and not MP4.

2. Compress Your Images

When compressing an image you’ll need to find the balance between the compression quality and the size of the image.

With minimal compression, you’ll end up with a larger file size, but a higher quality image. With a high level of compression, the image size will be very small, but the image quality will suffer.

Your goal should be to find a happy medium between the file size and the level of compression you use.

If you run a website that relies on high-quality images, like a photography site, then it’ll take more time to find the balance between the two. But, you’ll be able to use the optimization settings for every image moving forward.

Below we examine desktop-based tools, web-based tools, and even a few WordPress plugins you can use to compress your images without sacrificing quality.

DIY Image Optimization Tools

Desktop-based tools offer you more control over your optimization settings. If you’re used to working in a photo editor like Photoshop, then you might prefer this approach.

Some of the most popular desktop-based tools include:

  • Adobe Photoshop – Photoshop has it’s own built-in image compression tool that optimizes images for the web.
  • Gimp – A free alternative to photoshop that has a steep learning curve, but also has built-in optimization.
  • Affinity Photo – This is a cheaper alternative to Photoshop that has built-in image compression features.
  • Paint.NET – A photo editor for Windows users that’s a solid alternative to Photoshop and includes image compression.

The above tools have a bit of a learning curve, but they allow you to find the image optimization settings that work best for your needs.

Automatic Image Optimization Tools

If you prefer a more simplistic approach, then you can use an online tool that automatically optimizes your photos.

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 JPEGmimi and TinyPNG.

tinypng image optimization

With these all you have to do is upload your photos, the tool will run, and you’ll download your optimized photos.

If you prefer to run a piece of software on your computer, then you’ll have a few more options like ImageOptim, OptiPNG, and Trimage.

WordPress Compression Plugins

Like most things WordPress, there’s a plugin for every problem you come across.

wordpress image compression plugins

The following plugins will optimize your images as you upload, and even optimize any images already in your media library:

  • Imagify Image Optimizer – This plugin offers multiple levels of compression, image resizing, image restore, and much more.
  • ShortPixel Image Optimizer – This free plugin allows you to compress up to 100 images per month and handles multiple different image formats. Plus, it has a built-in restore feature and bulk optimization.
  • WP Smush – This plugin will optimize images as you upload them to your site, along with optimizing your existing media library. It’ll reduce the size of your images without impacting quality.
  • Optimus Image Optimizer – This lightweight plugin optimizes your images with lossless compression, so there’s no loss in overall quality, just a reduction in file size.

3. Resize Images for Optimal Display

Before you begin optimizing your images it can be helpful to size them properly. There’s no point in uploading a massive image to your site, especially when it’s going to be resized anyway.

resize wordpress images

Get your image dimensions correct before you upload. That way you’ll be dealing with a smaller image from the start.

For example, let’s say you need a 300×300 pixel image, but instead, you upload a 3000×3000 pixel image and make your WordPress theme shrink the image to display properly.

This will not only increase your bandwidth, but it’ll make your photo load very slowly.

The best approach is to take note of the image dimensions required by your theme and size your images accordingly. Then, run it through an optimization tool and upload your image.

4. Ensure Images Are Neatly Cropped

WordPress has a built-in image editor that lets you crop your images from your dashboard.

crop wordpress images

Although this can be useful, we recommend cropping your images before you optimize and upload them.

If you realize an image needs to be cropped to better fit your site, then delete the image from your site, crop it, and re-upload it.

By performing too many edits within the dashboard you can end up saving multiple versions of the same file. This increases your server load and the overall size of your site.

5. Improve Image SEO

Did you know that you can optimize your images to help your site and images rank in the search engines?

Optimizing your images will speed up your site and improve your chances of ranking. But, there are a few additional steps you can take to improve your image SEO as well.

Follow the steps below to improve the SEO of your images:

Optimize Your Image Title Text

The image title text will appear when a reader hovers over your image. It’s not super important for SEO, but this little trick can improve your user experience.

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.

Editing image in WordPress

On the ‘Advanced Options’ screen you’ll have a place where you can enter or change your image title.

Image title attribute in WordPress

Set ALT Tag

The alt text of your image will give Google an indicator of what your page is about.

If you have multiple images on your page, then the first image should include your target keyword. Every image that follows should use a variation of that phrase, while still being relevant to the image.

To change your image alt text navigate to your visual editor and hover over an image you’ve inserted. Once again, click on the pencil icon which will bring up the ‘Edit’ option.

Setting Alt Tag in WordPress

On this screen look for a box labeled ‘Alternative Text’, and enter your focus keyword or related keyword into that box.

Use Proper Image Filename

Your image filename can help it rank in Google image search, which can be a nice source of additional traffic.

google image search traffic

Instead of having a nonsensical filename, change it to something that includes your target keyword or reflects what the image is about.

Before you upload the image to WordPress spend time considering what an appropriate name for that image would be.

Finally, if you’re using multiple words in your filename make sure you’re using a hyphen between your words, as Google will read them as a space. Otherwise, the words will run together and your filename won’t be readable.

In Closing

Going through the steps above to optimize your images will make it easier for Google to love your site.

It’ll load faster, your visitors will thank you, and so will your search engine rankings.

When dealing with compression it’s important to play around with settings and different tools until you find the perfect balance of image quality and image file size. It’s a hard balance to strike, but one that’s worthwhile to your loading speeds and browsing experience.

Has optimizing your images improved your website loading speeds and performance? Share your experience in the comments below.

About the author

Kevin Wood

Kevin is a freelance writer who specializes in technology and online content marketing. He loves making complex marketing and technology topics accessible to all readers. When he’s not glued to his screen, you can find him lost in a book, writing poetry, or running through the woods.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Have a website?

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in WordPress Tutorial
WordPress robots.txt
The Complete Guide to WordPress robots.txt

Close