m3Digital: Optimizing Your Images to Speed Page Loading
Optimizing your images. I talked about optimizing your image names last week, but what about the images themselves? You have perhaps 3-5 seconds for your page to load before you lose your viewer – that is not a lot of time, especially if you’re using large images, You gotta optimize, optimize, optimize! That takes a little bit more work, and you’ll need some software. Software of choice is Adobe Photoshop, and at $10/month for a subscription, it’s within reach of nearly everyone. GIMP is a great free option if you can’t access Photoshop. Today, I’m going to show you how to Optimize your images in Photoshop.
This is my master shot:
It’s 34.9M on disk, 4288×2848 pixels at 300 pixels per inch. It is gorgeous. It will also eat most internet connections alive trying to load it – and it’s serious overkill for web work. If I were going to physical print, this would be exactly what I’d need, but I’m not, so let’s try to reason with it. First of all, I’m going to cut it in half before I begin, to 2144×1824 pixels – that right there takes it down to 8.73M. A HUGE savings, but still horribly over the recommended size limit of 70k for most images files.
My next move is a built-in algorithm in Adobe Photoshop, “Save for Web & Devices”, or “Save for Web…”, depending upon what version of Photoshop you’re using. We’re using Creative Cloud here, but it works pretty much the same no matter which one. Select the command, and you’ll be brought to the hub. You may see a 4-up display as in the image here, or a 2-up – look at the tabs running across the top left; You’ll see “Original”, “Optimized”, “2-Up” and “4-up”. Select “4-Up’ if it’s not already selected.
This will give you four identical quadrants, each with the same portion of your image visible. The image in the upper left is the original. The other three will be the image in various states of compress optimization. Click on them in turn to see the settings on the right. You can change these settings, and see the effect on the image. You can also move the image around to see how it is affected. At the bottom of each image, you can see the final bit/byte count, and how long it will take to download that version of the image at various connection speeds (you can change those speeds in the drop down). As you can see in the screen capture here, my huge image, which shows at 11.6M in the original version scrunches all the way down to 155.3K at the tightest optimization.
Yes, I hear your question… I said my image was 8.73M after I cut it down… Why is it 11.6M here? That has to do with the way Photoshop uses scratch disk space. And chicken blood and voodoo. Don’t think too hard about it, it will definitely give you a migraine. Just go with the flow here…
As you can see, there is definitely a quality difference as you look at the various compressions – you do lose quality when you get down to the “15 quality”. So since we’re talking about jewelry here, and we’re selling things, and the images are so vital, you probably don’t want to go with the lowest possible compression. Fair enough. But take a look at the size savings even at the higherst quality – you’ve gone from 11.6 (or 8.7…) all the way down to 439K, even at the HIGHEST quality of compression. And that’s pretty snappy quality there. Now if you’re like most designers, and you have more than one image pn a page, multiply that savings out times…. 2? 3? 4 or more? All of a sudden you have some serious overhead savings. And my friends, Google does figure your page load into your PageRank.
Once you get used to saving your images this way, it’s extremely easy. I do suggest you save your original version as well, in case you ever need to do print, or pull small details out – never give up digital information, and pixels=information. But you don’t need all of them on the ‘net, so be judicious. If you don’t have Photoshop, GIMP is free, and emulates most of the functions well, on both PC and Mac. You can find it at http://gimp.com/
Courtesy of m3DigitalImaging.com