Image optimization
Myth: Plugins always help compress the file size down to a sane level.
The most common and worst recommendation is Smush Image Compression and Optimization plugin. Read more about better alternatives:
PagePipe reviews all of the files in a client’s image library to see how optimized they are. We install a plugin that indicates the “space used” by each file. This is the page weight expressed in “k” (kilobytes).
Media File Sizes Plugin
Displays file sizes next to media items in library. (For image files, also displays total size of all generated sizes.)
Images are traditionally half of all page weight – code and other assets make up the rest. Optimizing images can make a big difference in load time. It’s the first thing to try.
WP Smush plugin has a fault or myth. Their advertising encourages the false sense you’re automating everything possible to optimize images. In reality, WP Smush does very little to help. Their goal is to influence you to upgrade to the Pro (paid) version. The free version perhaps produces a best-case 10% improvement for JPEG images. This is not enough to make a significant difference in page load time. It’s one of the least beneficial of image optimization plugins we’ve benchmark tested. Yet the most popular. Go figure. Over a million active installs!
The best-case scenario is always optimizing your images by-hand – meaning using an image-processing program or application. But for those with hundreds or thousands of images to optimize, we can understand why you would want to automate image optimization. But it will always be second best.
Remember: WordPress changed automated image optimization from a quality setting of 90 to 82. This makes images comply with the standards set by WebPagetest.org. That means no red flags go up for images when you speed test WordPress. But, WordPress automated optimization is not applied to the “original” image – only to the stored medium and thumbnail images. From our experience, images that are cropped or edited using WordPress image library functions will be optimized. Ironically, in some cases, this produces a larger page weight. This can undo your by-hand optimization. So double check.
So if WordPress is doing some image optimization work already, what do you need to do? You need to make sure the physical dimensions of the file (height and width) are reduced to their proper size. That will prevent waste. Note: Setting the image resolution to 72ppi makes no difference in speed, page weight, or image quality. For a demonstration and explanation of this go to: http://daraskolnick.com/image-dpi-web/ Another tip of the hat to Christian Nelson for this informative link.
A good failsafe is installing Imsanity plugin. Imsanity automatically reduces the size of images that are larger than the specified maximum and replaces the original with one of a more “sane” size. Site contributors don’t need to concern themselves with manually scaling images and can upload them directly from their camera or phone.
The resolution of modern cameras is larger than necessary for typical web display. The average computer screen is not big enough to display an 8 megapixel camera-phone image at full resolution. WordPress does a good job of creating scaled-down copies which can be used, however the original images are permanently stored, taking up disk quota and, if used on a page, create a poor viewer experience.
Imsanity plugin is designed for sites where high-resolution images are not necessary – or site contributors do not want (or understand how) to deal with scaling images. This plugin should not be used on sites for which original, high-resolution images must be stored since it overwrites the originals.
So in a nutshell, Imsanity allows you to set maximum physical dimensions and also a Jpeg image quality setting. We use a setting of 70. You can also bulk resize all of the existing images in your media library.
Usually web designers optimize images before uploading. No or negligible improvement are made by WP Smush plugin after that.
People don’t understand lossless image compression means fat. You want lossy images (skinny). Lossy images are visually lossless. That means they weigh a tenth but look the same to the human eye. WP Smush doesn’t do lossy optimization – period. They think fat is better. It isn’t.
It’s lame because WP Smush doesn’t 1) resize image dimensions and 2) it has fixed, lossless, default image compression settings. If you upload an oversize (dimensions) image, it remains the same size. Still too large. Gains during WP Smush compression (file size) are typically only 1% or 2% for JPEGs and potentially more around 12% for PNGs. These are insignificant in most cases compared to real potential savings.
Additionally, thumbnail and medium size images are automatically being produced and stored by WordPress on your server space whether you need them or not. (This can be switched off with a simple dashboard trick. Settings > Media > thumbnail size = make both dimensions zero. Same for medium size. Make them zero. No more small image production).
WP Smush attempts compressing these unused images also and includes the “savings” in its stats. This isn’t real savings since these images aren’t necessarily used on your site. That’s what it means when it gives “all sizes” savings numbers. Fluffy.
The most preposterous marketing claim made by WP Smush plugin authors is that it will improve your SEO. Ridiculous!
That is why we recommend using Imsanity free plugin instead. It resizes and does lossy compression to whatever values we set. In our case, we set Imsanity to crop uploaded images to a maximum blog column width (750 pixels) and compress to a quality of 70. It doesn’t compress PNG images by default which we don’t care about in our case.
WP Smush still doesn’t address the biggest issue. That is actual image dimensions. It will attempt to “smush” a monstrously-sized camera image – which of course still remains the same huge dimensions and a slow load.
There are many free, good, lossy image optimization plugins but they are less popular with less than 100k installs. People just don’t test. They assume popular must be the best. To the contrary, it usually means they contribute to site drag and slow page speed.
When you’re working hard to optimize a website, you learn that image file size is an important detail for speed. Many online publishers haven’t the time to learn Photoshop or other image editing programs. Automated optimizers are the next best thing and can speed your production. But which ones do a good job and how good is good enough? Big questions.
We’ve tested some nice online utilities for optimizing images, but only three stand out. These can be as frugal as optimization done in standalone programs like Photoshop. Don’t just ignore image speed issues. Sadly, halving the image weight on your home page will not make it load twice as fast. There are many other things to take into consideration. Nonetheless, image size and weight are the biggest contributors to site bloat. It’s worth your time to learn a few compression tricks.
Images are the biggest lump of sluggish web page weight. Everyone hates slow loading pages. Automated image workflow is an effortless way to improve user experience. Without difficulty, you can achieve the right balance of image file size and best quality. Optimizing images helps reduce your website visitor’s frustration.
We did a simple test of online optimizers with just two images. We weren’t interested in the nuances. We only wanted to know if the optimization tools met a minimum processing criteria. We describe our goals below under the section “PagePipe’s quick-test criteria.” Here are the two test images:
Test Banner JPEG Image
trees-rocks.jpg, weight: 122.2k, dimensions: 1024 x 300 pixels
Test Camera Output JPEG Image
wood-test.jpg, weight: 5.5MB, Dimensions: 4378 x 2916 pixels
PagePipe’s recommends only three web image-optimizer utilities.
Please try the 3 image utilities and see if they have value for the web file sizes you use.
1. DynamicDrive Online Image Optimizer
DynamicDrive image results are displayed by Quality-10 increments. We liked this simple, still-image visual feature a lot. DynamicDrive had an upload size limit of 2.86MB. That is too small for images straight out of a digital camera. We couldn’t upload the larger test JPEG because it is 5.5MB. We still like this browser-upload utility best for most web work because it shows all ten results for comparison. No fiddling with controls. Visual selection is easy.
DynamicDrive Results:
trees-rocks
17k, -85% savings
2. Optimizilla
Optimizilla Results:
trees-rocks
11K, -91% savings
wood
121K, -98% savings
3. Web Resizer
Web Resizer Results:
trees-rocks
19.29k, -83% savings
wood
63.94k, -98% savings
Size limit = 10MB, 2,000px wide, Cropping or resize option.
PagePipe’s quick-test criteria.
- We’re only interested in compressing photograph files. The online compressor is best if it works for two different samples: a large digital camera file and a smaller web banner. Both JPEG images. Specifications for test images are below:
- The software needed for image optimization must be only the browser. No other programs or plugins; such as Adobe Air, Windows Only, Flash, etc.
- We want to upload the test images by browsing or drag-and-drop.
- We consider it a bonus if the browser imaging tool has an image resizing option.
- The tool must work. Seriously? If it fails, it’s off the list.
- We’re only interested in [tipso tip=”a type of compression where a certain amount of information is discarded.”]lossy compression[/tipso] for the most page-weight reduction.
- We prefer optimizers with reduction control in steps of 10-increment quality settings. 90Q down to 10Q range. We pushed down to 10Q for testing when possible.
The 7 random optimizer losers.
We’ll share these just so you don’t wonder if we tried them or not:
Smush.it
This service was part of Yslow performance measurement tool by Yahoo! It never made much of a difference. There are better alternatives. Many swear by this method. We don’t think it’s that cool by comparison.
What? Oh, oh! Smush.it is gone. Abandonware. Read about it. >
Oh, Boy! New owners. WP Smush plugin takes it’s place. Finally, got rid of the sh.it. Bad naming!
Kraken.io
We think Kraken has potential with the WordPress plugin version. But the online browser version doesn’t allow you to make quality settings. Our trees-rocks test image only compressed by 12.4%. Unimpressive. And the larger “wood” image wasn’t allowed. They said for that size we’d have to upgrade to Pro version with an upper limit of 16MB. Forget it!
RIOT (Radical Image Optimization Tool)
For Windows only. Disqualified.
Puny PNG
FAILED uploading and gave an error message.
“Sorry, there was a problem with the image(s) you are uploading. Please ensure your image is a supported format and complies with your quota.”
Our images worked fine everywhere else? Go figure. Yes. We tried more than once.
Shrink O’Matic
Desktop app for Adobe AIR. Disqualified because it requires more than a browser.
TinyPNG — 5MB limit
Has a 5MB limit and made no difference. “Zero Percent” change on the trees and rock image.
Compressor.io
Compressor.io didn’t cut it either. trees – rocks only compressed by 24%. That’s not good enough for us. The “wood” image was better (-72%) but no resizing option. It wasn’t of much value for those big, fat digital camera images.
PagePipe is anti-waste and pro-thriftiness about more than just web speed. We don’t like the misuse of any web resources. Conservation and recycling create a better web ecosystem.
Find more time and space from positive optimization side-effects:
- Don’t waste bandwidth.
- Don’t waste server space.
- Don’t waste the user’s time waiting.
- Don’t waste your own time trying to optimize individual files.
“Portable Document Format” PDF is a powerful technology that can produce large, unwieldy files.
Bloated PDFs are a big source of wasted resources. PagePipe publishes PDFs at a 150-dpi print resolution. We start with print quality and then optimize for web publication, too. Uploaded PDFs are stored in your WordPress media library.
PDFs are usually created with a desktop, page-layout program at one of three different qualities:
- 72dpi screen resolution with embedded fonts for screen reading.
- 150dpi print resolution for laser printer output on paper.
- 300dpi for press resolution on glossy, magazine-like printing.
PDF quality settings affect web user experience. Those UX factors include:
- Download time.
- Offline printing time.
- On-screen visual quality.
- Readability.
Our PDFs are 11 x 7 inches horizontal (landscape format) for screen reading and for printing on letter-size paper. That is 1099 x 699 pixels. A computer viewing screen can be much larger than that. A PDF reader utility may use a best fit to fill the entire screen.
For example, a common 19″ screen size is 1024 x 768 pixels. That makes for a pretty good display of our PDFs. But what if the monitor is larger or set for an even higher-resolution view. Then embedded raster-based images look ugly. Type still holds up well because it’s vectored and stretchy. But our PDF content is full of visuals.
Screen resolutions are just too grainy for PagePipe’s design-sensitive audience. We’ve user tested this and they complain about image quality when using 72-dpi, screen-resolution PDFs.
Why? If users read on a large screen, it’s perhaps enlarged by 200 percent or more. This is when image graininess and pixelization starts showing up. Publishing a print-resolution PDF online makes for a more readable, quality format. But it’s still page-weight overkill. There’s that carelessness, again. Things can be better.
Press-quality PDFs are out of the question for us because they’re so heavy. When websites download huge, press-quality PDFs, it’s complete laziness and overkill. A waste! Big downloads happen when print design department’s hands off bloat to their web people. They either don’t know how to optimize or it’s just too much of a hassle. What happens is the user pays the price waiting for long downloads. We call that bad web etiquette. This impoliteness is often overlooked by site builders and owners. They suppose no one will notice – a bad assumption.
Compressed PDFs are a wise communication strategy that is called a post-decisional reassurance. It helps end any possibility of user remorse for pressing a download button. The choice to download is a good one when we get reinforcement of how fast the download is working. It makes us feel like someone cared. To not compress, indicates site-owner apathy about basic user’s needs.
User eXperience (UX) means being polite. Many web developers are inconsiderate of end user’s when they serve uncompressed PDF files. We’re a big advocate that users are grateful for the small polite details of faster downloads. Things feel right. That’s a UX goal. It’s good hospitality.
Was it our brilliance that lead us to find a better optimization process for our case studies? No. In truth, a wonderful image optimization service in Romania pointed out the possibilities. They are ShortPixel, the creators of the ShortPixel Plugin for WordPress. In the web world, Romania isn’t that far away.
ShortPixel pointed out they could optimize more than just our JPEGs or PNG images. They also would improve PDF files. This had never occurred to us. We then realized we were doing things backwards by uploading our PDFs via FTP client.
With the ShortPixel plugin installed, the WordPress Media Library would automatically optimize our PDFs. Faster PDF downloads without stress or hassle was a relief.
ShortPixel compression was a much better compromise for balance between image quality and speed. We were more than satisfied with the results. We were even happy! Unusual for us.
Our PDFs now politely downloaded 3 times faster without visual quality loss for users. Fantastic! It wasn’t as aggressive as screen-quality compression –nor was it as heavy as print-quality. ShortPixel hit the sweet spot for our PDF-publishing needs.
You can now bulk process all your existing PDFs in the WordPress media library. This feature is important when retrofitting an old website for site optimization. Rebuilding an old website is much more painful than building a new fresh one. ShortPixel reduces the pain and frustration during site retrofits.
ShortPixel not only told us the savings for each PDF but also a summary of the total savings from compression for the entire website. It’s a warm fuzzy that makes us feel good about clearing out so much deadwood from our page loads and server space.
Some designers might consider saving server space insignificant. Please remember that for us – with just 10 PDF files – we saved as much hosting space as WordPress occupies. That puts the previous waste into perspective.
We don’t want to store backups on our server. ShortPixel permits deselecting backup if desired. We feel PDF backups are wasteful since we keep copies on our computer and, also, have our site backed up on DropBox. We don’t want junk floating around. If you have backups selected, you can revert to saved originals.
Install the ShortPixel plugin to discover your unrealized potential for website savings. We aren’t an affiliate.
NOTE: Here’s an online PDF compression tool: For one-at-a-time, manual compression of PDFs, visit https://smallpdf.com/compress-pdf > Note: Need to do more than two? Clear your browser cookies.