webp image format is 33% more efficient

here's a video from the google chrome developers on the topic of the webp image format, which can now replace animated gifs as well as png and jpg. it is used on youtube and other sites - currently reducing image loads by around 33%. would be great to have this used in elgg.

https://www.youtube.com/watch?v=rqXMwLbYEE4

  • I am developing a new elgg plugin. When I get time I will look at the webp library and see if I can incorporate it in my new plugin. Thanks for sharing the link for webp.

    :-) comment posted by a cellphone.

  • So far support is limited to Chrome, Opera and Android: http://caniuse.com/webp

    Also on PHP end that will mean requiring version 5.5 (which is good but locks out ppl using retro environments).

  • @Tom - ura welcome.

    @Pawel - the video explains that fallback code is required for non webP browsers.
    in my experience, using more recent versions of php has only brought bonuses, with no problems... maybe a fallback for old php versions would be simple to code too.
     

  • At the moment i think facebook and other major online companies who are trying to use WebP are working around the webp by dectecting user's browsers by using the css for example:


    background-image: image("elgg_is_good.WebP", "elgg_is_good.png", "elgg_is_good.gif");

    which Simply means: telling the browser to go through the list of images "elgg_is_good" and get the first image that the browser can use or show the image to the user.

    If the user browser doesn’t support WebP image, the browser will still  download ‘elgg_is_good.webp’ and attempt to decode or unzip the ‘elgg_is_good.WebP’ image  before the browser will fallback to the PNG” or GIF”  common image formats.

    If the browsers  supports the WebP image format'  the WebP background image is shown to the user. Hence a smaller image "WebP file size is served or shown to the user! WHY? Webp  image is heavily compressed  which means that processing WebP will requires more CPU to decode or unzip than most commonly known image formats e.g -  PNG” or GIF” image formats.


    My only concern is :-   if a user is using mobile device  browser and the device is connected to WiFi, hotspots or through other forms of wireless connections and the little poor user's mobile device is  "not plugged in" or connected to any power source to recharge the little hand held device, phone or mobilephone, and then the user is accessing an elgg site  which is --- supporting WebP images format and the user's mobile divice's browser choose a PNG or JPG file format which is larger in size as compared to WebP in order to save the mobile's CPU cycles -- The user's hand held device will be forced or restricted to use WebP image format by default. Why? The webp specifications require browsers to use the first image on the css list which the mobile device can use as a background image. -- which means, the website owner will save his bank account or money "by using less bandwidth, reasonable low hosting costs, and less server CPU cycles " by sending a smaller size of image format "WebP" to the user, then the user's device will end up using more CPU cycles to decode the WebP image before showing webp to the user! Soon the mobile device users will start noticing that when they are using their mobile devices to load pictures with extension .WebP, their batteries gets hotter and then soon dies faster than when they are visiting a "WebP" based website than other websites which do not support WebP image formats.

    That is why most Facebook users are mad because WebP image file extension at the moment is not user friendly. Hope major online companies like Facebook can learn not to repeat major mistakes that were made many years ago by giant online companies of those times e.g  AOL!  For those who were not born by then or were born a few years ago, here is what i mean; AOL used to use a file format called ART (file extension ".art") which means, an image that has been highly compressed just like WebP image format. The  ART format was designed to make serving images or pictures quick  to download  on  slower dialup connections that were common and normal when i was young and also save bandwidth! Later this backfired!  and the rest is history!

    In those old good days, i can remember most browsers were not supporting ART file format. Microsoft was the most common browser that supported the the ART format then later the internet Explorer browsers started crashing and having other issues with AOL images and sooner than later, Microsoft stopped supporting ART file formats. In those days when Microsoft was the king of the jungle, AOL found it hard to survive and had to finally succumbed to its own ART file format illness or madness!

    Those were good old days when the internet was just a baby and the word app was meant only for job application forms but not: an abbreviation - App for electronic devices or app store and so on and so on!

    Anyway, the WebP file format might be a good idea to try out and see what the future hold for it.

  • I have no mercy for the old software and lifetime of some PHP versions is just ridiculous. That's the result of putting too much pressure on BC instead of forcing users (mostly hosting providers) to do trivial upgrades. We'd probably code on COBOL if we didn't move forward ;-)

    Somehow I missed info about requiring fallback.

    Anyway, while optimizing is fun and all, I wouldn't expect visible load reduction on Elgg site. Serving static media is the easiest part on web server side. For the users with crappy connection that could be some benefit, but definitely not something clearly visible and far below 33% overall (you optimize very specific asset type).

    Just saying, that's cool stuff of course, but I doubt that's good ROI for most of the Elgg coders considering necessity for handling fallbacks.

  • @ Paweł Sroka, I agree with your thoughts. When it comes to serving contents images, the content images like video and other file formats e.g mp4 and webm formats do not have CSS background images.

    Most of the content images in  Image elements do not allow fallbacks which will mean, WebP library can not be used to serve WebP file format when the user is viewing a video file format.

    I will be experimenting with the WebP library and see how it goes.

  • Thanks for sharing this link ura for compressing the image upto 33% for webp.

  • You just need to install mod_pagespeed (available for apache and nginx) and among other stuff it will detect browsers and send them webp if they can handle (Chrome Opera Android) So there is not much to do at the moment. :)

Performance and Scalability

Performance and Scalability

If you've got a need for speed, this group is for you.