How to create a .webp image in PHP [closed]

Question

How do you create .webp images using PHP?

Modern versions of PHP (>= 5.5.0) can be compiled with WebP support but from I've seen this isn't common on many web hosts. If compiled with WebP support you can use the built-in imagewebp() function to create .webp images.

What are the alternatives for creating .webp images using PHP? Libraries, APIs other methods?

Ruelas

ImageMagick includes a WebP extension. – Fluorometer

A side note: Firefox don't support it for the moment. So displaying in Browser is current no option. – Exclosure

I've used Modernizr in the past to test for testing webp support, then conditionally display the appropriate image format. Hopefully over time more browsers add support for webp. – Ruelas

What are you creating your .webp images from? Assuming you're "converting" jpegs or pngs to WebP you can just create an image resource with imagecreatefromjpegor imagecreatefrompngand then just save with imagewebp($im, 'file.webp'); You could also batch convert with convert (imagick) or call a service like Cloudinary: cloudinary.com/documentation/php_image_manipulation (awesome service btw!) – Condor

That's exactly what I'm trying to do @EduardoRomero. A lot of servers still don't support the webp extension however, so I'm looking for third-party libraries that can be dropped in easily. – Ruelas

You can either do it from shell, and batch convert your images to WebP, or if you're uploading them thru a PHP script you can read them with imagefromjpeg and imagecreatefrompngand then just write with imagewebp that should convert the file. You can use Cloudinary, which will do this for you but it's a service, depending on your usage it will have cost. Then using Modernizr to detect support and change your images accordingly (kinda of what you'd do with retina images). One of the perks of using a service is that the image will be created on the fly, no need for you to do the processing. – Condor

@BrettDeWoody, were you able to use one of the answer below or did you come up with a different method? Let me know if my answer was acceptable or if you needed to do something different. Thanks! Terry. – Assign

Answer 1

The options currently available are: gd (extension), imagick (extension), imagick (exec-call), gmagick (extension), gmagick (exec-call), cwebp (exec-call), gmagick (exec call) or calling a cloud service. I have created a library 'webp-convert' on github which tries all methods. The readme-file describes the pros and cons of each method. Its available here: https://github.com/rosell-dk/webp-convert.

For reasons unknown to me, the imagick/gmagick extensions produces no better quality than the original files. This is only a problem with the extensions, not the exec calls.

Yelena

Answer 2

webp images creating process:

you can use following php commands,to get the webp images

$imgName    =   "codingslover.jpg";
$webPName   =   "codingslover.webp";

Syntax:

 cwebp [quality qualitypercentage] [source image] -o [destination]

exec("cwebp -q 0 ".$imgName." -o ".$webPName." ");

Anthor Method:

exec("convert -colorspace RGB ".$imgName." ".$webPName . " ");

Exec : executes the given command in php

http://php.net/manual/en/function.exec.php

Ledoux

Answer 3

You can go right to Google and build the WebP libraries from source. Use this link to get the appropriate archive for your operating system:

https://developers.google.com/speed/webp/docs/compiling#building

Then you can use the following command within a php system() function to convert the images:

Syntax:

  cwebp [quality 
 qualitypercentage] [source 
 image] -o [destination]`

 cwebp -q 80 source.png -o 
 destination.webp

I would recommend reading the above link to get your libraries compiled, then go here to get more information about using the libraries.

Best of luck with the project!

Assign

this is offtopic, but could you recommend some tutorials/videos to help understand what exactly does it mean by building the libraries from source? – Coot

Answer 4

You can use Intervention Image Library. It provides various image encoding options and utilities related to image formatting. Here is the sample code snippet to convert image into webp format. It supports numerous image encodings as listed below,

• jpg — return JPEG encoded image data
• png — return Portable Network Graphics (PNG) encoded image data
• gif — return Graphics Interchange Format (GIF) encoded image data
• tif — return Tagged Image File Format(TIFF) encoded image data
• bmp — return Bitmap (BMP) encoded image data
• ico — return ICO encoded image data
• psd — return Photoshop Document (PSD) encoded image data
• webp — return WebP encoded image
• data data-url — encode current image data in data URI scheme (RFC 2397)

Mestas

Answer 5

There are now several npm packages to create .webp images from PNG, JPEG and TIFF formats.

Here's one Gulp plugin as an example - gulp-webp.

Ruelas