Feature #88537

WebP image format support

Added by Rene Tobias Tobias 13 days ago. Updated 7 days ago.

Status:
Needs Feedback
Priority:
Should have
Assignee:
-
Category:
Performance
Start date:
2019-06-11
Due date:
% Done:

0%

PHP Version:
7.2
Tags:
optimization, speed
Complexity:
Sprint Focus:

Description

Hey,

i think that support for WebP image format would be a great feature in TYPO3. It provides great lossless and lossy compression for image on the web.

More about WebP format: https://developers.google.com/speed/webp/

WebP image format will have a great impact for website optimization and performance.

PS: i think this is a "small" feature, so i didn't start topic on TYPO3 Decisions.

phpinfo.JPG View (33.7 KB) Rene Tobias Tobias, 2019-06-11 09:53

History

#1 Updated by Benni Mack 13 days ago

  • Status changed from New to Needs Feedback

Hi René,

I agree with that feature. We already use it in our projects in v9 without any adaptions to TYPO3 Core.

A few things we need to do for this to make this happen for Core.

1. Add this to $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] (probably along with JPEG XR, JPEG 2000)

2. This should however depend if the systems' IM/GM supports webp - question is how can we identify this?

3. We'd need to change templates to have a webp with a picture tag

What do you think?

#2 Updated by Rene Tobias Tobias 13 days ago

Hey Benni,

For 1. i think this is the easiest of all 3 point am i right? For 2. PHP Info gives you that information (see screenshot) - could this be helpful for you? So you can implement some phpcheck in the core? 3. - sory i dont understand witch templates do you mean?

#3 Updated by Andreas Kiessling 13 days ago

Hi René,

in the meantime, https://extensions.typo3.org/extension/webp/ might work for you.
It hooks into the generation of processed files, all you then need to configure is a webserver rewrite depending on the accept header. Integration was thus quite easy, but i did not enable / test it for user uploaded files, only for processed ones.
The author was also very quick to respond to bug reports.

HTH
Andreas

#4 Updated by Hannes Strangmeier 10 days ago

There are several ways to identify the IM/GM support, although some have some drawbacks.

One is:

convert --version | grep Delegates

This will ONLY give you the built-in delegates, which might not include webp (in case IM was not built with webp), even though it is shipped with an external delegate through delegate.xml

You can get those using:

convert -list delegate

Note that this is a bit more tricky to tackle down, since there can be multiple entries for webp.

With all the tests i have done so far, I came to the conclusion that using IM to convert images to webp is not as good as using cwebp. For most pictures I converted cwebp was about 3 times faster than imagemagick while the filesize was approximately the same (less than 1% difference in filesize).
Also note that ImageMagick in some cases falls back to a default-quality (I think 83% or something like that), when you do not define it yourself. cwebp on the other hand defaults to 75, but using cwebp directly does not rely on some layer (e.g. IM) in between when configuring it with parameters.
So the core should make sure to always set a quality to get similar results across different setups (e.g. use [GFX][jpg_quality] or introduce something similar for webp).

Note to phpinfo: This only tells you if the gdlib has webp-support. I am not sure where TYPO3 uses gd, but I guess in most cases IM/GM handles the images. So this does not tell you anything about IM/GM.

Having a full picturetag+webp support in the core would also be great in my point of view :)

#5 Updated by Hannes Strangmeier 7 days ago

Some more insights with a fresh test:

I installed a fresh VM with Ubuntu 18.04, which is shipped with ImageMagick 6.9.7-4 WITHOUT built-in webp-support:

convert --version
Version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org
Copyright: © 1999-2017 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP
Delegates (built-in): bzlib djvu fftw fontconfig freetype jbig jng jpeg lcms lqr ltdl lzma openexr pangocairo png tiff wmf x xml zlib

Anyway, you can use IM to convert files to webp after installing webp:

sudo apt-get install webp


ImageMagick has the corresponding delegates:
hstr@hstr-VirtualBox:~/testpics$ convert -list delegate  | grep webp
        png<= webp      "cwebp' -quiet %Q '%i' -o '%o" 
       webp =>          "dwebp' -pam '%i' -o '%o" 

I was not able to figure out how to define the quality within ImageMagick, since -quality and define webp:.. did not work and it always uses it's own default. Here's a quick example:

hstr@hstr-VirtualBox:~/testpics$ convert -quality 100 test.jpg test_im_100.webp
hstr@hstr-VirtualBox:~/testpics$ convert -quality 75 test.jpg test_im_75.webp

hstr@hstr-VirtualBox:~/testpics$ ls -al
total 1344
drwxr-xr-x  2 hstr hstr   4096 Jun 17 13:51 .
drwxr-xr-x 18 hstr hstr   4096 Jun 17 13:46 ..
-rw-r--r--  1 hstr hstr 296112 Jun 17 13:51 test_im_100.webp
-rw-r--r--  1 hstr hstr 296112 Jun 17 13:51 test_im_75.webp
-rw-r--r--  1 hstr hstr 768608 Jun 17 12:35 test.jpg

