What You Must Know About Optimizing Images For A WordPress Website

Images can be a huge burden on how fast a website loads. They’re typically the largest item on a typical website. Video would be the largest, but it’s not as common and likely wouldn’t be on every page.

Because images are so prevalent, they’re the biggest culprit for making web pages slow. That’s exactly why you need to optimize images and be the most careful with them. If you aren’t, your website will load extremely slow and get horrible speed score with Google. That means you won’t rank as well in search engines AND website visitor’s experience will be horrible.

Here’s a typical website load. Notice anything about what makes up the largest items on this website?

That’s a lot of images to load!

Images take up a ton of the load time on your website. So, if you can optimize them properly, they can also cut down the load time of your website the most.

This screenshot isn’t of our website. At least not our home page or any landing page. If your total page is over 1 MB then that’s not good let alone 2.3 MB just for images.

Why We’re Image Optimizing Experts

We build websites all the time. A lot of websites. And we know how to build websites that load fast in every way. While not all our websites are perfect from an optimization standpoint, we constantly work to find that perfect balance.

It’s possible to over-optimize to the point your page doesn’t even perform its goal. On that same note, you can under-optimize and the goal you’re trying to achieve doesn’t happen because your page loads too darn slow.

How do we know it’s possible to over optimize? Just look at AMP. It’s a complete joke because it strips so much out of web pages you might as well not even have a web page.

Our goal with every page, no matter what needs to go on it, is to keep the size of it under 1 MB and loading in less than a second. For the most part we’re extremely successful. By using this strategy for optimizing images on our WordPress websites, we keep the size of pages down and loading fast for visitors.

So, how do you optimize the images on your WordPress website?

How To Optimize Images For A WordPress Website

There are several things you can do to ensure images are properly optimized for your WordPress website. We’re programmed to do most of these things but we took a step back and broke it down into what you need to know to do the same.

We’re attempting to break it all down into what you need to know in order to have the best images on your website that load fast. It’s not as simple as just taking whatever image you’d like and compressing the crap out of it. That might be one small step, but it isn’t the only thing you need to know.

Before you start going too deep into optimizing your WordPress images, start with questioning if you even need an image first.

Do You Need An Image?

Before you start going gung ho optimizing every image on your website or uploading a bunch of newly optimized images, step back a minute. The most important question you can ask before doing anything with images is if you really need the image.

There’s no better way to optimize a page and make it load fast than to have less content on the page. So, before you bother doing anything with the image, as yourself if it’s essential to the page. If an image is eye-candy only then you’re better off never uploading the image and just deleting it.

This is the most important first step to optimzing image for your WordPress website and all websites for that matter. The fewer images you can put on your website, the faster it will load, the better experience your users will have, and you’ll rank even higher in search engines.

For every image you can exclude from your website without negatively affecting visitor’s experience, the faster your website will load.

If you’ve determined an image is essential and must go on your page then you should first be able to choose the best image format.

If you know about images and what your options are, then you can make better decisions about optimizing images for your WordPress website. Understanding the different image formats you have at your disposal and which ones are best for what jobs is a good start if you definitely need an image.

Choose The Best Image Format

First, make sure you’re using the best image format for the job you’re doing. There are many image formats that are great for the web. You can go with JPG, PNG, SVG, and now WebP. There are always new formats coming out and being tested, but these are the most widely supported image types at the moment.

These formats are not all the same and are good for different things. You can’t choose your favorite format and stick with it. It’s important to know about them all, so you can choose the best format for the job.

If you don’t know which ones are best for each job, test!

Sometimes we have to test between JPG and PNG because their uses are relatively close and sometimes there is overlap in what each of them is good for. For example, screenshots are sometimes a smaller size in PNG format but other times they’re smaller in JPG format.

Here are the image formats you’ll have to chose from for your website and what each one is best for. Keep in mind there is overlap sometimes, so you may need to test.

JPG (pronounced j peg)

This is the most used format on the internet and is best for photos and complex imagery. It doesn’t support transparency, and it is lossy, which means some elements of the image are removed in order to save space. Hopefully, those elements aren’t useful, but sometimes they can lead to image degradation that may be unacceptable to you. Typically, the degradation is minimal, though, and our imperfect human eyes can’t even detect it. Use the JPG format for photos and complex imagery.

PNG (pronounced ping)

