Forum Discussion

NEttio's avatar
NEttio
Community Member
2 years ago

WebP support in Storyline to lower carbon footprint of training

Can I ask when .webp image files will be able to be used in Storyline instead of .jpg, .gif and .png? We currently can't import them into Storyline.

It's really important, as using .webp images can reduce the file size by over 50% - really important as we try and lower the carbon footprint of websites and subsequently Storyline training.

Webp files are supported across all major browsers:
https://caniuse.com/webp

  • SBP_Inc's avatar
    SBP_Inc
    Community Member

    Great feature ask, and I would welcome WebP support in Articulate too as more clients are adopting this new format. I believe you can request features officially here.

  • NEttio's avatar
    NEttio
    Community Member

    Thanks Brian. I;ve put a request in.

    I am a web developer as well as a Storyline user, and I've just had to NOT use Storyline for a project as the client (who has quite environmental concerns) wanted any imagery used to be something more eco-friendly than jpg and png. I have had to build this project using HTML and PHP directly, which is a shame.

    For the record, using webp image formats rather than jpg and png can leading to file size savings of over 50%.

  • NEttio's avatar
    NEttio
    Community Member

    I just ran a search for avif images on the Articulate forums and there's not one mention of the topic on here.

    Avif is a file format similar to webp in that it can lead to really impressively low file sizes with equitable lossiness as jpg/png, but isn't _quite_ as popular/supported as webp at the moment.

    Here are the browser support results for both formats:
    https://caniuse.com/webp
    https://caniuse.com/avif

  • Using compression techniques like in TinyPNG ( https://tinypng.com/ ) compresses any files 2 to 4 times...so for sure as good a compression as WebP. If WebP and WebM are a must then maybe Lectora will fit the bill as with that you now can directly import and use WebP and WebM files. WebM for sure is really great as that will allow for transparant movies.

  • NEttio's avatar
    NEttio
    Community Member

    TinyPNG is certainly good, and for an automated tool it's brilliant.

    I found I could shave some more off PNGs when using PhotoShop's webp WebPShop plugin (sadly no native support for webp in PhotoShop as yet, but the plugin is pretty good).

    A simple comparison of a normal then a transparent image saved as webp in PhotoShop then via TinyPNG yielded savings of ~10% to 20%.

    YMMV.

    Be interesting to see how it fared against different images.

    • ZacharyGuidry's avatar
      ZacharyGuidry
      Community Member

      WebP support is built into Photoshop now. To create one, go to File -> Save a Copy. And choose Webp format.

      I still use the WebPShop plugin since it has a "preview" of the compression where Photoshop's native tool does not.

      I too am looking forward to our modern image compression formats. I have to give Articulate credit for adding .SVG to Storyline and that was a great move!