Otimizando a entrega de imagens do Blog. Blog do Estúdio Digital Bocca. Escrito por Gabriel Bertola Bocca

Hoje vou falar um pouco dos problemas que encontrei para entregar imagens de maneira rápida e otimizada para vários tamanhos de telas. Assim como das outras vezes, busquei usar o mínimo esforço pra entregar a melhor qualidade.

Isso é um Problema?

Estava muito feliz de ter finalmente conseguido terminar o layout do blog, na verdade, entreguei o mínimo possível pra conseguir exibir os textos. Além dos textos, precisa entregar pelo menos uma imagem, que é usada no topo da postagem e no card de resumo da Home.

Como estou gerando as imagens com IA, reforço novamente que é para empregar o menor esforço possível, procurei adaptar a entrega ao arquivo de imagem que eu tenho disponível.

Eu ainda estava com algumas dúvidas, eu poderia ter somente a imagem no maior tamanho e apenas redimensionar para um tamanho menor na Home. Na página do Post completo, a imagem já estaria cacheada no navegador.

Logo percebi que era uma péssima ideia, isso acabaria com a Home quando tivesse uma lista com vários Posts. Mesmo com apenas uma imagem, as métricas já indicavam um problema no tempo de carregamento.

Requisitos

Atualmente temos o seguinte cenário:

A imagem do card na Home tem uma largura máxima em telas maiores.
A imagem na página do Post tem uma altura máxima em telas pequenas, e outra altura máxima em telas maiores.

Outros pontos relacionados e também muito importantes para uma tomada de decisão:

O formato do arquivo não está impactando a entrega no momento.
Não indicar o tamanho da imagem está causando problemas no layout (Cumulative Layout Shift - CLS).

Pra fechar um escopo, vamos fazer os ajustes para entregar:

Uma imagem na largura máxima do card. Esse formato será usado nos cards da Home.
Uma imagem com altura de 300px para a página do Post exibida em telas menores.
Uma imagem com altura de 600px para a página do Post exibida em telas maiores.

Os problemas de CLS serão solucionados em outra etapa, acompanhado do ajuste no carregamento das fontes que também estão impactando nessas métricas.

Ferramentas

Para resolver esse problema, poderia usar algo como o sharp no backend e fazer a entrega das imagens no tamanho correto. Mas, podendo delegar esse serviço para um terceiro, preferi usar o ImageKit.

Implementação e Resultado

O ImageKit permite aplicar várias modificações na imagem passando parâmetros na URL. A documentação é bem completa e já conta com várias soluções para problemas conhecidos, do mais simples ao avançado.

Seguindo as instruções para uma solução mais fácil, adicionei esse cabeçalho no arquivo que contém o layout do blog para ativar os "client hints".

  <Head>
    <meta http-equiv="Accept-CH" content="Sec-CH-DPR, Sec-CH-Width, Sec-CH-Viewport-Width"/>
  </Head>

No Card exibido na Home que tem uma largura máxima adicionei alguns parâmetros na URL:

  <img src={`${image}?tr=w-766`} className="rounded-t-xl" />

image é o endereço original da imagem lá no ImageKit. ?tr=w-766 é o parâmetro de transformação da largura com 766px

Primeiro problema resolvido! As imagens da home já estão menores.

Para a imagem de dentro da página do Post alterei o código para o seguinte:

<picture>
  <source
    media="(min-width: 768px)"
    srcset={`${data.image}?tr=w-auto,h-600`}
    sizes="100vw"
  />
  <img
    src={`${data.image}?tr=w-auto,h-300`}
    alt={data.title}
    className="w-full h-[300px] md:h-[600px] object-cover object-center"
  />
</picture>

Uma tag <picture> com a imagem menor de fallback. <source> para a imagem que será usada em telas maiores. ?tr=w-auto,h-300 é o parâmetro enviado para o ImageKit com largura automática e a altura para cada tamanho de tela, que no nosso caso pode ser 300 ou 600.

Por enquanto essa foi uma boa solução que atendeu nossa necessidade imediata. No futuro vamos melhorar essa responsividade adicionando mais breakpoints e usar algumas transformações mais avançadas do ImageKit.