Image Optimization For Faster Loading Posts And Pages

Image optimization is one of the first steps you can take to help insure a fast loading blog while giving your readership a great experience. In this post, we’ll explain why we need to optimize images, list a few free online image optimization tools, image editing tools and help you get started toward a fast loading website. We explain the most popular image file formats and what they are best used for as well as a few helpful tips. Be sure to check out the embedded video if you have time.

What Is File Size

Skippable – Already understand file size and it’s difference to actual image dimensions? Skip this section.

The first thing we need to clarify is what we’re referring to why we talk about image file size. Every image has a size in the form of actual dimensions but file size is what determines the number of bytes the image (file) takes up in terms of disk space. Actual image size can affect the overall image file size but they are two different measurements, even though one can affect the other.

It’s not a perfect analogy but I liken it to a person’s height and weight; a six foot man may weigh 165 lbs. or 300lbs., so if he were digital, his weight could be thought of as his files size.

I’m in a constant battle to reduce my file size. (fat joke) lol

Why Image File Size Matters

Without going into how internet speed is measured (usually Mbps), we all have limited internet speed and performance (for now) that varies drastically from device, times, location, service and price. As content providers, our job is to insure that our content can be consumed without sending the masses away in frustration because posts, pages or images wouldn’t load for them. More and more people today have high speed internet but as we trend into heavy mobile consumption, file size is as important as ever.

The smaller the overall page file size, the faster the page load times. Fast loading pages keeps viewers on longer and makes Google smile :).

Preferred File Types

Skippable – Don’t let me confuse (or bore) you with the file type explanation. If you don’t want to bother with files types right now and just want to put an image you took with your phone or digital camera on your blog, skip this section.

There are a slew of image types (file extensions) but we’re going to focus of the three main image formats supported by every major browser and used by every web designer.

1. .GIF (Graphic Interchange Format) – Gifs are limited in color quality (256 colors) but are capable of simple animation and supported by every major browser. GIFs can also have a transparent background.
2. .JPEG (Joint Photographic Experts Group) – JPGs have become one of the most popular image file types used by websites because of its great photographic and image quality and colors (superior color quality to .GIF). The method those colors are displayed on .JPEG images, compressing (optimizing) for reduced file size can be very flexible. JPEG does not support transparency.
3. .PNG (Portable Network Group) – PNG is a superior replacement for GIF in color, quality, transparency and image compression. PNG is often the best choice when it comes to gradient images because the method of compression (lossless) causes less blurring.

Just to ease any confusion, I’m going to briefly explain my personal process for determining which image file extension to use. Keep in mind, I’m just a blogger, not a graphic designer but here we go…

• If I require animation (a moving image), I go with .GIF.
• If the image I need to optimize uses gradients needs to maintain a transparent background or large actual image dimensions, or maintaining quality is a priority, I use .PNG.
• If I have a black and white image or one with just a few basic colors AND quality isn’t a huge concern, I test compression in both .GIF and .JPG to find which gives the best balance between the quality and smaller file size.
• Almost anything else will be a JPG file. The vast majority on post and featured images on Hot Blog Tips are .JPG.

Hot Tip – Don’t Edit The Original Images

Sheryl Loch brought this point up in the video. It’s very important to save the original image separately and never work on or edit that file. I keep a separate folder for original images and those are not uploaded to the server. I copy that image into a different folder and doing any editing from there. Most of those original images, for me, are in .psd (Photoshop) or .xcf (GIMP) format for graphics and .png for photographs.

The WRONG Way To Reduce Image Size

As I explained above, it’s important to reduce the file size and reducing the actual image dimension using HTML within the WordPress Media Library or elsewhere. When we use HTML to shrink a photo or graphic, we’re still using the large file size, just displaying a small version for looks. That does nothing to reduce the file size and speed up the page or post download time.

3 Basic Steps To An Optimized Image

1. First, select the preferred image file format, e.g. .jpg or .png.
2. Second, scale the image to the required dimensions, cropping if necessary.
3. Third, optimize (compress) the file size for fast page load times.

Image Editing Tools

I use two different desktop programs for image editing and both are free and both have excellent file compression and format ability.

The first image editor is Paint.Net. We have several nice Paint.net tutorial videos thanks the Sheryl. Paint.net has a low learning curve yet it’s a very powerful tool.

The second program I use is GIMP. GIMp is simular to Paint.net but it’s a little more difficult to use. It’s really a matter of preference, I started using GIMP because it can open and save as Photoshop (PSD) files. Paint.net now has this same ability.

Free Online Image Optimization Tools

There are a ton of online optimization tools and I’ll list a couple of them here. If you use one that works exceptionally well, feel free to share it in the comments section.

• Site Report Card – It doesn’t get any easier than The SiteReportCard image optimization tool.  You use the image link or upload it from your computer to compresses the three major image formats mentioned above (GIF, JPEG, and PNG). In fact, I reduced the file size of the large image above under  the heading “The WRONG Way To Reduce Image Size” to 36.8KB and then used Site Report Card to reduce it another 45% to just 20.1. The image quality is reduced a little as well but we need to find an acceptable compromise. Site Report Card shows a preview of the original image and six reduced versions with previews and file sizes. This allows us to find that ideal balance.
• Pic Resize – I’m listing Pic Resize because it’s a simple way to resize and crop your images but the Pic Resize optimization feature really sucks. In fact, with my tests the file size is often bigger after optimization when keeping the image dimensions the same.
• TinyPNG – TinyPNG reduces your PNG image file size without visually degrading the image transparency. TinyPNG only works with .PNG files but it does a fantastic job.

Free Image Compression WordPress Plugins

Brad West talked about two plugins ge recommends in the video. Those plugin are WP Smush.it and EWWW Image Optimizer. I use WP Smush.it to help reduce image file size once I’ve uploaded it to me WordPress Media Library. I haven’t used EWWW Image Optimizer myself but I like the idea that it can optimize existing images that are already uploaded manually. Be sure you read and understand any cautions and warning with any plugin you use and don’t forget to o a complete backup before installing them.

Testing Your Blog Posts And Pages Load Times

Our first line of defense for speed evaluation should be Google Webmaster Tools. Two other online tools Brad mentioned evaluate your site, posts or pages and can isolate images (and other files) that are slowing down your load times. Those two online page evaluation tools are Pingdom and Website Optimization. Both tools do a nice job of evaluating fils affecting page load speed. Personally, out of the two I prefer the layout of Pingdom.

Bandwidth Theft

It’s considered bandwidth theft when you link an image from another site to show on your site without their permission. Even if you do have their permission, it’s generally better to upload those images to your own server or media library and host them yourself. Either way, you always need permission and you should always give credit.

Our Hangout On Air Video

Thank you Sheryl Loch and Brad West for taking the time to discuss image optimization with me for our viewers and readers. Between the three of us, I feel we covered the basics nicely.

Watch on YouTube
Optimizing Your Blog’s Images

Action Step

I hope I didn’t confuse anyone with the simple process of image optimization but the most important action step is to take action. Please don’t allow image file size prevent you from writing and publishing your posts. If anything here isn’t explained in a way you can understand it, feel free to ask us to clarify by leaving a comment below.

Over To You

Did I forget anything? Do I need to clarify anything? Are in in love with an online or desktop tool that I failed to mention? Your questions and comments are welcome and appreciated.