How to Optimize Images with TinyPNG

Prefer reading? Click for transcript.

(Text on screen): WordHer, with Barbara J. Feldman, http://www.WordHer.com

Barbara J. Feldman: Hi. Barbara Feldman of WordHer.com, and today I’m going to demonstrate how to compress and optimize your images in your media library using the free WordPress plugin by TinyPNG called Compress JPG & PNG Images.

When you go the repository and look for this plugin, make sure that the developer is TinyPNG. There is another plugin using the TinyPNG name, but this is the official one.

Now I’m in my WordPress control panel and as you can see, I have already installed and activated the plugin.

First, we’re gonna go to Settings and talk a little bit about what the options are here.

In order to use it, you will need to register an account, and that’s easy to do. You just put in your name and email address and you click Register and it takes you over to TinyPNG.

And once you have an account, you will get an API key. It’s a long number and then you will have to put it here into every site that you use the plugin for.

Now, the plugin is free up to 500 images compressions a month. That’s a great deal. Are you compressing more than 500 images a month? We’ll talk about what counts as a compression a little bit later in the demo. But if you do use more than 500 a month, the price is less than a penny an image.

So, it’s great deal. If you have a huge project and you compressing all at one time, existing images in an existing site, you can calculate what the cost would be by inputting how many images you want to compress and it comes up; here’s a price calculator and you can find this at TinyPNG.com.

So, I’m gonna input my API key here. So now my account is connected. It will tell you how many compressions you’ve made so far this month.

Now we need to set the settings for the plugin for which images it’s going to compress.

What you will see under this section of the settings, which is under Media, by the way: Settings, Media.

I have more than four image sizes here because I have some images that are defined by my theme and maybe even by a plugin that I’m using.

So, if you don’t know which sizes are being used, you can have TinyPNG compress all of them.

Because I’m developing my own sites, I know, on a site-by-site basis, which image sizes I’m using.

I might not, for example, ever use Home-medium, Home-top, I might not ever use Medium, and I might not ever use Thumbnail.

So, you may select them all or choose those that you know are going to be used.

Original Image means that the compression is going to overwrite your; the image that’s uploaded. The original image. You may or may not want this.

If you’re gonna use the original size on your site, you do want to compress it.

Further on, we have some choices here about what happens when we compress the original image.

One of the ways that optimization compression services work is that they remove the metadata that is included in your original image. These might be: copyright, GPS, date and time.

This gives you the option to, if you want to preserve, in the original image, this metadata.

I’m not a photo site, so I really don’t care about preserving this information.

You also can resize the original image.

OK. Now’s the time to talk about what counts as one of your 500 monthly compressions.

Each one of the checked boxes here is gonna count as a compression. And if you want to resize your original, that’s an additional.

So, here I have one, two, three, four. So, every image that I have selected to compress will count as four compressions.

So, that helps you calculate if 500 a month is enough for you. In this case, you know, you’d get 120-ish images to be compressed a month if this was the only site you were using your API key for.

OK, let’s go to our media library and see what’s new here.

The plugin has added another column and it tells us how many sizes are to be compressed.

Oops! You know why it says eight and not four is I didn’t hit Save. Let’s go back; Save Changes.

OK. So now I have saved both my API key can I’ve selected the four sizes.

Just to be sure, I’m hitting Save again.

Do you ever do that? You know it’s saved and you hit Save again. It’s the way we are.

OK. Now let’s go to our media library and now it’s showing me correctly there are four sizes that are going to be compressed and I can hit the Details and it’s gonna tell me exactly.

“Not compressed” means that the size has been selected but it’s not been compressed yet.

And then those sizes that are not configured to be compressed are also shown.

Let me show you what all these sizes look like when you look at your file structure.

You might not be aware that WordPress, every time you upload an image, is making all these different sizes. It’s making all these different copies of your original image.

I’m going to switch to; this is an FTP client and it is showing you what my wp_content uploads folder looks like for a particular year and month.

And here we have kindergartenreadiness.jpg. So, this is the original file that was uploaded.

And all these with dimensions, dash, width/height, these are images created by WordPress the moment you upload it.

So, that little delay when you upload an image, this is what’s going on behind the scenes.

So, this one is 768 by 329. That’s in pixels. And so on.

OK. Going back to our WordPress control panel. OK.

So, that was the Detail buttons.

Now, you can compress your images here one at a time. This gets useful if maybe you’ve compressed almost everything but there’s still one or two that haven’t been compressed or if you’re trying to manage your 500 compressions a month.

OK, we got a savings of 57 percent. That’s extraordinary. That is a huge savings in terms of speed that these images are now going to pop up in a browser for your users.

There’s also “bulk.” This is going to allow you to say “go add it” and the plugin will compress all the images in your media library.

Before you hit Start, it’s gonna tell you how many images there are, multiply it by the number of images; the number of sizes per image, so it gives you 121.

So, it’s telling you the cost is gonna be zero. And to start the optimization, you just click the blue button.

You’re going to see it as it goes through them one at a time, when it’s compressing, when it’s done, and so on and so forth.

In addition to the two manual ways I have shown you to get your images, compressed, now that you’ve activated the TinyPNG plugin, each new image that you upload to your media library will be automatically optimized.

And with that I’m gonna end this video. I hope you found it helpful.

(Text on screen): Was this helpful? Visit WordHer.com and sign up for my occasional email newsletter. It’s free and you’ll be the first to learn of new tips and how-tos.