Você já deve estar familiarizado com o conceito central de uma rede de fornecimento de conteúdo (CDN): uma rede de redes distribuídas, mas interconectadas que enviam recursos aos usuários com rapidez e eficiência. Quando um arquivo é enviado para um provedor de CDN, uma cópia é criada nos outros nós da rede de CDN em todo o mundo. Quando um usuário solicita um arquivo, os dados são enviados geograficamente pelo nó mais perto desse usuário, reduzindo a latência. A natureza distribuída das CDNs também oferece redundância em caso de interrupções de rede ou falhas de hardware e balanceamento de carga para mitigar picos de tráfego.
Uma CDN de imagem pode fornecer todos esses benefícios, com uma diferença fundamental: 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 gera 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 a origem
configurações de dimensões, codificação e compactação da imagem. Cloudinary, por exemplo,
executa o redimensionamento dinâmico de um
upload da imagem 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 deve ser redimensionada 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,
o que significa que a imagem enviada pode ser manipulada conforme necessário pelo 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 visitar o URL que contém essas transformações, uma nova versão da imagem será dimensionada proporcionalmente para um
largura de 400 px (w_400) é gerada e enviada. Esse arquivo recém-criado é armazenado em cache na CDN para ser enviado
para qualquer usuário que solicite o mesmo URL, e não recriado sob demanda.
Embora não seja incomum que os provedores de CDN de imagem ofereçam kits de desenvolvimento de software
para facilitar o uso avançado e a integração com vários conjuntos de tecnologia, esse padrão de URL previsível nos permite facilmente
transforme um único arquivo enviado em um atributo srcset viável sem a necessidade de qualquer outra ferramenta 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 desejado usando uma sintaxe familiar: q_, abreviação
em "qualidade", seguida pela abreviação numérica para o nível de compactação:
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
Graças a um conjunto de recursos incrivelmente avançados, é raro você precisar incluir essas informações manualmente. oferecidos 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 que as CDNs de imagem têm à sua disposição significa que eles podem oferecer um recurso incrivelmente poderoso: a análise de dados o conteúdo de uma imagem para determinar, por meio de algoritmos, o nível de compactação e as configurações de codificação ideais, assim como você ou eu ajustar manualmente a compactação de cada uma das imagens.
Esses algoritmos automatizam as decisões que você pode tomar para equilibrar o tamanho do arquivo e a qualidade perceptiva, analisar o conteúdo da imagem sinais mensuráveis de degradação e ajustando as configurações de compactação adequadamente. Isso costuma significar uma enorme redução no arquivo em comparação com a abordagem manual universal para configurações de compactação.
Por mais complexo que esse processo pareça, a implementação não poderia ser muito mais simples: para o Cloudinary, a adição de q_auto em uma
URL da 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 por uma imagem, as CDNs de imagem determinam a codificação mais moderna que o navegador aceita, por meio do
Cabeçalhos HTTP enviados pelo navegador junto com solicitações de recursos, especificamente,
o cabeçalho Accept. Esse cabeçalho indica as codificações que o navegador é capaz de entender, usando a mesma
tipos de mídia que usaríamos para preencher type
atributo 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 informa explicitamente ao Cloudinary que
fornecer a codificação mais eficiente que o navegador é capaz de 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 a mesma
nível de compatibilidade com o navegador. Essa resposta inclui um cabeçalho Content-Type.
para informar explicitamente o 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 terminado em .jpg, essa solicitação será acompanhada por um cabeçalho informando ao servidor que o AVIF é compatível, e
enviará um arquivo codificado em AVIF junto com uma instrução explícita para tratá-lo como AVIF.
O resultado final é um processo que não apenas permite a criação de arquivos de codificação alternativa e o ajuste manual das configurações de compactação.
(ou manter um sistema que realiza essas tarefas por você), mas acaba com a necessidade de usar <picture> e o atributo type para
entregar esses arquivos aos usuários. Portanto, usar sozinha as sintaxes srcset e sizes ainda pode fornecer aos usuários imagens codificadas como, por exemplo, AVIF,
voltando para WebP (ou JPEG-2000, apenas para Safari), voltando à codificação legada mais sensata.
As desvantagens de usar uma CDN de imagem são mais logísticas do que técnicas, sendo a principal delas o custo. Embora seja comum que CDNs de imagem oferecem planos sem custo financeiro com recursos robustos para uso pessoal, a geração de recursos de imagem exige largura de banda e espaço de armazenamento para uploads, servidor para transformar imagens e espaço adicional para os resultados de transformação armazenados em cache. Portanto, aplicativos de uso avançado e de alto tráfego podem exigir um plano pago.