admin abril 16, 2020 0 avaliação

O formato de imagem WEBP surgiu com o intuito de otimizar imagens e deixar os sites mais veloz e leves. A imagem WEBP chega a ser 10x mais otimizado que uma imagem jpg, png e gif.

O problema desse novo formato é que ele não é aceito em todos os navegadores e plataformas, principalmente nos celulares iphone no navegador safari.

Mas existe uma solução html que você pode colocar a imagem WEBP para os navegadores aceitos e uma imagem jpg,png,gif para os navegadores incompatíveis com o formato WEBP

Código 

<picture>
    <source type="image/webp"  srcset="src/images/very-large/bike.webp">
    <source type="image/png"  srcset="src/images/very-large/bike.png">
    <img src="src/images/bike-2003909.png" >
</picture>

A tag utilizada é <picture> dentro dela pode colocar os dois formatos disponíveis na tag source

Dentro do source coloca o tipo de imagem em type=”image/png” e o endereço da imagem em srcset=”src/images/very-large/bike.png”

Abaixo coloca a imagem principal e depois fecha a tag picture

Responder