Eddie Osmani, no artigo “O preço do JavaScript em 2018 ”, deu uma ideia valiosa: o tempo necessário para processar um script de 200 KB de tamanho e para processar uma imagem com o mesmo tamanho varia significativamente. O fato é que, ao processar o código, o navegador precisa realizar um trabalho mais extenso do que na preparação para o uso de imagens. Aqui está o que o artigo diz sobre isso:Uma imagem JPEG precisa ser decodificada, rasterizada e exibida. E o pacote JS é necessário, se o considerarmos de maneira simplista, carregar, analisar, compilar, executar. De fato, o mecanismo precisa resolver outros problemas no processo de processamento do código JS. Em geral, deve-se ter em mente que muito mais recursos do sistema são gastos no processamento de código JavaScript, cujo tamanho, em bytes, é comparável ao tamanho de outros materiais.Essas palavras foram escritas em 2018, mas ainda são mais do que justas. É verdade que, dada a situação atual, a idéia aqui expressa é percebida hoje de maneira um pouco diferente.
Considerando que uma pandemia entrou em erupção no mundo agora, notei que minha conexão com a Internet se tornou instável. Felizmente, devido ao fato de a Internet ser protegida por excelentes especialistas que não conhecem a fadiga, a maior parte da Internet ainda funciona bem. Mas na Internet, algo está definitivamente acontecendo. Eu uso uma conexão de 100 Mbps, mas sinto que estou sentado em um modem 3G.Isso faz algumas alterações no raciocínio acima. O fato é que nossos dispositivos podem analisar e compilar JavaScript na mesma velocidade que eles poderiam fazer isso algumas semanas atrás. Mas agora os dados trafegam pelas redes mais lentamente. Como resultado, no momento é extremamente importante a quantidade de dados que representam um determinado recurso é transmitida pela rede quando esse recurso é carregado.E os sites geralmente têm muito mais que 200 KB de imagens. Uma página com vários megabytes de fotos geralmente é o caso. Muitos desenvolvedores (e eu também!), Via de regra, não pensam no tamanho dos materiais de mídia.Mas, o que é muito bom, otimizar as imagens usadas nas páginas da web não é tão difícil. Neste artigo, falaremos sobre como usar formatos gráficos modernos, como o WebP. As imagens salvas nesses formatos geralmente são 2-3 vezes menores do que aquelas em que os formatos antigos e conhecidos (como JPG e PNG) são usados por todos. O uso de novos formatos pode mudar seriamente a situação para melhor.Visão geral dos formatos gráficos modernos
Para melhorar o trabalho com gráficos da Web, podemos usar os três formatos a seguir:- JPEG 2000 é um formato que é uma versão aprimorada do JPG comum. Este formato foi desenvolvido em 1997, principalmente para uso no cinema e na medicina. Permite compactar imagens mais fortes que o JPEG, mas com menos artefatos.
- JPEG XR é um formato relacionado ao JPEG 2000. Foi desenvolvido pela Microsoft em 2009.
- WebP é um formato criado pelo Google em 2010 para a web. O principal objetivo de seu desenvolvimento era usar métodos avançados para otimizar imagens, a fim de reduzir o tamanho dos arquivos. WebP suporta transparência e até animação.
Aqui vamos falar principalmente sobre WebP. Nos formatos relacionados ao JPEG, discutiremos onde será levantada a questão da compatibilidade do navegador.Quanto você pode ganhar usando formatos gráficos alternativos?
Alguns meses atrás, usei a seguinte imagem em um material.A imagem usada em um materialconduzi alguns experimentos, considerando o uso dos formatos JPG e PNG para armazenar a imagem original. Otimizei as opções de imagem usando a imagemin para descobrir o que o WebP pode me dar em vez desses formatos "retro".Os resultados foram incríveis.Conduzi experimentos semelhantes com muitas imagens. Quase sempre acontecia que os arquivos WebP eram 30 a 70% menores do que as versões otimizadas de arquivos gráficos de outros formatos.Isso pode levantar a questão de como a conversão para WebP pode afetar imagens SVG. Eu não conduzi tais experimentos com SVG. SVG é um formato vetorial. Isso significa que as imagens nele são construídas com base em instruções matemáticas, e não com base em informações sobre a cor de pixels individuais. Converter uma imagem SVG em WebP significa abrir mão da capacidade de dimensionar imagens SVG, o que, acredito, é inaceitável. Além disso, suspeito que essa conversão, na maioria dos casos, leve a um aumento no tamanho dos arquivos.Compatibilidade do navegador
Para saber como certos formatos gráficos são suportados pelos navegadores, consulte caniuse.com .O formato WebP é suportado pela maioria dos navegadores.Suporte ao formato WebP pelos navegadoresEmbora o nível de suporte para esse formato seja muito alto, é muito ruim que o Safari e o Internet Explorer não o suportem.E aqui estão as informações sobre o suporte ao JPEG 2000.Suporte ao formato JPEG 2000 pelos navegadoresEntão, agora o Safari está do nosso lado, mas o Internet Explorer está novamente sem trabalho.E o JPEG XR?Suporte ao formato JPEG XR pelos navegadoresE aqui o Internet Explorer se destacou. Como resultado, usando esses três formatos, substituímos todos os navegadores existentes (o KaiOS Browser não suporta nenhum desses formatos e peço desculpas por ignorá-lo, mas eu nem sei qual é o navegador. )Agora vamos falar sobre como escolher diferentes formatos de imagem projetados para diferentes navegadores.O elemento de imagem para o resgate
O HTML possui dois elementos para gerar imagens. O primeiro pode ser comparado a uma estrela pop internacional como Madonna. É img. E a segunda é como uma nova banda, conhecida apenas em círculos estreitos de amantes da música. Este é um elemento picture.O elemento pictureapareceu em HTML muito mais tarde que img. O principal objetivo desse novo elemento é permitir que os desenvolvedores baixem vários recursos gráficos, dependendo da resolução da tela ou se o navegador suporta um determinado formato gráfico.Aqui está a aparência do código HTML que usa o elemento picture:<picture>
<source srcset="/images/cereal-box.webp" type="image/webp" />
<source srcset="/images/cereal-box.jp2" type="image/jp2" />
<img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>
Um elemento picturepode incluir muitos elementos filho sourcee um elemento img. O navegador analisa sequencialmente esses elementos, selecionando, com base no type(s media) atributo (s ), um deles que pode usá-lo. Quando esse elemento é encontrado, o navegador descobre o endereço da imagem usando o atributo srcsete exibe essa imagem usando o elemento img.O atributo srcsettem capacidades muito maiores do que o usual src, mas, felizmente, podemos considerá-lo como um análogo src. Em geral, os elementos sourcesão algo como configurações que correspondem a imagens diferentes. A imgimagem que melhor corresponde ao ambiente em que a página é exibida está incluída.No Chrome, por exemplo, após o processamento da marcação acima, o navegador chegará a algo mais ou menos equivalente ao seguinte código:<picture>
<img src="/images/cereal-box.webp" />
</picture>
Usar um conjunto de elementos consecutivos sourcesignifica que pelo menos um deles será adequado em cada navegador. Portanto, a maioria dos navegadores usa uma imagem webp, o Safari carrega uma imagem jp2, ou seja, uma imagem jxr.É apropriado lembrar que o Internet Explorer não suporta o elemento picture. Este item é muito novo para este navegador. Mas, apesar disso, o fragmento de marcação acima no IE funcionará conforme o esperado.O fato é que, quando o navegador se depara com um elemento desconhecido, ele o considera como um elemento div. Como resultado, ao analisar nosso código, o IE vê muitos elementos div, além de uma tag<img>que contém o caminho para a imagem jxr. E esse é o formato que o Internet Explorer suporta.Alternativa simplificada
O fragmento de código acima é extremamente bom, pois permite o uso de formatos gráficos modernos em todos os navegadores atuais. Mas o uso desse código é baseado na suposição da existência daquelas imagens às quais ele possui links.Se você mesmo criar essas imagens - precisará investir muito trabalho manual. Se você os gerar automaticamente, isso poderá aumentar significativamente o tempo de construção do projeto. O processamento gráfico, como você sabe, torna-se um processo muito lento quando se trata de muitas imagens.Apenas muito poucos visitantes do meu blog usam o Internet Explorer (nos últimos 7 dias, apenas 3 pessoas com o IE tentaram visualizá-lo, o que representou 0,02% do tráfego). Portanto, decidi usar uma versão simplificada da solução acima:<picture>
<source srcset="/images/cereal-box.webp" />
<img src="/images/cereal-box.jpg" />
</picture>
Dou uma imagem compacta do webp para os navegadores que suportam esse formato (Chrome, Firefox, Edge) e para os navegadores que não suportam esse formato (IE, Safari), ofereço um legado do passado - uma imagem jpeg.Do meu ponto de vista, este é um exemplo de melhoria progressiva. O projeto permanece operacional em navegadores mais antigos, embora o carregamento de imagens demore mais. Este é um compromisso que me convém. (É verdade, espero que o suporte à WebP apareça em breve também nos navegadores da Apple).Verificando a integridade da solução
As ferramentas do desenvolvedor sempre assumem que a imagem contém o que foi originalmente gravado no atributo srctag img. Se você verificar o item usando a guia Elements, poderá ver que a página está usando uma imagem jpg.Para verificar a operacionalidade de tudo isso, é melhor, como me parece, clicar com o botão direito do mouse na imagem e selecionar o item …No Chrome quando o comando é executado, o sistema deve oferecer o salvamento do arquivo com a extensão .webp. Mas no Safari será um arquivo jpeg.Para descobrir exatamente qual arquivo gráfico foi recebido do servidor quando a página foi carregada, você pode consultar a barra de ferramentas do desenvolvedor Network.Converta arquivos de imagem para o formato WebP
O Google criou um conjunto de ferramentas destinadas a trabalhar com arquivos webp. Uma dessas ferramentas é chamada cwebp . Permite converter arquivos gráficos de outros formatos em WebP.Se você estiver usando o MacOS, poderá instalar este kit de ferramentas usando o Homebrew:brew install webp
Em outras plataformas, acredito que será necessário fazer o download do pacote libwebp apropriado do repositório.Depois de instalar as ferramentas, você pode usá-las assim:cwebp -q 80 cereal.png -o cereal.webp
Considere este comando:- O sinalizador
-q 80permite definir a qualidade da imagem. Seu valor varia de 1 (pior qualidade) a 100 (melhor). Você pode experimentar com valores diferentes. Descobri que é melhor perguntar algo na região de 70 a 80. - O nome do arquivo
cereal.jpgé a imagem original que precisa ser convertida em webp. - A construção
-o cereal.webpdefine o caminho para o arquivo de saída.
Ninguém quer perder tempo digitando esses comandos manualmente. Felizmente, esta tarefa pode ser automatizada.Usando formatos de imagem modernos em aplicativos React
Um componente é uma ótima maneira de ignorar algumas das esquisitices do elemento <picture>. Eu uso componentes React para isso. Na minha opinião, é muito conveniente. Aqui está o que parece:const ImgWithFallback = ({
src,
fallback,
type = 'image/webp',
...delegated
}) => {
return (
<picture>
<source srcSet={src} type={type} />
<img src={fallback} {...delegated} />
</picture>
);
};
O uso do componente é ImgWithFallbackmuito semelhante ao trabalho com uma tag comum img:<ImgWithFallback
src="/images/cereal.webp"
fallback="/images/cereal.png"
alt="A photo showing the expiration date on a box of Lucky Charms"
/>
O uso de formatos gráficos modernos com componentes estilizados
Se você usa bibliotecas styled-componentsou emotionpode ser usado para design de imagem especial:const FancyImg = styled.img`
whatever: stuff;
`
O bom é que ele funciona com o nosso componente ImgWithFallback. Você pode envolvê-lo no invólucro apropriado, como qualquer outro componente:const FancyImg = styled(ImgWithFallback)`
whatever: stuff;
`
A razão para a operacionalidade desse projeto é como a estrutura auxiliar funciona exatamente styled. Ele gera uma classe e a incorpora na folha de estilo do documento. Em seguida, o nome da classe gerada é passado para o componente como uma propriedade:<ImgWithFallback className="sc-some-generated-thing" />
Delegamos todas as propriedades à tag filho <img>, como resultado, os estilos corretos são aplicados à imagem, como geralmente acontece. Tudo funciona exatamente como você poderia esperar.Usando o pacote gatsby-image
Se você estiver usando o Gatsby, saiba que o pacote gatsby-image, quando usado normalmente, já usa muitas otimizações de imagem. Isso inclui a conversão de imagens para o formato webp (embora, para isso, você precise ativar a opção apropriada).O pacote gatsby-imagenão afirma ser um substituto img. Seu uso pode não ser tão simples, seus mecanismos internos podem levar a surpresas que dificultam a vida do desenvolvedor.Se você está interessado neste pacote, consulte a documentação .Contras de WebP
A única desvantagem real do webp que eu consegui encontrar é que é muito inconveniente trabalhar com arquivos desse formato.A maioria dos pacotes de imagens da área de trabalho ainda não é compatível. Por exemplo, não consigo abrir arquivos webp na visualização no MacOS. Isso significa, digamos que, se eu salvar uma imagem webp de uma página da web, não poderei visualizá-la no meu computador!Converter arquivos webp em arquivos jpeg é um processo bastante simples. Na Internet, você pode encontrar muitos serviços gratuitos que realizam essa conversão. Mas, novamente, isso não é tão conveniente quanto trabalhar com formatos gráficos tradicionais. Se o seu site oferecer aos usuários o download de arquivos gráficos, você pode decidir que não precisa mudar para o webp.Sumário
Eu realmente gosto do fato de que usando o webp fui capaz de reduzir o tamanho das imagens no meu blog em cerca de 50%. Além do fato de que, em nossos tempos difíceis, isso melhora a experiência do usuário em trabalhar com ele, também espero que isso me permita economizar um pouco em pagar pelo tráfego.Obviamente, a idéia de converter manualmente arquivos de imagem para o formato webp parece bastante impraticável. Já estou estudando a questão de como converter automaticamente arquivos jpg e png para esse formato. Idealmente, esse processo deve ocorrer completamente despercebido pelo desenvolvedor, durante a montagem do site.Os criadores de projetos da web geralmente não estão particularmente interessados nos recursos do uso de novos formatos de imagem. Mas acredito que entender esse problema é muito útil. Afinal, o uso do WebP é provavelmente a maneira mais fácil de reduzir o tamanho do seu projeto da web em centenas de kilobytes.Queridos leitores! Você usa o formato WebP?