Eric Portis se junta a mim para mergulhar no mundo das imagens responsivas.
Começamos com o básico. Imagens responsivas são especificamente imagens em HTML e existem devido ao desejo de melhor desempenho. As imagens são provavelmente o maior culpado no peso geral dos sites. Se pudermos evitar o envio de muitos pixels pela rede, devemos. Afinal, uma tela com apenas 720 pixels de largura não precisa de uma imagem de 2.000 pixels de largura, mesmo que seja uma tela 2x.
O problema é que os navegadores são realmente agressivos no download de recursos como imagens. Isso é bom, porque é por isso que a web (pode ser) tão rápida quanto é. Mas também significa que precisamos fornecer um monte de informações sobre nossas imagens diretamente no HTML. Um navegador não pode simplesmente saber o tamanho de uma imagem? Claro que pode, depois de baixá-lo. O navegador não sabe o tamanho da imagem que será exibida na página? Claro que pode, depois de baixar todo o CSS e fazer o layout. A sintaxe de imagens responsivas tenta se antecipar a tudo isso, fornecendo essas informações diretamente na sintaxe. Descobrir essa sintaxe é complicado! Há srcset, sizese o elemento, e há uma tonelada para envolver sua mente em torno de lá.
Fica ainda mais complicado.
A sintaxe que você precisa construir é baseada em ter várias cópias dessa imagem nas quais construir a sintaxe. Como você os faz? Quantos você deve fazer? Que tamanho eles deveriam ter?
Felizmente, há algumas ferramentas automatizadas surgindo em torno das imagens responsivas. WordPress foi um jogador inicial. Fora da caixa, o WordPress criará várias versões das imagens que você enviar e produzirá srcsetsintaxe útil . Mas você pode fazer muito melhor. Você pode fornecer um sizesatributo que realmente corresponda ao que seu tema está fazendo e como ele está dimensionando essas imagens.
Além disso, o WordPress não usa nenhuma inteligência especial para criar várias cópias das imagens que você carrega. Mas, poderia. Uma ferramenta como o gerador de ponto de interrupção de imagem responsivo usa alguma inteligência para descobrir quantas imagens diferentes você pode fazer, para que possa encontrar um equilíbrio entre ter perto da imagem perfeita para o trabalho e não precisar fazer centenas ou milhares de cópias de isto. Essa ferramenta possui uma API!
Fica ainda mais complicado.
Navegadores diferentes suportam formatos de imagem diferentes. Por exemplo, WebP. É possível obter economia de desempenho servindo o formato de imagem certo para o navegador certo. A sintaxe de imagens responsivas pode ajudar com isso, mas complica a sintaxe. Muitos formatos de imagem também têm uma noção de qualidade. Em que qualidade você salva essas cópias múltiplas?
Neste ponto, é um bom momento para mencionar Cloudinary. Eu o tenho integrado agora no CSS-Tricks, e ele ajuda muito com essas coisas. Devo mencionar que sou um cliente pagante da Cloudinary e este screencast não foi patrocinado, mas a Cloudinary patrocinou CSS-Tricks na forma de duas postagens patrocinadas altamente relacionadas:
- Imagens responsivas em WordPress com Cloudinary, Parte 1
- Imagens responsivas em WordPress com Cloudinary, Parte 2
Resumindo, é assim que tudo funciona no CSS-Tricks agora:
- Eu envio imagens como sempre faria com o WordPress.
- Em vez das
srcsetinformações sendo geradas com WordPress, são geradas por esta API mais inteligente. - A imagem também é enviada para Cloudinary.
- Quando o WordPress filtra e produz o HTML para as imagens, todos os dados bons
srcset(e personalizadossizes) são aplicados. O URL aponta para URLs Cloudinary. - O URL do Cloudinary usa a capacidade do Cloudinary de ajustar automaticamente o formato e a qualidade (usando sua tecnologia sofisticada) para garantir que as coisas sejam as melhores possíveis para o navegador específico que está solicitando a imagem.
- Imagens antigas que não foram enviadas para Cloudinary originalmente ainda se beneficiam de todos os benefícios da Cloudinary. Eles não têm
srcsetdados tão inteligentes , mas ainda usam o URL de “busca”, o que significa que podem se beneficiar da formatação e qualidade automáticas (o que provavelmente é uma melhoria de desempenho decente, de qualquer maneira).
Resumindo, não estou apenas usando imagens responsivas aqui no CSS-Tricks para ajudar no desempenho, a integração do Cloudinary aumenta seriamente esse jogo.
Também estou feliz que esta não seja uma dependência difícil. Se o plugin Cloudinary for desligado, tudo volta às imagens responsivas normais do WordPress.