You can reduce the size of the image! Next-generation image format “WebP”
Next-generation image format “WebP”
Do you know “WebP”?
WebP is an image format developed by Google.
It has the characteristic that the size of the image can be reduced, and it can be said that it is a format that we would like to adopt to improve the speed of the page as an SEO measure.
This time, we would like to introduce “WebP”, which is called the next generation format.
■ What is WebP?
WebP is an image format developed by Google in the United States. The feature is that the image can be reduced in size, which is said to be “25 to 35% smaller than JPEG and PNG”.
Currently (as of July 2020), about 78% of browsers like Chrome, Edge, and Firefox support WebP, but Safari doesn’t support it yet.
For “Items for Enhancement” in Google Speed Insight, if you use next generation formats such as “JPEG 2000”, “JPEG XR” and “WebP”, the compression rate is higher than PNG and JPEG and the file can be deleted, so the read speed is also high. Goes up “.
■ Advantages of WebP
The advantage of using WebP, as I mentioned earlier, is that it can reduce the size of the image.
As the size decreases, the page display speed increases, which is also a measure of SEO. In other words, WebP is an image format intended to reduce display speed.
In addition to “JavaScript”, “lightening the size of the image” is important to improve the speed of the page, so WebP is a format that we would like to incorporate.
Another advantage is that the image file formats are unified.
■ Disadvantages of WebP
The downside to WebP is that some browsers are not yet supported.
One of the things that is not supported is Safari. Especially in Japan, where the proportion of iPhone is large, many people use Safari, so it is necessary to set an alternative image format.
■ Safari also supports WebP
As of July 2020, “WebP” is not compatible with Safari, an Apple browser. However, it was announced that it will be compatible with the PC version and the iOS version of Safari 14.
This is a welcome update in Japan, which has a large part of the iPhone.
■ Notes and HTML description method when using WebP
Most browsers support images in WebP format, but not 100% of browsers support WebP.
Therefore, for unsupported browsers, it is necessary to describe how to display another image as shown below.
<picture>
<source type = “image / webp” srcset = “example.png.webp”>
<img src = “example.png”>
</ picture>
example.png.webp specifies two image formats for an image, and if the image in example.png.webp cannot be displayed, it is specified to display example.png.