Similar to JPG, the PNG image format is good for complex images and graphics that require the use of transparency. Think of a person who you want to float over a background that moves on a website. Use them sparingly, though! PNG images are lossless, which means they are typically HUGE. You can easily end up with a PNG file that’s 500 KB or even 1 MB itself! Most photos are going to be better in JPG rather than PNG, but some screenshots are better in PNG. I end up playing with them both to see which image is smaller. This is why I say test if you’re not 100% sure what the best quality vs size will be. Sometimes you have to figure out the acceptable balance for your specific websites.

SVG

This is my favorite format for the web. It’s a vector format, which means you can’t use it for photography, but it’s good for simple illustrations and line art. The file size of an SVG is a lot smaller than JPG and PNG files unless you try to make a complex illustration into an SVG, those can be surprisingly huge.

WebP

This is a new format that is slowly replacing JPG. It’s more compressed than a JPG, which means smaller sizes, but at the same time, it’s not as supported in older browsers. Modern browsers all support WebP, but you have to be careful because it wasn’t that long ago some browsers didn’t support it. That means you could easily have some website visitors who can’t even see your images. There are great tools out there that will create a WebP for you out of your JPG file and then serve the WebP when it knows your users’ browser can support it. We’ll get to that in a bit. Typically, you won’t create a WebP image, it will just act as a JPG or PNG fallback for unsupported browsers.

Those are the most common image formats you’re going to find on the web, though there are a few more, such as GIF. This is pronounced with a hard G and I don’t care how the founder says it’s pronounced. I don’t pronounce graphic by saying jraphic therefore it’s a hard G. If the founder didn’t want it pronounced with a hard G then he shouldn’t have made it graphical interchange format.

You aren’t likely to find much use or need for a GIF. Although, you may just find yourself in love with the GIF format which you’ll see a lot on social media and some listicles.

GIFs are usually (but not always) animated. Like this…

Now that you know the common image formats and what they’re good for, it’s time to think about size. You can’t just upload whatever you want into WordPress and expect the best. WordPress only does so much for you and so do compression plugins.

Plugins are not foolproof and if you think they are, you’re in for a bad surprise. So, once you choose the right format, next up is to pick the right size and then resize the image.

Choosing The Right Size And Resizing Images

With the right image type in mind, you then need to make your image the right size. This mostly applies to JPG, PNG, and WebP because most of the other formats don’t require you to change the size. SVGs don’t require resizing at all because they can be stretched from 100px by 100px all the way to 10,000px by 10,000 and they won’t lose quality and they won’t be any larger.

SVG images always take up the same space on the server no matter how big you make it on the page. Good stuff!

The right size for your image determines how big it needs to be on your site. If your pages are only 1280 pixels wide at their biggest, then there’s no need to provide an image that is 1920 pixels wide. You’re wasting storage and bandwidth that way. So, size your images appropriately for how big they need to be on the page.

If your image only spans half the viewport then you don’t need to make it huge. Save space by modifying the image size to something like 768px wide instead. If you take an image off your phone and post it directly to your website then you’re going to kill your visitors with slowness and tank your page rank.

Phone and digital camera images are huge, something like 4032px wide. No image on a website should ever be that big. Sure you could have one visitor who has a monitor that’s 4000 pixels wide but to make everyone else suffer through that image load because of one person is unreasonable.

I typically stick with images that are contained within no larger than a 1280px X 1280px box. So, if the image is 1920px tall and 600px wide, I will resize it to 1280px tall and the correct proportion for its width.

What WordPress Does To Help With The Right Size

Sometimes you may need a full size image or a smaller size of the same image in another place. WordPress doesn’t leave you out in the cold when this is the case. For every image you upload to the WordPress media library, WordPress creates three versions.

In your WordPress dashboard, go to Settings > Media and you can see how WordPress will resize your image to different sizes. The defaults are 1024×1024 (large), 300×300 (medium), and 150×150 (thumbnail).

The large and medium sizes will create the same proportion image as the original with the longest side of your image being used for the resize. So, an image that’s 2000 pixels by 800 pixels won’t resize to 1024×1024 but rather 1024×410.

That’s not true for the thumbnail size, though (unless you change the settings which I don’t recommend). WordPress will take a square block right out of your image no matter what the dimensions of your image are.

This is a good start but don’t rely on it to do any of the heavy lifting. There are plugins that will do a bit more but as always, don’t rely on a plugin to do it all for you. You know a bit more about what WordPress does but there’s still more you should know before you even upload to WordPress.