So let's just compare the sizes and time needed to create webp-files from now on:

ImageMagick took around 1.8 seconds:

hstr@hstr-VirtualBox:~/testpics$ time convert -quality 75 test.jpg test_im_75.webp

real    0m1,894s
user    0m1,820s
sys     0m0,024s

While cwebp took only 0.6 seconds:

hstr@hstr-VirtualBox:~/testpics$ time cwebp test.jpg -q 75 -o test_cwebp_75.webp
Saving file 'test_cwebp_75.webp'
File:      test.jpg
Dimension: 2048 x 1536
Output:    296064 bytes Y-U-V-All-PSNR 38.59 43.30 45.03   39.78 dB
block count:  intra4: 9000
              intra16: 3288  (-> 26.76%)
              skipped block: 1092 (8.89%)
bytes used:  header:            258  (0.1%)
             mode-partition:  40946  (13.8%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       5%|      24%|      22%|      47%|   12288
      quantizer:  |      36 |      34 |      28 |      18 |
   filter level:  |      11 |       8 |      24 |      17 |

real    0m0,655s
user    0m0,539s
sys     0m0,012s

Filesize was basically the same:

hstr@hstr-VirtualBox:~/testpics$ ls -la
total 1636
drwxr-xr-x  2 hstr hstr   4096 Jun 17 13:57 .
drwxr-xr-x 18 hstr hstr   4096 Jun 17 13:46 ..
-rw-r--r--  1 hstr hstr 296064 Jun 17 13:57 test_cwebp_75.webp
-rw-r--r--  1 hstr hstr 296112 Jun 17 13:51 test_im_100.webp
-rw-r--r--  1 hstr hstr 296112 Jun 17 13:56 test_im_75.webp
-rw-r--r--  1 hstr hstr 768608 Jun 17 12:35 test.jpg

No errors were detected by webpinfo, so I assume both files are equally valid webp-files:

hstr@hstr-VirtualBox:~/testpics$ webpinfo test_im_75.webp test_cwebp_75.webp
File: test_im_75.webp
RIFF HEADER:
  File size: 296112
Chunk VP8  at offset     12, length 296100
  Width: 2048
  Height: 1536
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
No error detected.
File: test_cwebp_75.webp
RIFF HEADER:
  File size: 296064
Chunk VP8  at offset     12, length 296052
  Width: 2048
  Height: 1536
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
No error detected.

If anyone is interested in further investigation for the qualtiy-settings, this should be a good start:

https://imagemagick.org/script/command-line-options.php#quality

Note that 75 is the basic PNG-Quality and the delegates show that the input-format for webp is png, if I understand it correctly.

Nonetheless, speed is much faster using cwebp... and cwebp is needed for IM at least with a basic Ubuntu-installation, unless you want to compile IM by yourself. So my advise would be to use cwebp if accessible and IM, if TYPO3 can not access cwebp AND the delegates indicate that it is available (note: all delegates, not only built-in delegates).

I might be able to test built-in support within the next weeks.

#6 Updated by Hannes Strangmeier 7 days ago

after compiling imagemagick with built-in webp-support (and switchting to version 7), the time to generate webp-files is basically equal to cwebp:

hstr@hstr-VirtualBox:~/testpics$ time convert -quality 75 test.jpg test_im7.webp

real    0m0,653s
user    0m0,566s
sys     0m0,036s

hstr@hstr-VirtualBox:~/testpics$ ls -la
total 1932
drwxr-xr-x  2 hstr hstr   4096 Jun 17 15:31 .
drwxr-xr-x 18 hstr hstr   4096 Jun 17 15:33 ..
-rw-r--r--  1 hstr hstr 296064 Jun 17 13:57 test_cwebp_75.webp
-rw-r--r--  1 hstr hstr 296112 Jun 17 13:51 test_im_100.webp
-rw-r--r--  1 hstr hstr 296112 Jun 17 13:56 test_im_75.webp
-rw-r--r--  1 hstr hstr 299402 Jun 17 15:32 test_im7.webp
-rw-r--r--  1 hstr hstr 768608 Jun 17 12:35 test.jpg

If one wants to reproduce this, I compiled libwebp and imagemagick from scratch as described in step 1 and 2 here:

https://github.com/rosell-dk/webp-convert/wiki/Installing-Imagick-extension

Sidenote: With built-in webp-support it looks like you can set the quality in imagemagick using -quality

#7 Updated by Hannes Strangmeier 7 days ago

My personal conclusion so far:
Just define cwebp as a requirement, unless you want to dig through all the dependencies coming along with webp in imagemagick...

Also available in: Atom PDF