Detecting WebP support

by

This is my solution – is taking around 6ms and I’m considering WebP is only a feature for a modern browser. Uses a different approach using canvas.toDataUrl() function instead of image as the way to detect the feature:

function support_format_webp()
{
 var elem = document.createElement('canvas');

 if (!!(elem.getContext && elem.getContext('2d')))
 {
  // was able or not to get WebP representation
  return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
 }
 else
 {
  // very old browser like IE 8, canvas not supported
  return false;
 }
}

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. how to proportionally scale a div with images inside?
  3. Programmatically change the src of an img tag
  4. Render HTML to an image
  5. Resize image with javascript canvas (smoothly)
  6. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  7. execute function after complete page load [duplicate]
  8. How to silently hide “Image not found” icon when src source image is not found
  9. Dynamically resizing Image-maps and images
  10. How to save a base64 image to user’s disk using JavaScript?
  11. How to display image with JavaScript?
  12. Can I get image from canvas element and use it in img src tag?
  13. Disable dragging an image from an HTML page
  14. How do image preloaders work?
  15. Adding images to an HTML document with JavaScript
  16. Load image from url and draw to HTML5 Canvas
  17. Make image fill div completely without stretching
  18. img onload doesn’t work well in IE7
  19. How to download a base64-encoded image?
  20. JavaScript loading progress of an image
  21. Change image in HTML page every few seconds
  22. Is there a way to load images to user’s cache asynchronously?
  23. JavaScript: Get image dimensions
  24. Sort by image resolution in gallery
  25. Is it necessary to set onload function before setting src for an image object?
  26. How much data / information can we save / store in a QR code?
  27. How to bind img src to data in Vue
  28. Center an Image vertically and horizontally using CSS
  29. canvas- Cropping images in different shapes
  30. Using base64-encoded images with HtmlService in Apps Script

Leave a Comment