Tinypng compressor plugin

jenstornell · May 29, 2015, 9:08am

About Tinypng

One of the best services for compressing images is https://tinypng.com/. Each month you can compress up to 500 images free. If you need to compress more images each month it costs, but it’s at a low price ($0.009 per image).

Compressing images is good for loading time, better user experience and SEO.

Tinypng compressor plugin - For Kirby

A good thing is that there is an Tinypng API. Another great things is that Kirby now support hooks!

Code

Save it as /tinypng/tinypng.php in your plugin folder.
Download http://curl.haxx.se/ca/cacert.pem and put it in the same folder.
If you DON’T want to overwrite the same file, change the last $input to $output instead.

Here is the code…

<?php
kirby()->hook('panel.file.upload', function( $page ) {
	$path = kirby()->roots()->content();

	$key = "YOUR API KEY";
	$input = $page->dir() . '/' . $page->filename();
	$output = $page->dir() . '/' . $page->name() . '-min' . '.' . $page->extension();

	tinypng_image_compressor( $key, $input, $input );
});


function tinypng_image_compressor( $key, $input, $output ) {
	$request = curl_init();
	curl_setopt_array($request, array(
		CURLOPT_URL => "https://api.tinify.com/shrink",
		CURLOPT_USERPWD => "api:" . $key,
		CURLOPT_POSTFIELDS => file_get_contents($input),
		CURLOPT_BINARYTRANSFER => true,
		CURLOPT_RETURNTRANSFER => true,
		CURLOPT_HEADER => true,
		CURLOPT_CAINFO => __DIR__ . "/cacert.pem",
		CURLOPT_SSL_VERIFYPEER => true
	));

	$response = curl_exec($request);
	if (curl_getinfo($request, CURLINFO_HTTP_CODE) === 201) {
		$headers = substr($response, 0, curl_getinfo($request, CURLINFO_HEADER_SIZE));
		foreach (explode("\r\n", $headers) as $header) {
			if (strtolower(substr($header, 0, 10)) === "location: ") {
				$request = curl_init();
				curl_setopt_array($request, array(
					CURLOPT_URL => substr($header, 10),
					CURLOPT_RETURNTRANSFER => true,
					CURLOPT_CAINFO => __DIR__ . "/cacert.pem",
					CURLOPT_SSL_VERIFYPEER => true
				));
				file_put_contents($output, curl_exec($request));
			}
		}
	} else {
		print(curl_error($request));
		print("Compression failed");
	}
}

Feedback?

JamesFCreative · July 7, 2015, 4:07am

This is really awesome. Is there a way to run it automatically with everything in the thumbs folder?

JAVE · July 8, 2015, 9:11am

I’m not sure if it will help on the thumbnail folder.
I just checked with a 11.1 KB JPEG image (200x200), and TinyJPG saved exactly 0 bytes…

However, I did write a Perl script that uses the API to convert images, and I can whip up something that will process all images in a folder if you want…

jenstornell · July 8, 2015, 10:07am

I will probably write one after my vacation in about 3 weeks.

JamesFCreative · July 8, 2015, 1:31pm

@jenstornell @JAVE That’d be awesome.

Also, I’m envious of your 3 week vacation!

JAVE · July 8, 2015, 2:12pm

Here you go.
This script will convert all .jpg & .png files in the given directory.
If you run it with ‘overwrite’ as second parameter, it will do just that

It’s a bit sparse as far as feedback goes: If all goes will it will be silent for a while, and then return the prompt.

#!perl
#
# Tiny PNG/Tiny JPG API interface
#
 
use strict;
use LWP;

use constant API_KEY => '<INSERT API KEY HERE>';
use constant API_URL => 'https://api.tinify.com/shrink';

main();

