Optimizing Images for WordPress like a Pro for Free

This entry is part 1 of 3 in the series Optimizing WordPress

If there is one issue that virtually all of my clients ask me about within their first 30 days of getting to know WordPress, it’s how to work with images. For all the amazing bells and whistles WordPress provides users, images still continue to be a bit of a sticking point for folks. Typically, all of the questions revolve more around cropping images, uploading them from a camera, doing basic coloring or sharpening or a multitude of other issues that actually happen BEFORE even logging into your site. Modern digital cameras provide you with images roughly 20 times bigger than anything you’ll ever need on your website (unless you are optimizing for “retina ready” displays — that will have to be for a future post).

There is some basic things you need to do to get your images ready to use on your website. Here I’m going to lead you through the easiest way to work with images for your website. We’ll even cover some things that a lot of web developers ignore that will actually help make your site load more quickly.

What’s the Problem, though?

This is the part where I say things you won’t totally get yet in order to show that this is more complex than anyone would like it to be. But if you hang in there, you’ll get it by the end.

First off, the reason optimizing images is important is because you love your visitors. Large images that load slowly just upset everyone. Reducing your image size can cut your page size and load time in half, which makes your page load time much quicker and everyone much happier right away.

The reason images are a bit of a sticking point with websites is that it really is another skill-set outside of WordPress that you need to learn a little about in order to do it well on your site. WordPress is not the limiter, or the problem when it comes to images; it’s the nature of screens and cameras, file formats and DPI which make images tricky for the web.

What you need to know right out of the gate is that cameras are designed for print, which requires a much higher resolution than your screen does. This means if you just placed an image straight from your camera onto your webpage, that image would exceed the width of the whole screen by at least 2 times. Even if you only changed the DPI of the image down to 72 (the resolution of your common desktop screen) it would still be too large for your 800 pixel wide content area.

Even then, if you want any kind of transparency in your image, then you need to learn about alpha transparency and 24-bit pngs. And let’s not forget that even a small 800px wide JPG can be up to a 1 or 2MB file if not properly optimized. Not just “optmized” but losslessly optimized, and stripped of it’s EXIF data.

So, between new file formats, you need to learn a bit about DPI (dots per inch), pixels (the standard measuring unit used in browsers), and how to reduce your image to work within those constraints. In our to do that, you need the right tools.

The Right Tools

Do I REALLY have to buy Photoshop!?

No you don’t. Photoshop is amazing, and it not really intended for simple image edits. Photoshop is what I use, like any decent web designer/developer. But, if you want to get into more advanced photo editing, Photoshop has now released an older version (CS2) to download for free. It’s chock-full of amazing Photoshop features, just not some of the newer advanced stuff. So feel free to do that here.

UPDATE: Thanks to Jill Levenhagen in a Facebook group I admin for, I learned that Photoshop CS2 isn’t technically free. You can download it if you already purchased it or Acrobat 7 in the past. This doesn’t stop anyone with an Adobe account from actually downloading and using it, but technically, it’s not free.

Get IrfanView

Photoshop is a BEAST of a program. It takes a while to load, it’s got a serious learning curve and it’s hard to get it to do some rather intuitive things. Instead, my tool of choice for simple image optimization is IrfanView. It’s a horrible name for an amazing tool.

IrfanView is a super lightweight, but feature rich little image editor that I think every website owner should have. It’s 100% free, and has a ton of really useful extensions that make it just perfect for what you want to do for your website. Below, I’ll show you how to install it and use it for your website.

DISCLAIMER: IrfanView is only for Windows machines. Macs have all kinds of great free image editing tools as well. Read below for the methods I use to optimize images with IrfanView and I’m certain you’ll be able to do the same with your Mac-specific tool of choice. If you want to try installing it on a Mac, try this guy’s tutorial: http://drarunlal.blogspot.com/2013/01/how-to-install-irfan-view-and-plugins.html