The Best Required Image Quality

This applies exclusively to JPG images. You can mess with the quality of a JPG a lot in order to get it to a good optimized size. This is where the lossy qualities come in for JPG images. They can retain their full quality (100%) or you can lower that percentage of quality down all the way to 0% (ugh don’t do that!).

It’s fairly common to see JPG images with a quality of 80% or so on the internet, though sometimes you may need to drop it down to 60% to manage the size properly. A good tool will make it easy to mess with the quality setting of your JPG before saving it.

We use Photoshop for resizing images and getting the right quality. That way, we can get the right dimension for our image by cropping out unnecessary content, and also mess with the quality to get a small size.

In Photoshop, it’s as simple as using the Export As tool by going to File > Export > Export As… and then messing with the settings a bit. Here’s what we would end up doing for an image before uploading it to a website.

In step 1 labeled above, we change the format to JPG, but you can also choose PNG and GIF, which would both generate image sizes that are way too big for the internet. You can also choose the quality which is what we end up messing with quite a bit. We settled on Fair in the end but don’t try to mess with the quality until you have the image dimensions correct.

Label 2 is where we set the dimensions or size. At the widest we don’t like to go over 1280 pixels but if an image is tall then 1280 pixels wide would even be too big. An image that is 1280px by 1280px would be way to big.

Once you set the dimensions correct, then go back to step one and mess with the quality until you have a satisfactory size displayed in label 3. This one isn’t ideal for us, but it’s acceptable. Ideally every image on your website will be under 100 KB, but that’s not always realistic. Sometimes we have to go over 100 KB such as in this instance so we don’t lose too much quality.

If you do have a 100 KB image on your page then you shouldn’t have more than two or three of them. Ideally, one should be your limit or the page will get much too big. Like I mentioned in the beginning, no page should be bigger than 1 MB, but 500 KB is more ideal. That means everything on the page including anything in your page header and footer so don’t just think about the images on the actual page. There’s more to a page than that.

After you save an image that’s well-optimized there’s even more you can do. We have multiple layers of optimization to make sure we’re getting the best sized images in WordPress possible. Here’s how we go even further with a WordPress plugin.

Optimizing WordPress Images With A Plugin

There are easy ways to optimize your images on WordPress. While they are easy, it’s not always best to rely on an automated process that can’t make human decisions that are important with things like image quality. A plugin will indiscriminately optimize every image no matter how bad the quality of the image appears.

While these image optimization plugins shouldn’t be relied upon to do everything, they can be relied upon for a few things. This is what we rely almost solely on plugins to achieve for the websites we build.

• Apply compression to additional image types such as thumbnails and user added images.
• Resize larger images if we forget to for whatever reason to resize an image to less than 1280 pixels.
• Generate a WebP version of every PNG and JPG image and replace images on the website with the WebP version when supported.
• Optimize any other documents that can be optimized, such as PDFs.

We use the ShortPixel plugin to optimize our images automatically. We do perform a lot of optimization on images before we even upload them to WordPress, though. It’s essential to make sure your images don’t end up unruly large and the automated WebP creation and formatting is extremely helpful.

Final Image Optimization Considerations

We’ve been working with not only images but images for the internet for decades. That means we’ve picked up a lot of knowledge along the way. You can’t be expected to understand all the intricate details right away but will pick it up over time. This blog post about optimizing images for WordPress websites is a great start, though.

If you’re overwhelmed by all of these then we always recommend you work with a good website designer who knows all the intricacies of image optimization. Why? Because image optimization is just a small part of good website design. So, this is just a start of what you need to know to create a good website. Even if you spent 80 hours taking a course about website design, you would only pick up a fraction of the important details that you can only learn with years of website design practice.

So, don’t beat yourself up. Just realize that like all jobs and all industries, things may appear simple and others try to make it seem simple, but it’s not. You can go and get a legal contract on a legal website, but that doesn’t make it easy to implement. It takes a professional who knows all the details and has had years of practice.

Optimizing images on any website is essential to the speed of the website. Optimizing images for a website (WordPress or not) is essential because images make up a large part of the size of a page. That and the fact that speed is a top ranking factor for search engines, make it essential for images to load as fast as possible and take up as little of the page size as possible.

We specialize in building WordPress websites that help local small businesses rank in local search terms. We’d love to work with you to create an amazing website that loads fast and is well optimized for local searches.