Support for webp images

  • I would like to see webp support for Woltlab Core.


    The WebP format reduces file size more than standard JPEG compression while maintaining similar or better image quality, the image format developed by Google for web graphics it's becoming very common...


    As of 2019, WEBP files are supported by most web browsers.

    Best Regards,
    Evandro (aka e.meneses)


    Help translate Woltlab: I'm in!

  • WoltLab certainly wants to support WebP, but only when Apple starts to support it in Safari, or when some kind of fallback mechanism is implemented (which is unlikely).


    See:

  • PHP has a function called imagecreatefromwebp that can be used to convert webp images to JPEG.


    Shouldn't be hard to implement that while uploading the file...

    PHP
    <?php
    // Load the WebP file
    $im = imagecreatefromwebp('./example.webp');
    // Convert it to a jpeg file with 100% quality
    imagejpeg($im, './example.jpeg', 100);
    imagedestroy($im);
    ?>

    Best Regards,
    Evandro (aka e.meneses)


    Help translate Woltlab: I'm in!

  • Matthias Schmidt

    Changed the title of the thread from “Suppor for webp images” to “Support for webp images”.
  • or when some kind of fallback mechanism is implemented

    You can use the picture-Element to add such support. You can then define different sources and at last an image-tag for example. So, if one of the sources isn't supported by a browser (e.g. webp in IE/Safari/...) it will be skipped.


    If a browser doesn't support picture-Element it will also fallback to the normal img.


    It could then look like this

    HTML
    <picture>
    <source srcset="image.webp" type="image/webp"> <!-- Skipped, if Browser doesn't support image/webp -->
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg"> <!-- fallback for browsers that don't support picture-tag -->
    </picture>

    Problem here is: You have to save webp AND jpeg-files, but regarding e.meneses post, you can deliver jpeg-images by converting them on request from the saved webp-file.

    So some images might load a little longer due to high server-load or larger images or something like this (don't know how imagejpeg works), but someone using Internet Explorer shouldn't notice that :P


    Adding a cache saving the images in jpg that were requested in last time should reduce loading speed and server-load too.


    ilou

  • PHP has a function called imagecreatefromwebp that can be used to convert webp images to JPEG.


    Shouldn't be hard to implement that while uploading the file...

    PHP
    <?php
    // Load the WebP file
    $im = imagecreatefromwebp('./example.webp');
    // Convert it to a jpeg file with 100% quality
    imagejpeg($im, './example.jpeg', 100);
    imagedestroy($im);
    ?>


    TinyImg already supports conversion from WebP to more common formats. It could also convert vice versa, but there's currently no proper way to manipulate the image output in order to add support for WebP images.


    I guess, there won't be any support before WSC 6.

  • The main issue is that serving different images types can currently only be performed in a backwards incompatible way. Using <picture> is an elegant, although incredibly verbose, solution. However, this would break existing CSS selectors in way too many cases that are beyond our control.


    Another "clever" approach is the srcset attribute, which would allow us to serve images to legacy browsers using src while providing a newer format with srcset. The only downside is that this doesn't allow for content type negotiation and Safari on iOS < 14 or macOS < 11 (Big Sur) faints if it sees webp.


    We do want to support newer formats and eventually migrate entirely to more efficient formats, but we do have to keep compatibility in mind. WoltLab Suite 5.4 will drop the compatibility with Internet Explorer 11, but unfortunately that doesn't help us here in any way, because Safari is holding us back. Looking at the historically adoption rate of iOS and macOS, we might see webp arriving after WoltLab Suite 5.4.

    Alexander Ebert
    Senior Developer WoltLab® GmbH