I was recently developing a new theme that features large images on the homepage. Somehow, I needed the images to be big and high quality without dramatically affecting the loading time. Sometimes, resizing and and “saving for web and devices” in Photoshop is not enough!
Start With a Straight-From-Camera Image
I’m starting out with a gorgeous stock image from Unsplash. Downloaded straight from the website, this image has a file size of 7.2 MB. This is similar to any image that you have that is straight from your camera:
Step #1: Reduce by 83% by Resizing in Photoshop
The first step is to get that bad boy into Photoshop (or whatever editing program you use) and do some resizing. Since the original image was something like 3000px x 5000px and I definitely do not need it that large, I resize down more than 50%, so that the width is only 1200px. When I save, I choose “Save for Web and Devices”. All of this and I’ve gotten the file size down to 1.2 MB. But is this good enough?
Step #2: Reduce by 65% by Compressing!
There’s more you can be doing! You can compress your images even further! A simple Google search of “compress images” yields quite a few good results. I’ve tried a few out, and my favorite is tinypng.com (the cute panda totally sways my decision, no lie). You can upload up to 20 images (.jpg or .png) at a time and tinypng will compress them, reducing the file size even further. Best of all, there is no change in quality to the visible eye. My final image has a file size of 409 KB (that’s 0.409 MB).
Why Is This Important?
Not only does this save on the amount of bandwidth you’re using, it seriously speeds up your website’s loading time! Using this download speed calculator, see the impact on loading time for “high speed connections”:
| File Size | Loading Time | |
|---|---|---|
| 7.2 MB | 13-38 seconds | |
| 1.2 MB | 2-6 seconds | |
| 409 KB | 0-2 seconds |
There might not too much difference between the two smallest file sizes, however, considering that most of us have multiple images on our websites, compressing them to the smallest file size they can be really makes an impact.
And it couldn’t be more easy! Tinypic.png also has a WordPress plugin you can download and use for free for up to 500 compressions per month. There is a Photoshop plugin available for purchase on their website for $50 as well.