[UPDATE:]This has been an incredibly popular post, and there’s been a ton of development in the area of image optimization since I wrote this. In that light, I added a section at the bottom with updates on my current workflow and new tools available.
No really, Don’t Upload that 3MB Image to Your Website Straight from Your Camera
[toc]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.
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.
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.
And here’s the original, after I resized and didn’t optimize. A whopping 128kb.
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.
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. [EDIT: I was appropriately corrected that Smush.It does NOT strip EXIF data. I still wouldn’t recommend it for photographers because it is only a lossy form of optimization]
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.
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
I still recommend Irfranview to clients specifically for cropping and resizing images. It’s still really useful. But there’s a few more tools available now that really do the “smushing” really well and even LOSSLESSLY. So here’s a quick round-up of new things:
- JpegMini is a great tool that optimizes JPEG files losslessly. You can seriously cut the size of the image in half sometimes. I like it because you can bulk upload images to the online tool. There’s also a standalone version which lets you optimize images with “overwriting” (meaning you don’t have to save to a new folder or anything) and can do 20 a day for free. The paid version is limiteless and totally worth it.
- TinyPNG is the PNG counterpart. It doesn’t have a standalone version, but bulk upload is really sweet. Plus, who doesn’t love animated Panda’s?
- Compressor.io combines a bunch of different compression tools into one. So it’s a great one-stop-shop for Gif’s, Jpeg’s, and PNG’s. Only major draw-back is it only does one image at a time.
- Imsanity is a really useful plugin that allows you to set a maximum width or height (or both) of the images that you upload. For example, if you know all the images you upload are ONLY going to be for your blog, and you know that you will always only have 640px of space in your blog posts, then why not set the max-width to be 640px and save TONS of space!? Really awesome tool.
- Jetpack’s Photon is a free Content Distribution Network for your images. It automatically optimizes your images and serves them up to your users at the closest server to them possible. It can make a significant difference in your page speeds if your site is image intensive.
- Kraken.io is a paid service that I haven’t yet tested, but it basically optimizes all your WordPress images on the fly automatically. If you want really well optimized images, and are willing to pay a little every month then sign up for their service, and install their WordPress plugin.
Lastly, notice that this is the first of a series of posts called “Optimizing WordPress”. Follow along in the series to find out more and more ways to optimize your WordPress site for speed.