Compress Image Size - How to Abuse Google's Private Image Compression Algorithm

embraceone · August 17, 2020, 5:23am

Hey Team

This is a technique of mine to compress an image to 30KB while almost fully retaining its quality. This is going to be most useful for homepage images on a website - even for banner images that span the full width of the page.

Nobody else knows about this, so if you want to republish this technique in a blogpost, please link credit Liam Pitcher (Me).

I’m always looking for new ways to optimize my website’s performance. If you’re not aiming for that 90% loading speed, what’s the point?

Images are a big part of this, which is why I opt for pretty minimal landing pages on my own websites most of the time.

However, sometimes images are vital - and banner images can be anywhere around 500KB after the most optimal compression. This can easily eat into your page loading speed if you aren’t careful. I’m currently using Tiny PNG to compress most of my smaller images - the best site I’ve found for image compression. However; even this site pales in comparison to Google’s native image compressor.

Now; if you’re looking for 4K full-page-width lossless clarity on a television screen, this method is not going to be ideal for you. You’ll need to use other methods of compression for that - however if you’re happy with very good image quality that is still enjoyable on a television screen (and flawless on a 22-inch computer monitor), then this method is perfect.

The Ultimate Image Compression Method

How to do this is simple.

Step 1 : Choose your image in full HD quality. It can essentially be any size - lossless even. The higher definition it is when you begin, the better.

Step 2 : Resize the image using any image editing software to around 4K if it’s larger.

Step 3 : Add this image to Tiny PNG to lossless compress it (The size needs to be reduced to 2MB or less).

Step 4 : If the image size is over 2MB after Step 3 , then resize the image smaller before compression. If the compressed image is smaller than 2MB, try leaving it larger before compression.

Step 5 : Upload anything to YouTube.

Step 6 : Add your image as the YouTube Thumbnail

Step 7 : Go to any website that extracts YouTube thumbnails in HD, such as this one

Step 8 : Download your now fully compressed image at 30KB file size, courtesy of Google

The quality output is around 1980P, which should suffice for any website (unless you want HD clarity on a 4K television, which will not be possible using this method).

Here’s an example of a 30KB 1280P image

And here’s the original uncompressed 3.8K version

Why This is Ideal

Most people use mobile to browse these days, and unless you’re me, you probably aren’t working on a 49 inch curved Samsung as your main computer monitor.

The image quality retained in this process should suffice for any image of any size on any site. If it blurs a bit on a bigger screen, nobody is going to judge you.

Please let me know if you found this helpful!

More techniques to come.

All my best

Karthik_A · August 17, 2020, 6:01am

Thank you for sharing this! Helps a lot

Boris · August 17, 2020, 6:30am

Thanks #YTthumbnailHack

embraceone · August 17, 2020, 2:17pm

@Boris @Karthik_A

It’s my pleasure.

Share links if you use the technique.

nm9013 · August 17, 2020, 2:30pm

That’s a neat trick!! and it is Gold.
Thank You for sharing!

Gtamaster · August 17, 2020, 3:01pm

Wow that’s some powerful stuff right there.

I can see a few plays off this which could create something beautiful.

Thanks for sharing. (also elegant site, I’ll have to browse that forum a bit soon )

IGsocialize · August 17, 2020, 3:22pm

Very nice guide…but you are working too hard for something that you can do easily with many apps, even from Google if you like so.

https://squoosh.app/ from Google Labs with a good amount of settings to play with.

Or you can process them in bulk using Photoshop, changing the Quality.

MrBrad595 · August 17, 2020, 3:24pm

Nice method. Have your load times been greatly reduced with this?

embraceone · August 17, 2020, 3:35pm

Hey @IGsocialize

Thanks for this link.

I actually just tried it out and when I outputted an image that was 30KB in file size it completely destroyed the quality.

Also it’s the same on other image editing software I’ve used. They just damage the image quality too much.

Are there certain settings that you’re using to lossless compress down to that small a file size?

Let me know.

embraceone · August 17, 2020, 3:36pm

It would be lovely to have you there. Thanks for the positive feedback!

Yes it can make up to whole second loading time differences on Page Speed Insights if combined with Tiny PNG compression on all smaller images.

IGsocialize · August 17, 2020, 5:14pm

First of all I wouldn’t start with a 30kB file, second, the kind of image you have determines the settings and/or algo that you use in the app, the beauty of this tool is that you can move the sliders and updates the image output live… so you can decide, also using the zoom level is very important.

Just wanted to give you a faster approach and more control…

embraceone · August 17, 2020, 5:58pm

I think you may be misunderstanding me. If you use my method, you start with a large image, but get a resulting 30KB image that looks exactly like the original quality image. As far as I can see, the link that you provided cannot obtain the same quality while reducing the file size to 30KB. The only reason you would use this technique is to get an extremely small file size image for website building in order to get a very fast loading speed.

IGsocialize · August 17, 2020, 6:42pm

mate I’m a software engineer and pro photographer so I think that I know a bit what you are talking about lol …the app I sent you uses the latest Google technology from Google Chrome Labs, I just tried in a few images and works perfectly. Not sure what you are doing… if it doesn’t work for you just keep doing it your way. cheers

Note: Even PS can do a very good job, we use it for all of our web devs and apps too.

embraceone · August 17, 2020, 6:55pm

Okay so let’s both try our own methods to get this image to 30KB and see which one looks clearer?

If you can match my image then you will have proven your point - but I just don’t believe that any application or online software can do a better job.

Here’s the image: https://ibb.co/RyYFK8N

I still think we’re talking about different things though as this isn’t just about resizing an image to be smaller.

IGsocialize · August 17, 2020, 6:59pm

better job than which application?

embraceone · August 17, 2020, 7:01pm

Any application. I don’t believe that any application can reduce an image to 30KB and still retain VERY high quality except this YouTube thumbnail algorithm. Certainly no application that I’ve tried is capable of doing the same and I’ve tried dozens. But I’m open to being proved wrong which is why I’d actually like you to compress the above image so that we can compare.

embraceone · August 17, 2020, 7:08pm

So I managed to reduce the above image to 115KB using this method. It won’t go lower than that so it seems that it’s not always a 30KB output. The original file was 5.4MB before I did the initial compression.

(Keep in mind that this forum also compresses image uploads)

So please share a version of the photo that is 115KB and let’s compare!

IGsocialize · August 17, 2020, 7:08pm

uses not other than google’s algo rings the bell ?

embraceone · August 17, 2020, 7:09pm

Exactly, that’s why it’s so good!

IGsocialize · August 17, 2020, 7:21pm

In my opinion a bit better than your if you look at the bride and the guy behind with glasses.
And we can play a lot more with sharpening or blur.