"A picture is worth more than a thousand words". True, but a large picture will make your webpage slower, which will affect your SEO in a negative way. And eat away at your servers space, megabyte after megabyte.

There are several ways to remedy such a behaviour, but one way is to use image compression services to save space. With online services or programs on your computer you can remove unnecessary information and compress images with sometimes up to 80% gain.

Here I'm going to show you how to integrate the TinyPNG service in your Drupal installation which automatically compresses your images.

TinyPNG

There are many different services on the internet, but one of the best I have found is TinyPNG - and it's supereasy to implement on your Drupal site.

It's also super easy to see if you can benefit from using their service. If you visit their Page Analyzer and enter your site url, you will be presented with statistics. If you are over 25% savings, I would suggest you start using a compression service.

Step 1: Installing the Drupal module

By using composer to install the module and the TinyPNG library, it's super easy to get started.

Type

composer require drupal/tinypng

in your terminal. Composer downloads the module, places it in the correct folder and downloads its dependency - TinyPNG PHP Library - and places it in the vendor folder.

Head into your Drupal website and click Extend in the menu. Scroll down (or filter) to TinyPNG and activate the module. 

Step 2: Getting an API key

API Key? What's that? Well, to make TinyPNG accept the requests from your website to the service you need an API key. It's a way of saying "howdy, can I get some service". It's also a way for TinyPNG to track how many images you get compressed per month. Don't worry, you get 500 for free every month, so unless you upload more that that, you're in the clear

If you should send more than 500 requests then you won't get access to the service until next month - or if you pay for the service. 

For normal use, 500 requests should be enough.

Getting an API key couldn't be simpler. Just visit the developer section of Tinypng.com and enter your name and email. 

You get an email with a link. Click it, and - boom! - you're in. On the page you can see your API key and also a counter that lets you know how many requests TinyPNG has processed using your unique API key.

Step 3: Make the magic work in Drupal

Click the Configuration link in Drupal's menu and look under Media. There you find TinyPNG Settings. Click it.

Now it's time to copy the API code you got from the TinyPNG service. Paste it into the field on the settings page and hit Save configuration.

Step 4: Choose your compression method

The module facilitates two different kinds of image compression: on upload or via Drupal's own Image Styles - or both. I myself use the uploading kind since I then know that I won't reach the monthly limit through the API. If I would use the image style version, then I could reach - and pass - the limit in a fast way since I manage a site with a lot of images. Sure, I don't need to use the image action on every single Image style I have in Drupal, but I sure would be tempted to do so. 

If you choose to use the TinyPNG API whn uploading you get two options under Integration method: Download and Upload. They are the same, the only thing to remember is to use Upload on your local installation and Download on your live server. The help text says it all: "The download method requires that your site is hosted in a server accessible through the internet. The upload method is required on localhost." Though, personally, the names could be better. But anyway, it does the job.

Step 5: Save some megabytes

Well, actually there isn't a step 5. After installing the module with its dependencies, entering your API key there isn't much more. Just sit back, relax and watch the images shrink when uploading and/or showing them to the users making their experience on your website faster and better.

Some numbers

Here is also a comparison before and after using TinyPNG.