javascript – What are available next-gen formats?

javascript – What are available next-gen formats?

Use WebP, and fall back to jpg in browsers that do not support WebP, using the <picture> tag.

See this guide on CSS-tricks :

<picture>
  <source srcset=img/awesomeWebPImage.webp type=image/webp>
  <source srcset=img/creakyOldJPEG.jpg type=image/jpeg> 
  <img src=img/creakyOldJPEG.jpg alt=Alt Text!>
</picture>

Also, BPG kicks pretty much every other formats a** because its basically the super-efficient x265 video codec, adapted for still images. But it requires a JS polyfill because it isnt supported by any browser.

So, what are the available formats for this?

Taken from the web.dev article on next gen formats

JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

As WebP has the most browser compatibility (at 86%) I would only bother with that (especially as Safari was the only reason to use JPEG2000 and they are now starting to support WebP, JPEGXR is useful if you need high performance in IE….so basically not useful at all! hehe) and serve jpeg elsewhere.

And is there any way or gem available for converting jpg, png formats to next-gen formats in Rails?

The webp-ffi gem seems to be popular for doing conversions to WebP in Ruby.

Displaying images cross browser

You can either use the <picture> element and let the browser decide which image to use, or….

Or in javascript?

You could use JavaScript to see if the browser supports WebP and swap out the URLs dynamically. I would only do this if you are lazy loading the images and are using JavaScript anyway.

var supportswebP = false;

supportsWebPFunction = function () {
    var WebP = new Image();
    WebP.onload = WebP.onerror = function () {
        if (WebP.height == 2) {
            supportswebP = true;
            // or call your function to change the URLs here etc.
        }
    };
    WebP.src = data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA;
}

supportsWebPFunction();

javascript – What are available next-gen formats?

Leave a Reply

Your email address will not be published.