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 1 · Accepted Answer · answered Jan 09 '19 at 23:36

1

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

51
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

score 0 · Answer 2 · 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 3 · 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 4 · 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

Rakkey

121
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 – Rakkey 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 · Answer 5 · answered Sep 21 '22 at 06:14

For resizing and compressing the image, you would need an image library installed with your PHP, like ImageMagick or GD

You can write your own resizing function as shown in https://stackoverflow.com/a/14649689, but you have to be careful with the image-types, as they may have their own function per type.

A maybe more easy way to resize is using the image intervention package. https://image.intervention.io/v2/api/resize (this also requires either GD or IamgeMagick to be installed):

// resize image to fixed size
$img->resize(300, 200);

// resize only the width of the image
$img->resize(300, null);

// resize only the height of the image
$img->resize(null, 200);

// resize the image to a width of 300 and constrain aspect ratio (auto height)
$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

Using this library, you may also compress the image using encode or save function:

https://image.intervention.io/v2/api/encode

https://image.intervention.io/v2/api/save

// open and resize an image file
$img = Image::make('public/foo.jpg')->resize(300, 200);

// save file as jpg with medium quality
$img->save('public/bar.jpg', 60);

You may alsouse tinypng API's to compress your images: https://tinypng.com/developers, it compresses jpg, png and WebP and is free if you scale 500 images per month

Compressing and Resizing Images for the Web

5 Answers5