How to optimize images for your WordPress website and why it matters

Most people just upload images to their WordPress website without a second thought. But did you know that large image files will slow down your site? Sometimes these large files can even slow down your site a lot.

Whether they’re images you took yourself with your phone or camera or created in Photoshop or another software or they’re images you downloaded from a stock photo site, they need to be optimized for the web, ideally BEFORE you upload them.

In this post, I’ll show you several ways to optimize your images for faster web performance without losing quality.

First, let’s answer a couple of common questions: what is image optimization? And, why is it important?

What is image optimization?

Image optimization is a process of compressing an image into the smallest file size possible without losing quality. And these days, it’s pretty easy to do with a handful of tools and plugins that will automatically compress images by up to 80% without any visible loss of quality.

Why is image optimization important?

The two biggest reasons to ensure your images are optimized are site speed and hosting costs. Images, on average, make up 21% of a webpage’s weight. That’s a lot! And we know that faster websites rank higher in search engines, which means image optimization is something every website must do if they want to rank well.

Additionally, image optimization is important because:

  • Optimized images take up less storage and bandwidth usage
  • Help make your website speed faster
  • Greatly improve SEO rankings
  • And help to reduce the size of backup files

How to save and optimize images for web performance

The key to successful image optimization is to find the balance between lowest file size and image quality.

The factors that play a role in optimizing images are:

  1. file format – jpg, png, gif
  2. compression – higher compression equals smaller file size
  3. dimensions – the height and width of the image

Now, when it comes to image format, jpg is often best for images with lots of colors, png is best for simple images or when you need a transparent (clear) background, and gif is typically for animated images only.

Before we talk about the best tools and plugins to use for compression, let’s talk a bit about image dimensions.

Image dimensions

Photos from your camera or your phone will generally be very high resolution like 300DPI and large file dimensions (height and width). A typical 300DPI image will be around 2000 pixels or more in dimension and are best suited for print or desktop publishing. They are not suitable for web.

Reducing an image’s dimensions will also greatly reduce the file size of the image. You can resize images using an image editing software like Photoshop, Gimp, or Affinity Photo. If you’re on a Mac, you can even use the Preview app.

Optimization tools and programs

As I mentioned above, most image editing software like Photoshop allows you to adjust optimization and compression settings quite easily. There are also several powerful and free tools on the web as well. I recommend using one of these options (image editing software or an online tool) before uploading your images to WordPress. This method will save you a lot of disk space on your hosting account.

Online tools you can use include:

The other option is a WordPress plugin. There are several good ones on the market. Just remember, the best option is to optimize your images before uploading to your WordPress website.

Below are the WP plugins I recommend if you need to go that route:

Final thoughts

If you’re not already ensuring your images are web optimized, you should start doing so immediately. In that case, you can install one of the WP plugins and compress images that have already been uploaded to your site. Then, be sure to compress them before uploading using one of the tools or software mentioned above.

TIP: if you’re using Photoshop, choose the Export > Save for web option.

Optimizing your images will make a huge difference in your site’s speed, not to mention the fact that faster websites are great for SEO, and you’ll likely see an increase in your search engine ranking.

In addition to image optimization, the two things that will significantly help you speed up your site are using a caching plugin and using a CDN. I’ll talk about those in another post in the future so stay tuned!

Hopefully this has helped you understand a bit more about image compression and why it matters. If you need support or further help, fill out the quote form on the Techie Bits page and I’d be happy to help you get things setup and moving in the right direction.

Posted in:
Tagged with:
Photo on 6-23-18 at 1.53 PM

Hi, I'm Annie. . .

"Your instructor for How to Build a Course on WordPress as well as the one behind this website. I'm a graphic designer and web developer with over 25 years experience. I've been working with WordPress since 2005, have spoken at WordCamp Seattle and other local venues, and specialize in building course and membership sites for my clients.

Build Your Course on WordPress

nikiya-christie-l4BrIn6JWBY-unsplash
READY TO SCALE YOUR BIZ?

You've probably heard about course building platforms like Kajabi, Teachable, Thinkific, and others, but did you know you can also build your course on your WordPress website?

Yes, you sure can! There are a host of LMS (Learning Management System) plugins out there. And in this course, I'll share all my tips and tricks with you to find the right one for your needs and then walk you through building your course from beginning to end.

Join the conversation. . .

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the Newsletter & Other Goodies in Your Inbox

"5 Ways to Get Leads & Clients"

You can unsubscribe anytime. Your info is safe with MRDCo.

Something went wrong. Please check your entries and try again.