Blog posts with images are eye-catching and tend to get more user engagement than plain, imageless posts. So, you’ll likely want to illustrated your blog or website’s posts and pages with some colorful photos.
The downside of images is that if their file sizes are too big, they can add a lot of loading time to a page.
(Your visitors won’t want to wait around very long for the page to load – and Google rewards fast-loading pages with better search rankings, too.)
Large images can also use a lot of disk space on your web hosting account. You can wind up paying for way more space than you really need.
Here are some simple steps to reducing file size so they’ll load faster, and still look great.
Scan or take your photos — or find existing images online.
Many scanners and cameras automatically take images at a high resolution. But, for the web, you usually only need 96dpi or less; 72dpi is standard.
Photos you find online (such as at the sources below) will already be at a suitable dpi.
No matter where your photo comes from, it should be resized to a dimension appropriate for your particular website and optimized to reduce file size.
Resize your photo’s dimensions.
First, size your image to the largest dimension you’ll want to use on your website. This alone will save disk space.
For example, if you won’t ever display your image on your blog at larger than 500 pixels wide, resize it to 500 pixels wide before you upload it to your website. Having a 1000-pixel-wide image stored on your site is pointless, if you don’t need it that big.
Any image-editing software can do this. (See below for my recommendations!)
Then, compress it.
Compression minimizes the file size of a graphic and is most often used with .jpgs, since they tend to have pretty big file sizes.
Compression is “lossy”, meaning that some image quality is lost. But if you do it wisely, no one is likely to notice and your photos will still look great!
The three images below show the difference. They all are the same dimensions (550×413 pixels), but two are compressed for a large reduction in file size.
This is the original – 665K in size. Very large, and uncompressed.
The second one is compressed to 40% quality, which takes it down about 31K.
Do you see an appreciable difference? This image’s file size is 21 times smaller than the uncompressed image.
But the loss in quality is small – not enough for most people to notice, or care about.
The third is greatly compressed with a setting of 10% quality. It’s only 18K – which is 37 times smaller than the original! This photo looks a little pixelated and blurry in places that were sharp before.
As you can see, if you compress greatly, image quality will be noticeably lost. I usually go to 30-50%, depending on the image.
Compression is always a compromise between file quality and size. The smaller you can get it while still maintaining acceptable image quality, the better.
Any good image editing program can compress your photos: Photoshop, Pixlr (free); or Gimp (also free). There are many others as well.
When I’m working on my laptop I usually use Pixlr. My process is:
1. Save image to computer.
2. Open image from computer.
3. Image –> Resize.
Change width (between 600 to 700 pixels is usually good for a large photo or a featured image).
4. File –> Save. The default quality is 80%. This is unnecessarily high. I usually select somewhere between 30 and 50%; the goal is a file size of under 50kb, less if possible.
In my office, I most often use Photoshop Elements
(You can get a trial copy of Photoshop Elements here. Or, buy it at a discount here.)
Resizing and compressing your images is easy, and takes only a minute or two. These steps alone will go a long way toward reducing your image file sizes! At this point, you’re in good shape.
You can now upload your image to your blog post.
Want to do more to optimize your images for fast loading? Read on.
Use a lossless optimization plugin for WordPress.
If you like, you can take it a step further to losslessly reduce the file size of your images a little more.
There are plugins for WordPress which will reduce the file size of you images even more. Optimization in this manner is lossless, meaning that image quality will be exactly the same before and after the optimization. Only the file size will change.
Lossless optimization won’t reduce file sizes nearly as much as compression. So you should resize and compress your images, anyway. But it will still make your images – and, subsequently, the pages they’re on – load faster.
And fast is what it’s about – visitors will leave slow sites, and Google even ranks sites which load quickly higher in the search rankings.
(Note: Some of these optimization plugins will also do the type of lossy compression discussed above automatically, if you ask them to. But, if you do that, you won’t be able to preview what your images will look like first, and they may not turn out the way you like. Therefore, I recommend that you don’t use that feature.)
The most popular optimization plugins are:
EWWW Image Optimizer works well, if your web host allows a process called exec() to run on the server. (Many don’t.) If not, you can purchase an API key (very cheap!) from them which you can enter in the plugin’s settings. Then, optimizations will be performed on EWWW’s servers instead. This is my favorite lossless optimization plugin.
Smush.it is a service of Yahoo, and the optimization actually runs on their servers, which can be a little slow at times. You can also optimize directly for free on their website.
Kraken requires that you get a free API key from their website. Then, you can use this plugin on your site. The optimization is run on their servers, then re-uploaded to your site.
So – to sum up:
1. Size your images appropriately for your site.
2. Compress them before uploading them to WordPress. (Try Photoshop Elements or Pixlr.)
2. If you wish, use a optimization plugin for WordPress to reduce file size further, losslessly.
Leave a Reply