Other Helpful Freeware Items

  • GIMP — is an open source, freeware tool comparable to Photoshop. I find it much less user friendly, and since Photoshop CS2 is free now I don’t really find a real use for GIMP any longer, but many people swear by it. Feel free to try it out as an alternative to Photoshop.

  • Picasa — this is my photo organization tool of choice. It also happens to have some really stellar photo editing tools as well. I don’t think it’s best suited for optimizing your images for the web, but I thought it is worth a mention here as well.

  • Greenshot — If you need to do screen captures for your website (like the ones you’ll see below), then the best out there right now is Greenshot. I use it virtually every day. I heart it.

This tutorial will focus on image optimization using IrfanView. Photoshop has a totally different process; but both work really well and get us to the last stage no problem.

Downloading and Installing IrfanView

No one wants to read this if they don’t have to. Here’s all you need:

  • Download IrfanView here

  • Download the iv_formats plugins from here. After the zip file is downloaded, you’ll have to unzip it and move it into your IrfanView plugins folder (On Windows 7/8 it’s “C:\Program FilesIrfanViewPlugins”).

Now you have IrfanView installed with a good amount of image editing and optimizing tools that you need for the next part.

Optimizing Images for WordPress

OK, now we’ve got the right tools, and you have a basic idea why we need to optimize our images. This section will cover:

  • Resampling Your Image for the Web

  • Using the “Save for the Web” plugin

  • Using the WordPress Media Gallery

Resampling Your Image for the Web

Most desktop screens render an image on a webpage only at 72 dots per inch. There’s no amount of resampling or resizing you can do to change the appearance of your image with the DPI of the image. All that matters in the end is how many pixels wide and tall it is.

Plenty of folks talk about images needing to be 72 DPI. But this can be easily disputed right within IrfanView. Open an image, and at the bottom you’ll see the actual size of the image file. Then go to “Image > Resize/Resample” (or hit Ctrl + R) and reduce the DPI to 72 and you’ll notice two things: (1) The actual size of the image on the screen doesn’t change even one pixel; and (2) The size of the file remains exactly the same. Here’s my original file, it’s 1.63MB large, and you can see here that at 180 and 72 DPI respectively, the file size does not change at all.

Instead, we want to resample the image down to 400 pixels wide. The biggest things to pay attention to are making sure you have “Preserve aspect ratio” checked so the width/height ratio stays the same, and that “Size method” is set to Resample. I tend to also check the “Apply sharpen after Resample”, I feel like it gives the image just a little more detail that it might have lost in the downsize. Here’s my resulting image, already down from 1.63MB to 128KB. We’ve already reduced the image by 93%.

This is the point at which folks who don’t know better upload and place their image into their page or post because it’s 400 pixels wide. That’s good enough, right? Nope. As Chris Lema says: “It’s not done, done!” You know better now, right!?

We snobby privileged web developers tend to scoff at a site when we notice an image file size is larger than our perceived limit. You’ll hear someone say, “And then I checked his image sizes and they were ALL 100kb or more! Can you believe it!?”

The general rule of thumb for images in your posts or pages is 50KB. This ensures that the image will load almost immediately when your page gets hit. This is especially important if you are using the image in an slideshow or carousel. The only thing visitors hate more than slow loading images, are spinning loading wheels in carousels! (I hope you hear the subtle grin in my “voice” here).

So how are we going to get this image that’s already been reduced by 93% down ANOTHER 60%? We’re going to save it with the “Save for web” Plugin.

Using the “Save for the Web” Plugin

Photoshop has an almost identical plugin, but side-by-side this one loads and saves MUCH faster (at least on all the machines I’ve tried it on).

Go to “File > Save for the web (Plugin)”. If you don’t see that option, then you didn’t install the plugin correctly. This will open a new screen that puts the original image next to an optimized version. Here you can experiment with the quality of your image either as a JPG, GIF, or PNG.

What you want to try to do is get the best quality with the smallest file size. For this type of image a JPG is going to make the happen better than a PNG or a GIF (I won’t go into why here, trust me for now, or read up on it in the links I provided below).

What I also like more about the IrfanView plugin versus the Photoshop one is the quality slider that lets you slide from 1 to 100% for your JPEG quality. Putting it all the way to 1% you can see that the image is just a bunch of color blocks, not at all the desired effect.

