Touch your hand to teach you 360 degrees without dead Angle WebP ability detection

❝

As one of the most cost-effective image formats, WebP is widely used in Web applications, no matter e-commerce websites or image streaming websites, it can be seen. However, it is still not supported by some browsers. This article will help you clean up WebP capability detection in three ways.

❞

What is the WebP

WebP is an image format developed by Google that uses both lossy and lossless compression. It was first released on September 30, 2010 and can be used for a large number of photographic, translucent and graphic images on the web. The degree of WebP lossy compression is adjustable, so the user can freely trade off between file size and image quality. WebP typically compresses 30% more than JPEG and JPEG 2000 on average without sacrificing image quality. About WebP format compression experiment, can refer to WebP compared with PNG, JPG advantages? – Hahn’s answer – Zhihu’s answer will not be repeated in this article.

In addition to lossy and lossless forms, WebP also supports Alpha channels (images may have transparency), as well as Animation. At present, Youtube converts all image formats of “video preview” to WebP in browsers that support WebP format. For browsers that don’t support WebP, such as Safari, Youtube has eliminated the “video preview” feature altogether.

WebP has been around for 10 years, and the improvements in image performance are visible to the naked eye, but some browsers still don’t support it. Here’s the data from Caniuse. IE and MAC browsers still don’t support it. There may be some technical reasons, but more business reasons. So this article teaches you 360° WebP capability detection.

Plan a

In the first scheme, JavaScript scripts are used for detection. Modernizr is used here, which provides a large number of scripts for detecting browser capabilities. I’ve put the WebP capability detection script into gist, which you can download from WebP capability detection.js.

Execute this script in a browser. The latest version of Chrome adds webp, Webp-alpha, WebP-aniamtion, and Webp-Lossless classes to HTML tags. Safari adds a no-webp class, so we can just write something like this in our CSS.

.no-webp .cover {
  background-image: url('image.jpg');
}

.webp .cover {
 background-image: url('image.webp'); } Copy the code

Of course, you can do that if you’re using the IMG tag.

const [supportWebP, setSupportWebP] = useState(
  document.documentElement.classList.contains('webp'),
)

return <img src={supportWebP ? 'image.webp' : 'image.jpg'} alt="img" /> Copy the code

Modernizr has a more compatible script, and minify has a size of 1.2KB. The following code is relatively simple and can be used according to the actual situation. It returns a Boolean. You can Store the result in a Store or LocalStorage, or you can add a WebP logo to an HTML class like Modernizr does. Yancey-js-util: yancey-js-util: yancey-js-util: yancey-js-util: yancey-js-util: yancey-js-util: yancey-js-util: yancey-js-util: yancey-js-util

export const checkWebp = (a)= > {
  return (
    document
      .createElement('canvas')
      .toDataURL('image/webp')
 .indexOf('data:image/webp') = = =0  ) } Copy the code

Scheme 2

The second way is to use HTML5’s new “picture” tag. Like the “Audio” and “Video” tags, they can include a “source” tag that lets the browser choose the best format for rendering. This solution does not require JS code and performs better, but its disadvantages are obvious, that is, it cannot be applied to CSS background-image.

<picture>
  <source srcset="img/image.webp" type="image/webp" />
  <source srcset="img/image.jpg" type="image/jpeg" />
  <img src="img/image.jpg" alt="img" />
</picture>
Copy the code

Plan 3

Scenario 1, which can be applied to both “backgroud-image” and “img” tags, seems like a foolproof solution, but it relies on JavaScript. If the user prevents the browser from using JS scripts, or during the SSR server rendering phase (because these detection scripts involve DOM manipulation, which the server cannot do), scheme 1 is not ok.

In the first case, we can start with a no-js class for the HTML tag. After the DOM is loaded, we can execute the following script. If no-js is removed, then js is not blocked. Otherwise, the demotion is processed with the code shown below.

<style>
  .no-js .elementWithBackgroundImage {
    background-image: url('image.jpg');
  }
</style>
 <script>  document.documentElement.classList.remove('no-js') </script> Copy the code

For SSR scenarios, scheme 2 can ensure that all IMG tags can display the optimal results, but background-image is powerless. In this case, we can still use the power of the back end. In the ACCEPT field of the HTTP request header, we found the word image/webp, and the backend received the request, as long as the presence of image/webp is detected, it proves that the browser supports webP format. The back end tells the front end, “Your browser supports WebP,” and the problem is solved.

The following code is a real example from my blog. The project uses Next. Js for server rendering, and returns isSupportWebp to the front end using the getServerSideProps method to determine whether the front end is capable of displaying WebP images.

import React, { FC } from 'react'
import { GetServerSidePropsContext } from 'next'
import Layout from 'src/containers/Layout/Layout'
import HomeContainer from 'src/containers/Home/Home'

interface Props {  isSupportWebp: boolean }  // The front end gets props for WebP const Index: FC<Props> = ({ isSupportWebp }) = > {  return (  <Layout>  <HomeContainer isSupportWebp={isSupportWebp} />  </Layout>  ) }  // The backend determines whether the browser supports WebPexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {  return {  props: { isSupportWebp: ctx.req.headers.accept? .includes('image/webp'), },  } }  export default Index Copy the code

summary

Emmmm, nothing to conclude, or hope you browser big unified soon.

reference

• Using WebP Images

• What are the advantages of WebP over PNG and JPG?

• Explore WebP a few things