Efficiently making several thumbnails and an optimised version of the fullsize image

[goldmerc]

I want to save an optimised version of an uploaded file and then create several thumbnails at different sizes. For the thumbnails, is there a more efficient way than this?...

$image = Image::thumbnail($file, 600);
$image->writeToFile('test-600.jpeg');

$image = Image::thumbnail($file, 1200);
$image->writeToFile('test-1200.jpeg');

etc...

ie, making a new thumbnail each time from the original full size image. I was wondering whether it would be better to make each thumbnail from the previous thumbnail or if there is a way to generate them all in one go? In the end, I'm more interested in the image quality and small size, rather than the speed.

For the full size version, what is the recommended way to optimise the image without changing the size? At the moment I'm using this that works...

$image = Image::newFromFile($file);
$image->writeToFile('test-fullsize.jpeg');

but wondering what is the best practice? Thanks.

[jcupitt]

Most people generate thumbnails on the fly rather than pre-rendering at fixed sizes. You save a lot of money on storage costs and you can generate an image sized exactly for the client device. Your CDN will cache and reuse generated images for you.

If you really want to pre-generate the derivatives, I'd use a set of thumbnail operations. You can run them in parallel for more speed, if you like.

There's a chapter in the docs about thumbnailing with some tips: https://libvips.github.io/libvips/API/current/Using-vipsthumbnail.md.html

[goldmerc]

@jcupitt - thanks! (again!). When generating thumbnails on the fly, I presume there is some javascript on the client's browser to determine the correct image size? Is there a recommended js solution for that? Or do you just use a srcset with lots of options? I haven't been coding for about 10 years and I'm a bit out of the loop!

[jcupitt]

Sorry, I'm vague about the details. I try to avoid front-end when I can.

Maybe client hints? Googling "responsive images" seems to generate lots of hits.

[goldmerc]

Fair enough. Thanks for all the help so far!

One last off topic question - I had to install the dev version of libvips to get php-vips working, is that correct?

[jcupitt]

Yes, pecl will compile the extension for your PHP binary, and it needs the libvips headers for that.

[goldmerc]

@jcupitt Hi John. Hope you're well. So, I took your advice and I'm generating the images on the fly as they're needed. One question. At the moment the origin image is the full size jpeg. If the browser supports webp, the image is served in that format and falls back to jpeg for other browsers. From a performance / image quality point of view, would it help to also have a fullsize origin in webp format? Or in other words, do you get better or faster results using thumbnail when the image format doesn't change? Or is that irrelevant? Thanks!

[jcupitt]

I'd stick to jpeg for the original. webp is quite a bit slower as an image source. For a 10k x 10k pixel image:

$ time vipsthumbnail wtc.jpg -s 1000 -o x.jpg
real	0m0.466s
user	0m0.516s
sys	0m0.021s

$ time vipsthumbnail wtc.webp -s 1000 -o x.jpg
real	0m1.163s
user	0m1.624s
sys	0m0.058s

[goldmerc]

Thanks John. If you are generating a webp image, is it still slower with a webp source?

[jcupitt]

It doesn't make any difference. You always have to pay decode cost an recode cost, and they are independent.

The process is always:

decode -> big array of RGB values -> resize -> big array -> encode

So there's no benefit to using the same format each end.

[goldmerc]

Perfect, I'll stick to jpeg as source then. Thanks John!