As redes de fornecimento de conteúdo (CDNs) de imagens são excelentes na otimização de imagens para na Web. Alternar seu site para uma CDN de imagem pode gerar uma 40 a 80% de economia na imagem e, na maioria dos casos, otimizam as imagens melhor do que script de otimização de imagem em tempo de criação.
O que é uma CDN de imagem?
CDNs de imagem são especializadas em transformar, otimizar e fornecer imagens. Você também podem pensar neles 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 apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso permite criar variações de uma imagem para diferentes casos de uso.
As CDNs de imagem são diferentes dos scripts de otimização de imagens no momento da criação, porque criar novas versões de imagens conforme necessário. Por isso, as CDNs geralmente são mais adequado para criar imagens altamente personalizadas para clientes do que os scripts de build.
Como CDNs de imagem usam URLs para indicar opções de otimização
Os URLs de imagem usados por CDNs de imagem transmitem informações importantes sobre uma imagem, e as transformações e otimizações que devem ser aplicadas a ela. Formatos de URL variam de acordo com a CDN de imagem usada, mas, de modo geral, todas têm atributos semelhantes. Aqui estão alguns dos recursos mais comuns.
Origem
Uma CDN de imagem pode ficar no seu próprio domínio ou no domínio da sua CDN de imagem. CDNs de imagem de terceiros normalmente oferecem a opção de usar um domínio personalizado para um taxa. Usar seu próprio domínio facilita a troca de CDNs de imagem posteriormente porque não é necessário alterar o URL.
O exemplo anterior usa o domínio da CDN de imagem ("example-cdn.com") com um subdomínio personalizado, em vez de um domínio personalizado.
Imagem
As CDNs de imagem geralmente podem ser configuradas para recuperar imagens automaticamente
locais existentes quando forem necessários. Geralmente, essa capacidade é alcançada
incluindo o URL completo da imagem existente no URL da imagem.
gerados pela CDN da imagem. Por exemplo, talvez você veja um URL semelhante a
isso: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Esse URL recuperaria e otimizaria a imagem que existe em https://flowers.com/daisy.jpg.
O formato de arquivo solicitado (JPG, no exemplo) pode não ser o mesmo que o
formato de arquivo de imagem retornado (WebP, no exemplo). O HTTP content-type
cabeçalho informa ao navegador em qual formato o URL está para que ele possa processar o URL
adequadamente. Isso pode causar confusão se o arquivo for salvo em disco e usado por
outro programa que espera que o formato corresponda à extensão do arquivo.
Outra maneira com ampla compatibilidade de fazer upload de imagens para uma CDN de imagem é enviá-las em uma solicitação POST HTTP para a API da CDN de imagem.
Chave de segurança
Uma chave de segurança impede que outras pessoas criem novas versões das suas imagens. Com esse recurso ativado, cada nova versão de uma imagem requer uma chave de segurança.
Se alguém tentar mudar os parâmetros do URL da imagem, mas não fornecer uma chave de segurança válida, não será possível criar para a versão anterior. A CDN de imagem cuida dos detalhes de geração e rastreamento chaves de segurança para você.
Transformações
As CDNs de imagem oferecem dezenas e, em alguns casos, centenas de transformações de dados. Essas transformações são especificadas na string de URL, e não há restrições no uso de várias transformações ao mesmo tempo. Para o desempenho da Web, as transformações de imagem mais importantes são tamanho, pixel densidade, formato e compactação. Essas transformações são a razão pela qual geralmente diminui o tamanho dos arquivos de imagem do seu site.
Porque geralmente há uma configuração objetivamente melhor para a performance. transformações, algumas CDNs de imagem são compatíveis com a para esses transformações de dados. Por exemplo, em vez de especificar que as imagens sejam transformadas para o formato WebP, é possível permitir que o CDN selecione e veicule formato ideal. Uma CDN de imagem pode determinar a melhor maneira de transformar uma imagem usando, entre outros, os seguintes sinais:
- Dicas do cliente (por exemplo, largura da janela de visualização, DPR e largura da imagem).
- O
Save-Datacabeçalho - O User-Agent cabeçalho da solicitação
- A API Network Information
Por exemplo, o CDN de imagem pode exibir AVIF para um navegador Chrome, WebP para um Edge e JPEG para um navegador muito antigo. As configurações automáticas são populares porque permitem que você aproveite as CDNs de imagem na otimização de imagens sem precisar alterar seu código para adotar novas tecnologias quando a CDN de imagem for iniciada e apoiá-las.
Tipos de CDNs de imagem
Há duas categorias principais de CDNs de imagem: autogerenciadas e gerenciados por terceiros.
CDNs de imagem autogerenciadas
CDNs autogerenciadas podem ser uma boa opção para locais com equipes de engenharia que são confortáveis em manter a própria infraestrutura.
- O Thumbor é a plataforma autogerenciada CDN de imagem de contêiner. É de código aberto e sem custo financeiro, mas tem menos recursos do que CDNs comerciais, e sua documentação é um pouco limitada. Os sites que usam o thumbor incluem Wikipédia, Quadrado, e 99designs. Consulte Como instalar a CDN de imagem Thumbor para instruções sobre como configurá-lo.
- Imaginário
- Imagor (em inglês)
CDNs de imagem de terceiros
As CDNs de imagem de terceiros oferecem CDNs de imagem como um serviço. Da mesma forma que os provedores de nuvem oferecem servidores e outras infraestruturas mediante pagamento de uma taxa, CDNs de imagem fornecer otimização e exibição de imagens mediante pagamento de uma taxa. Como a imagem de terceiros CDNs mantêm a tecnologia subjacente; em geral, você pode começar usando uma bem rápido, embora uma migração completa de um site grande possa levar mais longas. CDNs de imagens de terceiros normalmente são precificadas com base em níveis de uso, com a maioria das CDNs de imagem oferecem um nível sem custo financeiro ou uma avaliação sem custo financeiro para que você experimente o produto.
Escolher uma CDN de imagem
Há muitas opções boas para CDNs de imagem. Algumas têm mais recursos que outras, mas qualquer uma delas pode ajudá-lo a economizar bytes em suas imagens e, assim, carregar seus páginas com mais rapidez. Além dos conjuntos de atributos, outros fatores a considerar ao escolher um CDN de imagem são custo, suporte, documentação e facilidade de configuração ou migração.
Efeitos na Largest Contentful Paint (LCP)
As imagens são uma parte vital da experiência do usuário em muitos sites, por isso são um fator importante na Maior exibição de conteúdo de um site. Aqui estão Lembre-se do seguinte ao usar uma CDN de imagem:
- As imagens exibidas por CDNs podem vir de um servidor de origem cruzada, que pode aumente o tempo de configuração da conexão do site. Quando possível, tente usar uma imagem CDN que faz proxy por meio da origem principal para que você não adicione outras origens com a qual o navegador se conecte. Isso tem o mesmo efeito que a auto-hospedagem de imagens na origem primária.
- Use um valor de atributo
fetchpriorityde"high"no elemento de imagem da LCP para que o navegador possa começar a carregar a imagem assim que possível. - Se uma imagem não for imediatamente detectável no HTML inicial, considere usar
rel=preloadà imagem candidata à LCP para que o navegador carregue essa imagem antes tempo de resposta. - Se não for possível fazer o proxy pela sua origem e o navegador não saberá qual imagem para carregar até mais tarde no carregamento da página, configurar uma conexão com a CDN de imagem de origem cruzada o quanto antes para encurtar a fase de carregamento de recursos para possíveis imagens candidatas à LCP.