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.
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
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
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
No Compression
548KB
WP Smush
121KB
No Compression
548KB
TinyPNG
102 KB
WP Smush
119KB
No Compression
548KB
Photoshop
149 KB
WP Smush
122 KB
No Compression
548KB
Photoshop & TinyPNG
105 KB
WP Smush
120 KB
No Compression
845 KB
WP Smush
153 KB
No Compression
845 KB
TinyPNG
157 KB
WP Smush
157 KB
No Compression
845 KB
Photoshop
209 KB
WP Smush
153 KB
No Compression
845 KB
Photoshop & TinyPNG
150 KB
WP Smush
151 KB
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.
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”

Subject 2 – “Ducks”

Test Subject 3 – “Chameleon”

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.
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.
Test Results For Dog Image (JPG) reduced to 1024 x 683
Test 1 – WP Smush – No Additional Compression

Test 2 – TinyPNG to WP Smush

Test 3 – Photoshop “Export For Web” to WP Smush

Test 4 – Photoshop “Export For Web” to TinyPNG to WP Smush

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

Test 2 – TinyPNG to WP Smush

Test 3 – Photoshop “Export For Web” to WP Smush

Test 4 – Photoshop “Export For Web” to TinyPNG to WP Smush

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.
Test 5 – Compress Original via TinyPNG before upload.

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.