sub main {
    my $input     = $ARGV[0];
    my $overwrite = $ARGV[1];

    my $save_prefix = 'tiny_';
    if ($overwrite eq 'overwrite') {
        $save_prefix = '';
    }

    unless ($input) {
        die "\nUsage: $0 <input dir> ['overwrite']\nIf 'overwrite' is added, the source files will be overwritten\n\n";
    }

    unless(-d $input) {
        die "\nDirectory $input not found!\n\n";
    }

    my @files = read_dir($input);

    foreach my $file (@files) {
        my $data = slurp_file($input . '/' . $file);

        my $agent = new LWP::UserAgent;

        my $request = new HTTP::Request(POST => API_URL);
        $request->authorization_basic('api',API_KEY());
        $request->content($data);

        my $response = $agent->request($request);

        if ($response->code() eq '201') {
            my $result_url = $response->header('Location');

            $request = new HTTP::Request(GET => $result_url);
            $response = $agent->request($request);

            my $result_data = $response->content();

            my $output = $input . '/' . $save_prefix . $file;
            store_data(file => $output, data => $result_data);
        } else {
            print "Error " . $response->code() . " while trying to shrink $input\n";
        }
    }
}

sub read_dir {
    my $dir = shift;

    opendir(DIR,$dir) or die "Could not open dir $dir! ($!)\n";
    my @files = grep { /\.(jpg|png)$/} readdir(DIR);
    closedir(DIR);

    return @files;
}

sub slurp_file {
    my $file = shift;
    my $str   = "";
    local *F;
    if (!open (F,"<$file")) {
        return(undef);
    } else {
        local $/ = undef;
        $str = <F>;
        close(F);
    }
    return($str);
}

sub store_data {
    my %param  = @_;
    my $data   = $param{'data'};
    my $output = $param{'file'};

    open(OUTFILE,">$output") || die "\nCould not open $output ($@)\n\n";
    print OUTFILE $data;
    close(OUTFILE);
}

irvin · July 9, 2015, 7:31pm

Thanks, it works great! I had tried doing this (the hard way) a while ago with only partial success

jenstornell · July 22, 2015, 8:24pm

I have made a Kirby plugin that are compressing thumbnails.

The only problem left is naming the function that will replace the thumb() function.

Some suggestions

thumbC()
nail()
tinypng()
tinythumb()

Please help me choose a function name! Give me own suggestions if you have any.

Some notes about the plugin

It uses the exact same arguments as the thumb() function.
It will only try to compress the thumb with tinypng if the compressed image does not already exists.
It will return the compressed image if it exist, else it will return the original thumbnail. That way it will always return an image.
No txt-files are added, just compressed thumbnails.
It will respect thumbs.filename and thumbs root folder path.
I need to test it more before release.
The release will be on github, free for everyone.

Example

echo thumbCompressFunction( $page->image(), array( 'width' => 300 ) );

…or get the data…

$thumb = thumbCompressFunction( $page->image(), array( 'width' => 300 ) );

echo $thumb->width();
echo $thumb->height();
echo $thumb->dir();
...

…or get the original data (scroll example right)…

$thumb = thumbCompressFunction( $page->image(), array( 'width' => 300 ) )->original();

echo $thumb->width();
echo $thumb->height();
echo $thumb->dir();
...

Update

If you are adventurous you can try out this gist until I release the plugin for real. Read comment for basic instructions.

As said, the function / file name is not yet set.

gist.github.com

https://gist.github.com/jenstornell/9e71e0d00128155f7acf

thumbc.php

<?php
/*
Put this file in Kirby plugins/thumbc/thumbc.php
Find cacert.pem on the web and put it in the same folder
Add c::set('tinypngKey', 'your_API_key'); to your config with your TinyPNG API key
Add echo nail( $page->image( 'screenshot-1.png' ), array( 'width' => 300 ) ); to your header.php to see if it works
*/

function nail( $image, $args ) {
	$class = new Foo( $image, $args );

This file has been truncated. show original

lfsc · November 27, 2017, 5:51pm

I tried the PHP version and works perfectly. Great job!!
I have one question, I’m not an expert, what if I would like to keep the metadata?

jenstornell · February 2, 2018, 9:24am

So it still works? I left the project because I no longer think it’s a good idea to let an external service compress the images.

I don’t know about how to keep the metadata. My guess is that one reason the files are so small in the end is that it skip the metadata.