Compressing and Resizing Images for the Web

Question

So I'm currently building a website using a php backend and polymer frontend. The client wants to be able to have a news feature for their own events. For this I want to convert all the images to webp and create a few different sizes so I can serve them quickly to different browsers (Mobile, Tablet, Desktop etc). However I haven't been able to find a good way of doing this in PHP or JS. Squoosh is great for static assets but not user generated content. Any help appreciated thanks!

Welcome to SO. The bad news: Questions asking for software and/or tools recommendations don't belong in StackOverflow. But the good news is, there is a site just for that: https://softwarerecs.stackexchange.com :-) — andzep, Jan 10 '19 at 00:10
You could use PHP Imagick, which runs ImageMagick. ImageMagick does support resize and WEBP format. See https://imagemagick.org/script/formats.php#supported and http://us3.php.net/manual/en/book.imagick.php — fmw42, Jan 10 '19 at 01:03

score 0 · Answer 1 · answered Jan 09 '19 at 21:29

The resizing must be necessarily done server side. The thing that you can do is to use the srcset and sizes attributes of the image tag to optimize the version to use:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />

(directly from Mozilla documentation)

Cheers didn't realise you could actually do this client side - thats definitely saved me some time! — Frazzle, Jan 09 '19 at 21:40

score 0 · Answer 2 · answered Jan 09 '19 at 21:30

0

I would highly recommend using Adobe Photoshop. With this you can manually compress/resize images or submit them in batch.

answered Jan 09 '19 at 21:30

Anthony Fait

1
1

I need to be able to do it programatically so when they add a new image its automatically compressed and resized. – Frazzle Jan 09 '19 at 21:32
Take a look at this similair question then [How to compress an image via Javascript in the browser?](https://stackoverflow.com/questions/14672746/how-to-compress-an-image-via-javascript-in-the-browser) – Anthony Fait Jan 09 '19 at 21:39
Yeah I came across this article earlier and whilst looked promising seemed a little messy using the canvas and ideally I'd like the processing done server side just to keep a fast user experience. – Frazzle Jan 09 '19 at 21:59

score 0 · Answer 3 · answered Jan 09 '19 at 21:44

0

I don't know if you have access to the server, but one way could be to call ImageMagick from PHP. It would require for PHP to interact with the server, which can be dangerous, so please keep that in mind.

ImageMagick although don't support webm, to my knowledge, but Im sure you get the idea behind the though.

If you don't want PHP to interact with the server itself, you could also scan for non-converted / Resized images, and then convert them. On linux it could be: find ./ -name "*.jpg" -exec CONVERT_FUNCTION{} \;

answered Jan 09 '19 at 21:44

Edelskjold

91
5

Yeah I do have access to the server so doing something on that level is definitely a possibility. Though I would rather do it in PHP just to keep the amount of stuff going on to a minimum. – Frazzle Jan 09 '19 at 21:45
Maybe you could resize the image and then convert it to webm, please have a look at https://github.com/gumlet/php-image-resize – Edelskjold Jan 09 '19 at 21:52
Cheers, that looks ideal the hard part is working out how to get it into WebP there's loads of tools for doing batch or individual images but not much for using PHP. – Frazzle Jan 09 '19 at 21:57
Looks like Imagemagick using php exec() does now support webp; I suppose depending on your version: https://imagemagick.org/script/webp.php convert wizard.png -quality 50 -define webp:lossless=true wizard.webp – Bonzo Jan 09 '19 at 22:03
Cheers this could be a really neat solution thanks for pointing this gem out to me. – Frazzle Jan 09 '19 at 22:10
ImageMagick does support both read and write of WEBP. So you should be able to create different sizes in PHP Imagick. See https://imagemagick.org/script/formats.php#supported – fmw42 Jan 10 '19 at 01:02

score 0 · Accepted Answer · answered Jan 09 '19 at 23:36

0

PHP has functions for manipulating webp images. Try this.

<?php
$im = imagecreatefromstring(file_get_contents('path/to/image.jpg')); // Create image identifier
imagewebp($im, 'path/to/image.webp'); // Generate webp image and save to location
imagedestroy($im); // Free up image identifier
?>

answered Jan 09 '19 at 23:36

wh1tel1te

41
2

Cheers I came across this one as well but does it actually compress the file as well? The main reason for using WebP was the compression it offers. I'll have a play with this and see what sort of reduction it gives. – Frazzle Jan 10 '19 at 11:14
`imagewebp` can take an optional quality parameter. `imagewebp($im, 'image.webp', 80);` http://php.net/manual/en/function.imagewebp.php – wh1tel1te Jan 11 '19 at 02:42

Compressing and Resizing Images for the Web

4 Answers4