What I prefer to do though, is to click the “Compress to size” button and set it to 50kb. This automatically selects the highest quality setting you can use without going over 50kb file size. In this case I can go all the way to 96% before hitting the magic 50kb. Once I know that, I zoom in (hold CTRL and zoom on your mouse wheel, or use the +/- keys) to an area that I think I can make a good comparison with. Then I take the quality slider down until I feel the quality is just as low as I can handle it without it being noticeably bad.

Here’s my final result, a teensy 16.2kb.

reeds-optimized-2

And here’s the original, after I resized and didn’t optimize. A whopping 128kb.

reeds-resized-not-optimized-2

If you compare the two you can see differences, for sure. But generally, you only post the optimized one and the less details is barely noticeable, and only to those really paying close attention. That means after resampling, I’ve reduced this image by 88% of it’s original size, saving 112kb. Multiply that by how many images you currently have and you’ll see that this will add up to A LOT less space being used on your server, A LOT smaller total page sizes, and A LOT quicker load times making your visitors much happier.

Using the WordPress Media Gallery

Lastly, we need to actually upload the image and insert it in the page or post in a way that makes the best use of the size of the image.

What you need to know right away is that every image you upload into WordPress is most often automatically made into 3 additional sizes of images. WordPress calls these sizes: Original, Large, Medium, and Thumbnail. This is a really useful tool in WordPress because occasionally you want to use the same image in different places in different sizes. If you just place the original image and then choose to “shrink” the size manually you have not done anyone any favors. The browser still has to download the entire original image and then manually show the image smaller on the screen. It’s much more work for the browser and keeps your file size high.

Two plugins I want to recommend immediately that will help your image optimization and page speed a lot are (1) Jetpack’s Photon module; and (2) the Smush.It plugin.

Smush.It is a plugin which automatically strips all kinds of extra information out of your image file to make it even smaller and quicker to load. I recommend it for almost everyone. Here’s the exception: photographers or graphic designers. One thing Smush.It does is delete all of the EXIF data from the image. This is data that your camera stores in the image. It’s also where copyright info can be places as well — something that is invaluable for photographers and graphic designers who are showcasing their work online.

So, remember that WordPress makes 3 additional images when you upload your one image. Because of all the optimization we already did, SmushIt can not further optimize the 400×300 pixel image. But there are still the three other images that WordPress created now, and we didn’t have a chance to optimize them. What’s great is that SmushIt can optimize multiple images at a time. Here’s the report that SmushIt reported for the images I’ve used in this post.

Secondly, I recommend using Photon for anyone who is using shared hosting or expects to use a lot of images on their site. Photon is a CDN (content distribution network) provided by WordPress.com. Basically, after you upload your image, a copy of it is stored on WordPress’s servers, which are all over the world. This means that someone in New York is going to have your images served to them from the WordPress server in New York, rather than wherever your host is. Same for San Diego, Sarasota, Austin, Texas, or Europe. They also do some automatic optimizations to the image as well. All of this is free and makes for quicker load times, smaller page sizes, happier visitors.

Other Image Optimization Resources

If you made it this far, you’re dedicated! Wow, you really want to have optimized images on your site — good for you! Let me just say that there’s even more advanced stuff we can talk about. I’ll do another write up on this in the future, but for now, just know that it’ll cover responsive images on your site, and retina ready images. To whet your palate, give these two plugins a spin.

http://wordpress.org/plugins/pb-responsive-images/

http://wordpress.org/plugins/wp-retina-2x/faq/

Also, if you want to read up on the differences between JPG, PNG, and GIF, this is a really good resource: http://luci.criosweb.ro/riot/basic-understanding-of-web-formats/ (fun weekend reading, for sure!). Another good read is to look into Google’s suggestions for improving your site speed by optimizing your images. Why does Google care? Well, your page speed factors into how high your search engine ranking is. Yet another good reason to make this a priority. Here’s the link: https://developers.google.com/speed/docs/best-practices/payload#CompressImages

Series NavigationMaking the WordPress Media Library Your Friend >>

