Talvez você já conheça o conceito central da rede de fornecimento de conteúdo (CDN, na sigla em inglês): uma rede de servidores distribuídos, mas interconectados, que entregam recursos aos usuários de maneira rápida e eficiente. Quando é feito o upload de um arquivo em um provedor de CDN, uma cópia é criada nos outros nós da rede CDN em todo o mundo. Quando um usuário solicita um arquivo, os dados são enviados pelo nó geograficamente mais próximos desse usuário, reduzindo a latência. A natureza distribuída das CDNs também fornece redundância no caso de interrupções da rede ou falha do hardware, além de balanceamento de carga para mitigar picos no tráfego.
Uma CDN de imagem pode oferecer todos esses benefícios, com uma diferença principal: a capacidade de transformar e otimizar o conteúdo de uma imagem com base nas strings que o URL usou para acessá-la.
Um usuário vai fazer upload de uma imagem canônica de alta resolução para o provedor, que vai gerar um URL usado para acessá-la:
https://res.cloudinary.com/demo/image/upload/sample.jpg
Embora a sintaxe exata usada varie de um provedor para outro, no mínimo todas as CDNs de imagem permitem alterar as dimensões, a codificação e as configurações de compactação de uma imagem de origem. O Cloudinary, por exemplo,
executa o redimensionamento dinâmico de uma
imagem enviada usando as seguintes sintaxes: h_ seguido pela altura numérica em pixels, w_ seguido pela largura
e um valor c_ que permite especificar informações detalhadas sobre como a imagem precisa ser dimensionada ou cortada.
Qualquer número de transformações pode ser aplicado adicionando valores separados por vírgula ao URL, antes do nome do arquivo e da extensão.
Isso significa que a imagem enviada pode ser manipulada conforme necessário por meio do src do elemento img que a solicita.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
Na primeira vez que um usuário acessar o URL que contém essas transformações, uma nova versão da imagem dimensionada proporcionalmente para uma largura de 400 px (w_400) será gerada e enviada. Esse arquivo recém-criado é armazenado em cache no CDN para ser enviado
a qualquer usuário que solicite o mesmo URL, em vez de ser recriado sob demanda.
Embora não seja incomum que os provedores de CDN de imagens ofereçam kits de desenvolvimento de software
para facilitar o uso avançado e a integração com várias pilhas de tecnologia, esse padrão de URL previsível por si só permite transformar
facilmente um único arquivo enviado em um atributo srcset viável sem a necessidade de outras ferramentas de desenvolvimento:
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
Podemos especificar manualmente o nível de compactação que queremos usando o que agora deveria ser uma sintaxe conhecida: q_, abreviação
de "qualidade", seguida pela abreviação numérica para nível de compactação:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
No entanto, é raro você precisar incluir essas informações manualmente, graças a um conjunto de recursos extremamente eficientes fornecidos pela maioria das CDNs de imagem: compactação, codificação e negociação de conteúdo totalmente automáticas.
Compactação automatizada
O poder de computação de imagens que os CDNs têm à disposição significa que eles podem oferecer um recurso incrivelmente eficiente: analisar o conteúdo de uma imagem para determinar com base em algoritmos o nível de compactação ideal e as configurações de codificação, da mesma forma que você ajusta manualmente a compactação de cada uma das nossas imagens.
Esses algoritmos automatizam as decisões que você pode tomar para equilibrar o tamanho do arquivo e a qualidade perceptiva, analisando o conteúdo da imagem em busca de sinais mensuráveis de degradação e ajustando as configurações de compactação de acordo com isso. Com frequência, isso significa grandes reduções no tamanho do arquivo em comparação com a abordagem manual única para configurações de compactação.
Por mais complexo que possa parecer esse processo, a implementação não poderia ser muito mais simples: para a Cloudinary, adicionar q_auto a um
URL de imagem ativa este recurso:
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
Codificação automatizada e negociação de conteúdo
Ao receber uma solicitação de imagem, as CDNs de imagens determinam a codificação mais moderna compatível com o navegador por meio dos cabeçalhos HTTP enviados pelo navegador junto com as solicitações de recursos, especificamente o cabeçalho Accept. Esse cabeçalho indica as codificações que o navegador consegue entender, usando os mesmos
tipos de mídia que usaríamos para preencher o atributo type
do <source> de um elemento <picture>.
Por exemplo, adicionar o parâmetro f_auto à lista de transformações de imagem em um URL de recurso instrui explicitamente o Cloudinary a fornecer a codificação mais eficiente que o navegador conseguir entender:
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
Em seguida, o servidor gera uma versão da imagem com essa codificação e armazena em cache o resultado para todos os usuários subsequentes com o mesmo nível de suporte ao navegador. Essa resposta inclui um cabeçalho Content-Type
para informar explicitamente ao navegador sobre a codificação do arquivo, independentemente da extensão do arquivo. Mesmo que um usuário com um navegador moderno faça uma
solicitação de um arquivo com final .jpg, essa solicitação será acompanhada por um cabeçalho informando ao servidor que o AVIF é compatível. O servidor
vai enviar um arquivo codificado em AVIF com uma instrução explícita para tratá-lo como AVIF.
O resultado final é um processo que não apenas evita a criação de arquivos codificados alternadamente e de ajustar manualmente suas configurações de compactação
(ou manter um sistema que faz essas tarefas para você), mas também elimina a necessidade de usar <picture> e o atributo type para entregar esses arquivos
aos usuários com eficiência. Portanto, usar somente as sintaxes srcset e sizes ainda pode fornecer aos usuários imagens codificadas como, por exemplo, AVIF,
voltando ao WebP (ou JPEG-2000, somente para o Safari), voltando à codificação legada mais adequada.
As desvantagens de usar uma CDN de imagem são mais logísticas do que técnicas, sendo o custo a principal entre elas. Embora seja comum que CDNs de imagens ofereçam planos sem custo financeiro de recursos robustos para uso pessoal, a geração de recursos de imagem requer largura de banda e espaço de armazenamento para uploads, processamento no servidor para transformar imagens e mais espaço para os resultados de transformação em cache. Portanto, o uso avançado e os aplicativos de alto tráfego podem exigir um plano pago.