O que é uma CDN de imagem

O-que-e-uma-CDN-de-imagem-1.jpg

As redes de entrega de conteúdo de imagem (CDNs) são excelentes para otimizar imagens. Mudar para uma CDN de imagem pode gerar uma economia de 40 a 80% no tamanho do arquivo de imagem. Em teoria, é possível obter os mesmos resultados usando apenas scripts de construção, mas isso é raro na prática.

O que é uma CDN de imagem?

As CDNs de imagens são especializadas na transformação, otimização e entrega de imagens. Você também pode pensar nelas como APIs para acessar e manipular as imagens usadas no seu site. Para imagens carregadas de uma CDN de imagem, o URL da imagem indica não apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso facilita a criação de variações de uma imagem para diferentes casos de uso.

O-que-e-uma-CDN-de-imagem-2.jpg

As CDNs de imagem são diferentes dos scripts de otimização de imagem em tempo de construção, pois criam novas versões de imagens conforme necessário. Como resultado, as CDNs geralmente são mais adequadas para criar imagens altamente personalizadas para cada cliente individual do que os scripts de construção.

Como as CDNs de imagem usam URLs para indicar opções de otimização

Os URLs de imagem usados ​​pelas CDNs de imagem transmitem informações importantes sobre uma imagem e as transformações e otimizações que devem ser aplicadas a ela. Os formatos de URL variam de acordo com a CDN da imagem, mas em alto nível, todos eles têm recursos semelhantes. Vamos examinar alguns dos recursos mais comuns.

O-que-e-uma-CDN-de-imagem-3.jpg

Origem

Uma CDN de imagem pode residir em seu próprio domínio ou no domínio da sua CDN de imagem. As CDNs de imagem de terceiros geralmente oferecem a opção de usar um domínio personalizado mediante taxa. O uso de seu próprio domínio facilita a troca de CDNs de imagem posteriormente, porque não serão necessárias alterações de URL.

O exemplo acima usa o domínio da CDN da imagem (“example-cdn.com”) com um subdomínio personalizado, em vez de um domínio personalizado.

Imagem

Normalmente, as CDNs de imagem podem ser configuradas para recuperar automaticamente imagens de seus locais existentes, quando necessário. Esse recurso geralmente é alcançado incluindo o URL completo da imagem existente no URL da imagem gerada pela CDN da imagem. Por exemplo, você pode ver uma URL parecida com esta: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Este URL recuperaria e otimizaria a imagem existente em https://flowers.com/daisy.jpg.

Outra maneira amplamente suportada de fazer upload de imagens para uma CDN de imagem é enviá-las por meio de uma solicitação HTTP POST para a API da CDN da imagem.

Chave de segurança

Uma chave de segurança impede que outras pessoas criem novas versões de suas imagens. Se esse recurso estiver ativado, cada nova versão de uma imagem exigirá uma chave de segurança exclusiva. Se alguém tentar alterar os parâmetros do URL da imagem, mas não fornecer uma chave de segurança válida, não poderá criar uma nova versão. A sua CDN de imagem cuidará dos detalhes de geração e rastreamento de chaves de segurança para você.

Transformações

As CDNs de imagem oferecem dezenas e, em alguns casos, centenas, de diferentes transformações de imagem. Essas transformações são especificadas por meio da string da URL e não há restrições no uso de várias transformações ao mesmo tempo. No contexto do desempenho da Web, as transformações de imagem mais importantes são tamanho, densidade de pixels, formato e compactação. Essas transformações são a razão pela qual a mudança para uma CDN de imagem normalmente resulta em uma redução significativa no tamanho da imagem.

Como costuma haver uma configuração objetivamente melhor para transformações de desempenho, algumas CDNs de imagem suportam um modo “automático” para essas transformações. Por exemplo, em vez de especificar que as imagens sejam transformadas no formato WebP, você pode permitir que a CDN selecione e atenda automaticamente o formato ideal. Os sinais que uma CDN de imagem pode usar para determinar a melhor maneira de transformar uma imagem incluem:

Por exemplo, a CDN da imagem pode servir JPEG XR para um navegador Edge, WebP para um navegador Chrome e JPEG para um navegador muito antigo. As configurações automáticas são populares porque permitem que você aproveite o conhecimento significativo das CDNs de imagem na otimização de imagens sem a necessidade de alterações no código para adotar novas tecnologias, uma vez que elas são suportadas pela CDN de imagem.

Tipos de CDNs de imagem

As CDNs de imagem podem ser divididas em duas categorias: autogerenciadas e gerenciadas por terceiros.

CDNs de imagem autogerenciada

CDNs autogerenciadas podem ser uma boa opção para sites com equipe de engenharia que se sentem confortáveis ​​em manter sua própria infraestrutura.

O Thumbor é a única CDN de imagem autogerenciada disponível atualmente. Embora seja de código aberto e livre para uso, geralmente possui menos recursos do que a maioria das CDNs comerciais, e sua documentação é um pouco limitada. Wikipedia , Square e 99designs são três sites que usam o Thumbor. Consulte a seção Como instalar a CDN da imagem Thumbor para obter instruções sobre como configurá-la.

CDNs de imagem de terceiros

CDNs de imagem de terceiros fornecem CDNs de imagem como um serviço. Assim como os provedores de nuvem fornecem servidores e outra infraestrutura por uma taxa; CDNs de imagem fornecem otimização e entrega de imagem mediante taxa. Como as CDNs de imagem de terceiros mantêm a tecnologia subjacente, a introdução é bastante simples e geralmente pode ser realizada em 10 a 15 minutos, embora uma migração completa para um site grande possa demorar muito mais. As CDNs de imagem de terceiros geralmente têm preços baseados nas camadas de uso, com a maioria das CDNs de imagem fornecendo uma camada gratuita ou uma avaliação gratuita para oferecer a você a oportunidade de experimentar seu produto.

Escolhendo uma imagem CDN

Existem muitas boas opções para CDNs de imagem. Alguns terão mais recursos que outros, mas provavelmente ajudarão a salvar bytes em suas imagens e, portanto, carregar suas páginas mais rapidamente. Além dos conjuntos de recursos, outros fatores a serem considerados na escolha de uma CDN de imagem são custo, suporte, documentação e facilidade de configuração ou migração.

Experimentar você mesmo antes de tomar uma decisão também pode ser útil. Abaixo, você encontra codelabs com instruções sobre como começar rapidamente com várias CDNs de imagem.