Google has developed a new image format called WebP, that promises smaller file size at equivalent image quality. But not all browsers support it.
Luckily, there is also the new picture element, that can be used to serve the correct image to browsers. Inside the
picture element you add a
source element with the WebP media type. As fallback, you serve an image that is supported by all browsers (jpg, png, gif). Browsers that do not support the picture element, will ignore the
source element and use the
img element instead.
<picture> <source srcset="image.webp" type="image/webp" /> <img src="image.jpg" /> </picture>
Usually WebP has a smaller file size, but that is not always the case. So you should decide on a per image basis, if you want to use it.