Saving Images for the Web

You want to spend your precious time writing books, not dealing with technical thingymajigs such as saving images for the Web.

I get it.
Your website images aren’t high on your priority list.

But here’s why they’re important

  1. Speed. Images saved for the Web keep your site running fast. You won’t waste your readers’ precious time (so they may actually stick around and buy your books!).
  2. Cost Savings. Your hosting account has a space limit (especially inexpensive shared hosting plans). The larger your images, the sooner you’ll reach your limit and have to upgrade. Don’t spend more on hosting than you have to (and spend your money on good editors/cover designers or ads instead).
  3. Efficiency. With smaller images, your backups will be easier to manage/store.

You get it now, right?

So what does saving an image for the Web mean?

An image that is saved for the web:

  • Uses the RGB color mode (as opposed to CMYK, which is the mode used for printing).
  • Has a small width and height. My 13-inch laptop has a width of 1,440 pixels. Why would you want to load an image that has a width of 36,000 pixels? That’s WAY too big for your needs! A maximum width of 1,900 pixels at 72 dots per inch (dpi) resolution should be plenty good for a large background image. Use smaller images anytime you can, especially if they don’t need to occupy the full screen.
  • Has a small file size in kilobytes (kB). What is “small,” you ask? For most images, I recommend a file size of 100kB or smaller (if possible). Larger images (such as full-screen background images) should be around 250kB but you may have to go as high as 500kB in rare cases (and only one of those large images should be loading per page). First reduce the width/height to what is appropriate for your needs, then balance the file size in kB with the quality of the image to your naked eye. Make it as small as you can while maintaining an acceptable image quality.

But how can you tell if your images are saved for the Web already?

Look at your existing images in WordPress

While logged into your WordPress admin interface, click on Media to see a list of your images.

saved-for-web-1

Then click on one specific image and look at the information that appears on the right.

 

In the example here, the image is 560 px by 315 pixel and only uses up 15 KB of space. Perfect!

Are your images 50,000 pixels wide by 30,000 pixels high with a file size of around 4 MB? That’s a huge problem.

 

Not sure how to save for Web?

Here’s how I optimized one of the above images for the web, using (my outdated version of) Photoshop.


If you have Photoshop, you can watch the video above or read detailed instructions here. The menu placement for “save for web” may vary based on the version you have, but look for something like that in your own version (or ask Mr. Google).

No Photoshop?
No problem, use this free online tool.

But what if ALL your images are huge? Are you supposed to redo them all and re-save them all for the Web, then update all of your pages/posts?

That would obviously be a huge time-suck. Not the best use of your time, by far.

If you only have this problem with a handful of images, I say do it manually and get in the habit of uploading smaller images moving forward.

But what if you’ve got hundreds of non-optimized images?
There are plenty of free/premium plugins that will help you with that huge task. I do not personally use them, so I can’t endorse any of them specifically, but here’s where you can start your own research. Make sure to read reviews, look at the date when the developers last updated their plugin, check the pricing model, and choose wisely.

Using Image Optimization Plugins

Other than the very specific problem discussed in the previous paragraphs (for which you can install the plugin, fix your images, then get rid of that plugin), I don’t recommend you use image optimization plugins for the following two reasons:

  1. Your large images will most likely still get uploaded to your server, which means that they will use up space. Valuable space. Most people have a space limit on their shared hosting account. Plus if you backup your site regularly (which you should), then those backed up files will be ENORMOUS (once again reducing the space you have left on your server) and take forever to be created/downloaded to your third-party/safe storage location.
  2. Extra plugins are just another entry point for hackers if the plugin developers weren’t paying attention. WordPress is the most popular Content Management System at the moment, so guess where hackers are concentrating their efforts? Plus extra plugins also bloat your site: they use up more space on your server, increase the size of your full backups, and may also slow down the speed at which your site loads.

At the end of the day…

I recommend you get in the habit of saving your images for the Web (or asking your designer to provide such reduced-size images) and your readers will appreciate a faster-loading website.