5.13 Image Optimization: Compressing Files to Save Space
To be honest, adding images to my blog post tends to be the last item on my list when I’m curating content. I draft all of my posts with pen and paper, then type the entire thing into Grammarly to correct punctuation and sentence structure mistakes. Once I complete my edits, I copy the text and paste it into WordPress to format my post. By the time I do all that, finding an interesting image that is free to use and is related to my content seems daunting. So, I usually end up choosing the first image that meets those criteria, throw it on my blog, and call it a day.
I’ve never given much thought to image file sizes and their effect on website download speeds. As long as my blog post images display correctly on the page, I assume everything is ok. However, as I read through freelance writer Elna Cain’s article, “The Bloggers Guide To Optimizing Images For The Web,” I learned that visitors tend to “click the back button if a site takes longer than three seconds to load.” So, you can have the best-looking blog or website in the world, but it won’t get much traffic if it takes too long to display.
About Elna Cain
Before I continue my discussion of image optimization, I’d like to tell you a little about the article’s author, Elna Cain. As a freelance writer from Ontario, Canada, Cain provides resources for anyone interested in learning her trade. Besides her training materials, she also provides blog moderation services and digital marketing content to assist businesses with search engine visibility. “The Bloggers Guide To Optimizing Images For The Web,” published September 25, 2020, is easy to understand; and Cain includes links to useful tools that aid in reducing image file sizes.
Images take up space
An image’s file size takes up space in two places: 1) your web page’s total size, and 2) your hosting account’s media library. WordPress’s free version offers 3GB of media storage space; anything beyond that costs a minimum of $4.00 per month. In addition to faster site load times, image optimization keeps you from needing to delete content or from having to upgrade your blog-hosting subscription.
Say, for example, I want to create a blog that highlights some of my handmade jewelry. You would expect to see quite a few images in each article. But, if I add the following three images to the WordPress media library without optimizing them first, they take up just over 1MB of space.
According to Cain’s article, the average size of current web pages is 2MB. The three images I chose would take up nearly half that space. What happens if I want to include close up shots of each bracelet or include images of models wearing the product?
Image compression resources
Cain mentions the term lossy image compression in her article and I was unfamiliar with its meaning. According to Tech Terms, “lossy file compression results in lost data and quality from the original version.” Poorly compressed files result in jagged edges or pixilated areas. Cain offers five desktop tools for image optimization that promise to compress file size by 40% while maintaining the same quality of optimization provided by your photo editing software.
- ImageAlpha (A tool to optimize .PNG images)
- ImageOptim (A tool for MAC computers)
- JPEGmini (Cain’s link takes you to the Pro version. I was unable to find a link for the Lite version mentioned in her article)
- TinyPNG (Image compression for .PNG or .JPG files)
- EWWW Image Optimizer (A plug-in app for WordPress Business and eCommerce accounts)
My test of TinyPNG
I conducted a test using TinyPNG and my three images from above. The website is easy to use; you simply drag and drop your image, then download the results. The compressed images are less than half the size of their originals, with a combined file size of just under 400KB. The examples below show a comparison of one of my original images against its compressed counterpart. At face value, the images look almost identical. However, a close zoom reveals some loss of sharpness.
Using a tool like TinyPNG is really just a starting point when it comes to image optimization. Or it could be an end-point depending on your process. Cain’s article provides some brief discussion on image dimensions and hosting your images on a Content Delivery Network (CDN). I decided to focus on TinyPNG because it is a tool I can easily use and implement as a new blogger.
Note: This chapter is a revised version of a blog post titled, “Image Optimization: Compressing Files to Save Space,” on The Netizen Praxis.
