In this article take a look at three image tools: Adobe Photoshop, Tiny PNG and Wp Smush Pro. We compare the three tools for their optimisation features and decide on a best-approach workflow by running some practical tests.
We actually learned a lot from doing this, in fact, we will be refining our workflow as a result. So we hope you will find it equally as useful or at least inspire you to undertake your own tests to decide on which approach is best for you.
Why We Decided to Put These Image Optimisation Tools to the Test
OK, so although we seemed to have our workflow pretty well sorted, there was always a nagging feeling, that maybe we were making some assumptions about these tools. It’s easy enough to do !. When you are dealing with potentially hundreds of images for a website, you don’t really have the time to assess every image against the various tools to find the best approach. You tend to find a workflow that gives you good results and stick with it.
So the purpose of this article is to challenge our own assumptions and actually put these tools to the test. Let’s find out if we are using the most effective workflow, and also are we giving the best advice to those clients of ours who edit their own websites. Asking questions is a great way to challenge assumptions. The questions we put to ourselves during the tests that follow are :
- Are the Photoshop image optimisation tools actually the best?
- Is TinyPNG actually better at compressing images than WP Smush Pro?
- If the answer to either of the above questions is no, then a third question arises – What is the best workflow for optimising images?
How WordPress Deals With Images
Before we begin, it is worth taking a little time to understand what WordPress actually does with an image when you load it into your Media Library.
WordPress has the ability to automatically generate a series of thumbnails for every image you upload. Whatever theme you have installed will determine what thumbnail sizes are generated. Some themes can actually have this feature disabled, but most themes will generate a LARGE, MEDIUM & SMALL version of the image as well as keeping the original.
At Unbranded Space our theme supports LARGE (1024×1024 pixels), MEDIUM-LARGE (768×768 pixels), MEDIUM (300×300 pixels) and THUMBNAIL (150×150 pixels) as well as the FULL (original) image. So for every image that is uploaded, 4 additional images are generated.
Our Image Optimisation tools of Choice
At Unbranded Space we generally use 3 tools as part of our regular image optimisation process.
ADOBE PHOTOSHOP
Photoshop is our “go to” tool for any kind of serious image editing. We use it to create all sorts of images, from composites (combining parts of images to create something new) to enhancements (colour grading & filters), to simple resizing or cropping of images.
We also use the “Export For Web” feature in Photoshop as part of our optimisation process. We do this for both JPG and PNG image files – pretty much the only image files we use for the web.
TINYPNG
TinyPNG is a very simple image optimiser. You simply go to the TinyPNG website and drag your image onto the page, wait for the software to perform it’s magic, and then download your optimised image. TinyPNG is free to use, however, there is an option to sign up for a subscription which gives you access to additional features.
We have found that even after optimising your image in Photoshop, taking the image through TinyPNG gives you a further reduction in file size. Because of this, it is a regular part of our optimisation workflow.
WPSMUSH PRO
WPSmush Pro is a plugin created by the WPMUDEV team. It is part of a whole suite of plugins the team provides with their subscription service. We have to confess guilt here of never really giving WP Smush its proper dues. It was our observation that WP Smush never seemed to offer many benefits. It didn’t seem to offer any further reduction in file size other than a few KBs. However since the plugin was available – and was giving us some reduction (however small), we might as well have it run in the background. It doesn’t require any additional work from us because WP Smush automatically compresses images as they are uploaded to the WordPress image library.
WP Smush Pro also auto-compresses thumbnails of varying sizes. We mentioned above that creating thumbnails is an existing feature of WordPress, however, WP Smush is simultaneously optimising the thumbnails as they are generated. This is actually a very useful feature and something we hadn’t really given WP Smush Pro much credit for. We realised that in doing our test it is actually better to use one of these auto-generated thumbnails for comparison, rather than comparing the original sized image because in most cases these are the images that will end up on the web page. So in our test results, we have included the LARGE image thumbnail for comparison purposes.
So while the first 2 tools we mention require that optimisation is performed before the images are uploaded to the Media Library, WP Smush performs optimisation as you upload your images.
Meet Our Test Subjects
Subject 1 - "Dog"
The dog image is one that we have sourced from pixabay.com. We are fairly confident that this image has already had some compression applied, which is as it should be for an image found on the web. However, the file size is still too large to place on a website.
IMAGE DIMENSIONS
1920 x 1280 Pixels
FILE SIZE
594 KB
FILE FORMAT
JPG
Subject 2 - "Ducks"
The Ducks image is one of our own that we captured with a digital camera. The file began life as a RAW image file, and we saved it as a maximum quality jpg. This leaves us with a very large file, that is far too large placing on a website.
IMAGE DIMENSIONS
1920 x 1280 Pixels
FILE SIZE
2.3 MB
FILE FORMAT
JPG
Test Subject 3 - "Chameleon"
The Chameleon image is a 24 bit PNG file that contains transparency. This image is again sourced from Pixabay. Because it contains transparency it cannot be a JPG file – PNG is the best web image format for transparent images. At 2.3MB it is far too large for placing on a website.
IMAGE DIMENSIONS
1920 x 1306 Pixels
FILE SIZE
2.3 MB
FILE FORMAT
PNG
Our Test Structure
Because WP Smush is installed on our test website and automatically performs compression, all tests were comparison tests where Wp Smush Pro was the tool tested for comparing against the others. We also enabled “Super Smush” which is a feature of the “Pro-only” version of WP Smush. This feature claims to double the amount of compression achieved with images.
JPG Tests
The Dog & Ducks images are both JPG files, so we put them through identical tests. With each of these, we performed the following tests
- Upload the JPG image to WordPress without any compression and see how WP Smush performs.
- Take the image through Tiny PNG and take note of the amount of compression, then upload the image to the test website and see how much additional Compression WP Smush applies.
- Take the image through Photoshops “Export for Web” tool, and take note of the amount of compression, then upload the image to the test website and see how much additional Compression WP Smush applies. For both JPGs, we used a quality setting of 55, which is quite a considerable amount of compression, and in some images would result in noticeable visual defects. However, in this case, both images did not appear to suffer from any obvious defects.
- Take the image through Photoshops “Export for Web” tool, then Tiny PNG, and take note of the amount of compression, then upload the image to the test website and see how much additional Compression WP Smush applies.
Note: As you read you will see that we also ran a 5th test on the “ducks” image. This allowed us to test how WP Smush Pro dealt with an uncompressed full-size image.
PNG Tests
With the Chameleon being a PNG containing Transparency, we had to do things a little differently. In the case of this image, the Photoshop “Export for Web” tool does not so much apply compression but allows for the image to be exported with transparency in the first place. Although we sourced the image from the web, the chances are it was originally created in Photoshop. So while a program like Photoshop is necessary for creating transparency within the image, we do not need to perform any tests with it for the purposes of compression.
So our tests for the PNG were :
- Upload the PNG image to WordPress without any compression and see how WP Smush performs.
- Take the PNG image through Tiny PNG and take note of the amount of compression, then upload the image to the test website and see how much additional Compression WP Smush applies.
So without further delay, here are the results of our tests…
Test Results For Dog Image (JPG) reduced to 1024 x 683
Test 1 - WP Smush - No Additional Compression
No Compression
548KB
WP Smush
121KB
Test 2 - TinyPNG to WP Smush
No Compression
548KB
TinyPNG
102 KB
WP Smush
119KB
Test 3 - Photoshop "Export For Web" to WP Smush
No Compression
548KB
Photoshop
149 KB
WP Smush
122 KB
Test 4 - Photoshop "Export For Web" to TinyPNG to WP Smush
No Compression
548KB
Photoshop & TinyPNG
105 KB
WP Smush
120 KB
Some Observations
- Resizing the image from 1920 wide to 1024 wide, only reduced the file size down from 594 KB to 548 KB. This was a little surprising as we would have expected it to be more. However, this file has already had compression applied and this may account for the small variation.
- TinyPNG produced the best overall result getting the file down to 102 KB.
- Photoshop produced the worse result at 149 KB, however, we could get that lower by decreasing the quality setting on export – but the visual quality may begin to suffer.
- There was no gain in Exporting for Photoshop and then compression with TinyPNG. In fact, the results were not as good as just using TinyPNG
- Although WP Smush was not able to get images as low as TinyPNG, it seemed to make little impact as to whether or not the image was compressed at the point where we uploaded it to our WordPress Media Library.
Best Workflow Option
In this instance taking the image through TinyPNG produced the best results, but the end result in WP Smush was barely worth the effort. So provided server space was not a major concern we would conclude that no compression is necessary prior to uploading the image to WordPress.
If you were working on a larger website with lots of images, then it might be worth taking the images through TinyPNG first, then uploading them.
Test Results For Ducks Image (JPG) reduced to 1024 x 683
Test 1 - WP Smush - No Additional Compression
No Compression
845 KB
WP Smush
153 KB
Test 2 - TinyPNG to WP Smush
No Compression
845 KB
TinyPNG
157 KB
WP Smush
157 KB
Test 3 - Photoshop "Export For Web" to WP Smush
No Compression
845 KB
Photoshop
209 KB
WP Smush
153 KB
Test 4 - Photoshop "Export For Web" to TinyPNG to WP Smush
No Compression
845 KB
Photoshop & TinyPNG
150 KB
WP Smush
151 KB
Some Observations
- Resizing the image from 1920 wide to 1024 wide, reduced the file size down from 2.3 MB to 845 KB. This is more like what we were expecting.
- This time Photoshop & Tiny PNG combined produced the best result, however, it was only slightly better than TinyPNG alone, so barely worth the extra effort of taking it through Photoshop.
- Photoshop again produced the worse result at 209 KB. Again better results could be achieved with a lower quality setting, but visual quality would probably suffer.
- Again the WP Smush results were nearly the same in all tests. However, the first test where we just uploaded the uncompressed image directly to the WordPress Media library produced one of the best results.
In this instance taking the image through Photoshop and then TinyPNG produced the best results. However, this is only a marginal improvement over not using any compression and just relying on WP Smush to do the work.
However, we have to remember that the original image was 2.3 MB. That’s a lot of space being used up by one image so it occurred to us to run one further test. If the original uncompressed image was 2.3MB, what would happen if we compressed the image first and then uploaded it to the media library?
So we conducted another test. This time taking the original 1920 x 1280 image through TinyPNG.
Test 5 - Compress Original via TinyPNG before upload.
1920 x 1280 after TinyPNG
420 KB
1024 x 683 image after
WP Smush
151 KB
The 2.3MB image compressed down to 420 KB with TinyPNG, which is a great saving. However, the surprising result was that after WP Smush had compressed the various thumbnail generated by WordPress, there was no real difference between the size of the 1024 x 683 file when compared to tests 1 to 4.
However, we did save space on the server. The Original Image was 2.3MB and the compressed image was 420 KB. That’s nearly a 2MB saving, and on a website with lots of images, that’s going to be storage space you might need.
Best Workflow Option
For a small website, it may seem feasible to skip any optimising steps and just upload directly to your media library. Thanks to WP Smush Pro, this is likely to actually be fine, but there are a few considerations:
- As your website grows, you may start wishing that you had optimised prior to upload, because all of those large files are starting to eat into your server space
- Be sure that the full-size image is not being used on your website. On most occasions you will use one of the optimised thumbnails, however often a background image or a gallery may use the original uncompressed image.
WP Smush does provide additional options for managing full-size images. You can set an option that allows you to create a Smushed (compressed) version of your full-size image as well as keeping the original.
For a Small Website, where you don’t have to worry about the amount of server space available to you, you can save some time by just uploading your images directly to WordPress and let WP Smush do the work for you.
On a larger site with lots of images – say an e-commerce store for example – it is probably still worth taking the extra step of processing your images through TinyPNG. This isn’t as bad as it sounds, you can drag up to 20 images into TinyPNG at once and then download them in one Zip file. If you pay for a license, you can process more than 20 images at a time.
Overall from a “Best Practise” perspective, we would recommend the TinyPNG to WP Smush Pro workflow. Although it may not speed up your website, you will be conserving space on your server.
Test Results For Chameleon Image (PNG) reduced to 1024 x 687
Test 1 - WP Smush Uncompressed Image
No Compression
835 KB
WP Smush
210 KB
Test 2 - TinyPNG to WP Smush
No Compression
835 KB
TinyPNG
205 KB
WP Smush
210 KB
When we resized the 2.3MB image down to 1024 x 687 pixels we reduced the file to 835 KB. Taking the image through the extra step of tinification through TinyPNG produced identical results to just uploading directly to the WordPress media library and letting WP Smush do the work.
The only benefit here is that the TinyPNG file was reduced from 835 KB down to 205KB, which is a saving of over 600 KB. Although we haven’t published the test results here, we found similar results when comparing the full-size image. TinyPNG managed to compress the file down to 617 KB from 2.3 MB.
Best Workflow Option
So these results are consistent with the other 2 tests run. There is no benefit in compressing the PNG prior to upload in terms of the size of the published file. However, in terms of overall storage space being used by your files, there are still advantages in compressing your file before uploading them. As Photoshop cannot perform the optimisation that TinyPNG does, then TinyPNG is the better compression tool.
We recommend the TinyPNG to WP Smush Pro workflow.
Conclusion
We made some interesting discoveries in undertaking these experiments. Let’s return to our original 3 questions and see what the outcome is…
Question 1
Are the Photoshop image optimisation tools actually the best?
Answer
Our tests suggest that the answer is no. In every test, Photoshop gave us no compression benefit. To be fair you have more options in Photoshop, and with experimentation, you may actually get better results. However, this kind of experimentation is not really practical in a production workflow.
We now know Photoshop is not really a necessary part of the optimisation workflow unless you need to do some image editing or resizing. We do perform a lot of image editing, so Photoshop will still be a big part of our workflow. However, if you are managing your own website using stock images, then Photoshop is largely unnecessary.
Question 2
Is TinyPNG actually better at compressing images than WP Smush Pro?
Answer.
Overall we would say yes, but only marginally. We learned that WP Smush Pro is a much more powerful tool than we had given it credit for. We now feel that we can recommend this plugin to anyone who is looking for a bit of automation with their images. Even the Free version offers many features, however, the Pro version is definitely preferable with its Super-Smush option, getting the results we have shown in our tests today.
Question 3
If the answer to either of the above questions is no, then a third question arises – What is the best workflow for optimising images?
Answer
It is feasible to just have WP Smush Pro installed and allow this to be your only optimisation tool. However, the best approach is to be conservative with your server storage and for this reason we think adding TinyPNG as a step in your workflow is best.
So our final conclusion is that you optimise with TinyPNG before uploading, then let WP Smush Pro perform the automatic optimisation of your WordPress generated images.
We hope you’ve gleaned some useful information from our experiment. There are many more optimisation tools out there. TinyPNG actually has a plugin for WordPress that is equivalent to Wp Smush Pro, however due to the volume of images we process, the price is prohibitive.
We encourage you to try your own structured testing of the optimisation tools in your workflow and perhaps even share the results.