12

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?

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • 1
    ImageMagick includes a WebP extension. – Barmar Aug 11 '14 at 16:53
  • A side note: Firefox don't support it for the moment. So displaying in Browser is current no option. – Christian Gollhardt Aug 11 '14 at 18:17
  • 1
    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. – Brett DeWoody Aug 11 '14 at 18:40
  • 3
    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 `imagecreatefromjpeg`or `imagecreatefrompng`and then just save with `imagewebp($im, 'file.webp');` You could also batch convert with convert (imagick) or call a service like Cloudinary: http://cloudinary.com/documentation/php_image_manipulation (awesome service btw!) – Eduardo Romero Aug 18 '14 at 23:20
  • 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. – Brett DeWoody Aug 19 '14 at 00:19
  • 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. – Eduardo Romero Aug 19 '14 at 15:28
  • @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. – Terry Jul 31 '15 at 19:58

5 Answers5

9

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.

rosell.dk
  • 2,228
  • 25
  • 15
3

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

Elangovan
  • 3,469
  • 4
  • 31
  • 38
2

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!

Raul Cacacho
  • 267
  • 1
  • 4
  • 15
Terry
  • 989
  • 8
  • 29
  • 1
    this is offtopic, but could you recommend some tutorials/videos to help understand what exactly does it mean by building the libraries from source? – Sandeepan Nath Mar 14 '16 at 14:02
0

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)
Kiran Maniya
  • 8,453
  • 9
  • 58
  • 81
-1

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.

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184