Thumb images larger than original

The CMS Questions
1

Hello,
I’m testing the thumb functionnality at the moment and I’m quite surprised by the results.
My test is simple:

  • I have an original image that is optimized with tinypng.
  • I then use the thumb function to create different sizes of the image for a responsive image with srcset
  • I compare the size of the returned images with the original.

Here’s one example:
url: http://hiweb.fr/whitespace/portfolio/blue-fruity
The first image on the page is 90 496 bites before using thumb. Dimensions 850567
The same size image but using thumb is 97 274 bites. Same dimensions
A smaller image using thumb is 100 499 bites. Dimensions 768512

I’m using the default image driver as image magick is not available on my server. Is there a configuration I should know of to optimize compression without affecting quality?

2

What you see is correct. GD (and as far as I know IM as well) don’t optimize the images. It only really makes sense to generate thumbs if the thumbs are a lot smaller than the original image. Otherwise, manually optimized images are better.

What you can do though is to run the thumbs through tinypng manually after they are generated. Maybe there’s also an easier or automatic way.

1 Like
3

Thanks for your answer @lukasbestle

I think what I can do is wait for @fabianmichael’s imagekit to tackle this issue :slight_smile:

I’m using the thumbs here because this is part of a theme and users won’t necessarily have optimized their images before uploading them.

4

Hey @Thiousi, thanks for the trust in my plugin. However, the current version does not support automatic optimization, altough I already considered this for a future release …

For now, you could extend Kirby’s GD driver which makes use of the TinyPNG API, they also offer a PHP library for using their service. Or – if it is available on your server – you could use a command-line tool like OptiPNG.

Put the following lines into a custom plugin file:

<?php

$originalDriver =  thumb::$drivers['gd'];

thumb::$drivers['gd'] = function($thumb) use ($originalDriver) {
  
  // Execute the original driver and create the resized image
  $originalDriver($thumb);
  
  // Abort, if there was an error
  if(!is_null($thumb->error()) return;

  // Put your your image optimization code below this comment.
  // You can get the thumb file’s path from: $thumb->destination->root
};

Because optimization also needs some time to finish, the thumbnail creation & optimization process will take longer much than normal. So this would indeed be a perfect use-case for :tada: … ImageKit. :wink:

Hope, I could help you with this.

2 Likes
5

I’m definitely looking forward to the extensions of imagekit you’ve mentioned :wink: