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.