You may also like...

31 Responses

  1. Matt,

    Great article and very in depth look at resizing and optimizing for the web! I may have to start pointing some of my clients here!

    I can add another great image editor for Mac – Acorn, despite thr strange software company name:
    http://www.flyingmeat.com/acorn/

    I love that you mention a step to sharpen the image. This is the biggest trick to make images pop online, especially as they get resized smaller.

    As a general rule, I always save as JPEG at 70% quality. You can easily go to 70% without losing any visual quality and you cut the image size about in half. Depending on the image you can sometimes go as low as 60% with no visual loss but that is up to your eye to judge. So I just keep it simple and stick with 70%.

    • Matt says:

      Thanks Marty! Truly, Mac users have all the cool toys, but really!? “Flying Meat”?

      For me it depends on how much smaller the image gets and how much bitmapping I can handle. In IrfanView I love zooming in and out to compare the two. But yes, I always end up somewhere between 60 and 70%. Thanks for commenting, send as many of your awesome photographer clients this way as you like!

  2. Michelle says:

    Excellent article, Matt! Thank you! I am doing most of what your recommend already, but it is always good to have an expert corroborate my methods. I have an image heavy website, so I will have to make sure that I get my images as small as they can possibly be, something I have not kept up with. I use a PC and mostly use Photoshop, although I will check out Irfanview and see if it makes my life easier. Thanks again, and I’d love to see an article about best practices for image SEO.

    • Matt says:

      Hi Michelle, glad you liked it. Photoshop gets the job done with the Save for Web function. IrfanView just loads and saves a lot quicker.

      Hmmm… an image SEO post. I’ll mull it over for sure. Thanks!

  3. CorradoMatt says:

    Just when I thought I knew everything about image optimization, along comes your article and I’m humbled once again! Great job!

    I’ve always been a Photoshop user and one thing I recently learned is that “Save for Web” doesn’t do the best job for PNG files (at least not as good as Fireworks). I now use pnggauntlet on all my PNG files to optimize them, but there are many others available too…what’s cool about pnggauntlet is that you can drag an entire folder of png files to it and batch optimize them!

  4. Ansel Taft says:

    I’m surprised you didn’t mention Photoshop Elements. It’s Adobe’s consumer-grade answer to Photoshop’s complexity. It’s not bad, and only $100. Still, InfranView is also in my cache… mainly because it loads so darn quickly.

    A technical point I’d like to mention: DPI is only used to describe output to a printer. Any time we’re talking about the screen, i.e. websites, it’s PPI… or Pixels Per Inch.

    • Matt says:

      I didn’t intend to review software in general, but since PS is so prolific I felt I had to at least address it. There’s tons of incredible tools available, IrfanView is just one of them, and the one I recommend for folks who just need basic photo editing for their website.

      I also didn’t want to get into PPI since it’s totally irrelevant for editing the photo. It was already a long enough article, as it is, ya know!?

  5. I use EWWW Image Optimizer to compress my images when I upload them without optimizing them beforehand. I’d be interested to know how the results compare to your method here.

    • Matt says:

      Hi Dave! That’s a great question, great material for a follow-up post. Besides SmushIt, and EWWW others have also pointed out Hammy and Imsanity to me. Might be worth some side-by-side comparisons.

    • Lucy Beer says:

      Just the other day I compared Smush It and EWWW. The amount of compression (ie. reduction in file size) were exactly the same, but EWWW seemed to run WAY faster.

      • Matt says:

        Hi Lucy! Hope to see you at WCLAX this weekend! Do you have a link to your article? I’m working on a image optimization tool comparison post and would love to reference anything from your site. Let me know.

        • Lucy Beer says:

          Yes – definitely see you at WordCamp, woo hoo!!! I haven’t written anything up about those plugins yet, but thanks for asking! I was just playing around with them on a test site. Look forward to seeing your next post!

  6. Dave Bell says:

    Great article! really helps clarify that the only really hard thing about WordPress has absolutely NOTHING to do with WordPress itself. I need to clarify to clients that we will need to learn this skill and that I am going to charge for teaching it. But I will make sure they do not blame WordPress! WordPress rules all!

    • Matt says:

      Thanks Dave, yes, that’s the rub. They’d have to do this work regardless of WordPress, but they wouldn’t get the benefit of having the images automatically resized for different purposes, then with plugins having those resized images automatically optimized.

      • Dave Bell says:

        Precisely. The fact that I will now make a clear distinction between WordPress and photo optimizing will be a big help to both me and clients. I mean I knew this, but forgot to be clear about it with clients.

        I have downloaded Photoshop CS2 to see if I like it. I have Photo Elements and that has been fine for me.

        I am going to be featuring this page in my next Blog post. People really need to start “getting it”.

  7. Cesar Falcao says:

    I use Pixelmator and ImageOptim, both for OSX. Great tools.

  8. Max says:

    http://compresspng.com provides the best compression ratio

  9. nancy david says:

    Handige website zeg. Dank voor het typen van dit artikel. Hier kan ik zeker mijn voordeel mee doen!

  10. Martina says:

    Sunny greetings from Diani beach! Thank you for this, but I still don’t get it what is the recommended size of a image :-(

    • Hi Martina,
      Basically the smallest you can get it without noticeably losing image quality. As I mentioned above, web gurus used to recommend only having images of 50kb or less. Nowaday, you have two issues pulling you in opposite directions (1) broadband speed is WAY more capable of handling much larger images than 50kb; (2) mobile phone connections will freeze up if your images are too large.

      So, some folks resort to serving up different images for different screen sizes (a very tedious and advanced technique), or do what I tried to explain in this article, make them as small as possible without noticeably loosing image quality. That’s really the medium I shoot for.

      Thanks for stopping by!

  11. Hamish says:

    What I’ve found most frustrating is WordPress’ default JPEG compression level of 90. I optimise the heck out of a file, upload it, wordpress compresses all the images it’s creates, and they come out bigger! I’ve uploaded slider images at 130k and WordPress has created the size I use for sliders at 400k.

    What’s the point of the perfectly optimised original when the created images in WP aren’t perfectly optimised?

    • mathetos says:

      A couple things make me curious about that: (1) WordPress can’t actually increase the filesize of your images. Even if it made the dimensions larger, the image would be really pixelated and the filesize would not increase, at least not by much. (2) Yes, it compresses the image, but that is relative to the size of the file uploaded, it can’t compress relative to a file it’s never seen. Also, if you like, it’s relatively easy to disable compression completely, see Paulund’s article here: http://www.paulund.co.uk/stop-wordpress-compressing-jpeg-images

      I suspect something else is going on that you haven’t uncovered quite yet.

      • Hamish says:

        I know it shouldn’t, but look through your uploads folder. Sometimes the “large” size is smaller than the original, but often it’s larger. I would love it if it was just me.

        • mathetos says:

          Sorry, I think I misunderstood you. This only happens when you upload an image which is smaller than the large size and WordPress does have to enlarge it or hard crop it. That is specifically the purpose of a plugin like Smush.It or EWWW, they optimize the images that WordPress generates after you upload.

          Even if you use a third-party service like kraken.io or Jetpack’s Photon they aren’t going to touch those images because they are not viewable on an actual webpage. But what that means is that your only real benefit of optimizing the images WordPress generates after uploading is using less space on the server. You’re never going to actually see those images and they’re never going to affect your pageload speed.

          The images that are optimized are the ones that appear on the page and reduce your pagespeed. If you are manually optimizing an image that is 250px wide, but your large size is 750px wide, that larger image is not going to be optimized — but you’re also not planning on using it. If you wanted to, then you’d optimize the image manually at 750px wide, then all the smaller images would be optimized according to that.

          The point of optimization is decreased page load times. Period. There is no other serious purpose, especially in a world where host are boasting unlimited storage for $5/month (though that’s largely a farce anyway).

  1. August 23, 2013

    […] Be sure to always optimize your images. Here’s a ridiculously good post about optimizing your images for WordPress. […]

  2. November 26, 2013

Leave a Reply