Redimensionamento de imagens

Simplificando a Entrega Ideal de Imagens

Os arquivos de imagem geralmente são maiores do que o necessário, criando problemas para proprietários e visitantes de sites que podem ser facilmente resolvidos com o Redimensionamento do Cloudflare Images.

  • Torne suas páginas mais rápidas
  • Pare de atingir os limites de transferência de dados devido a imagens
  • Melhore a experiência do seu visitante

Incluso em todos os planos pagos Consulte a página de planos e preços para mais detalhes.

Para fornecer um exemplo concreto, vamos considerar esta foto da parede de lâmpadas de lava da Cloudflare. À esquerda, você vê a foto, dimensionada para 300 pixels de largura.

À direita, você vê a mesma imagem entregue em sua alta resolução original, dimensionada em um navegador web para desktop. Em uma tela de DPI normal, ambas parecem iguais, mas a imagem à direita leva mais de vinte vezes mais dados para carregar. Mesmo para os melhores e mais conscientes desenvolvedores, redimensionar todas as imagens para lidar com todas as geometrias de dispositivos possíveis consome um tempo valioso e é extremamente fácil esquecer de fazer esse redimensionamento por completo.

Hoje estamos lançando um novo produto, o Redimensionamento do Cloudflare Images, para corrigir esse problema de uma vez por todas.

Anunciamos o Redimensionamento do Cloudflare Images

Com o Redimensionamento do Cloudflare Images, a Cloudflare adiciona outro produto importante ao seu conjunto de otimizações de imagens disponíveis. Este produto permite que os clientes executem um excelente conjunto das principais ações sobre as imagens.

Redimensionar - A imagem de origem será redimensionada para a altura e largura especificadas. Essa ação permite que múltiplas variantes de tamanhos diferentes sejam criadas para cada uso específico.

Recortar - A imagem de origem será redimensionada para um novo tamanho que não mantém a proporção original e uma parte da imagem será removida. Isso pode ser especialmente útil para fotos de rosto e imagens de produtos em que formatos diferentes devem ser alcançados mantendo apenas uma parte da imagem.

Compactar - A imagem de origem terá seu tamanho de arquivo reduzido ao aplicar a compactação com perdas. Isso deve ser usado quando uma leve redução de qualidade for uma troca aceitável para a diminuição do tamanho do arquivo.

Converter para [WebP](https://en.wikipedia.org/wiki/WebP) - Quando o navegador do usuário for compatível, a imagem de origem será convertida para WebP. A entrega de uma imagem WebP aproveita o formato de imagem moderno e altamente otimizado.

Ao usar uma combinação dessas ações, os clientes armazenam uma única imagem de alta qualidade em seu servidor e o Redimensionamento do Cloudflare Images pode ser aproveitado para criar variantes especializadas para cada caso de uso específico. Sem nenhum esforço adicional, cada variante também se beneficiará automaticamente do armazenamento em cache global da Cloudflare.



Exemplos

Miniaturas de comércio eletrônico

Os sites de comércio eletrônico geralmente armazenam uma imagem de alta qualidade de cada produto. A partir dessa imagem, eles precisam criar diferentes variantes, dependendo de como esse produto será exibido. Um exemplo é criar miniaturas para uma exibição de catálogo. Usar o Redimensionamento do Cloudflare Images, se a imagem de alta qualidade estiver localizada aqui:

https://example.com/images/shoe123.jpg

Aqui está como exibir uma miniatura de 75x75 pixels usando o redimensionamento do Cloudflare Images:

<img src="/cdn-cgi/image/width=75,height=75/images/shoe123.jpg"/>

Cloudflare Images responsivo

Ao personalizar um site para funcionar em vários tipos e tamanhos de dispositivos, é importante sempre usar imagens de tamanho correto. Isso pode ser difícil quando as imagens se destinam a preencher uma determinada porcentagem da tela. Ele pode ser usado para resolver esse problema. Sem o Redimensionamento do Cloudflare Images, várias versões da mesma imagem precisariam ser criadas e armazenadas. Neste exemplo, uma única cópia de alta qualidade da hero.jpg é armazenada e o Redimensionamento do Cloudflare Images é usado para redimensionar para cada tamanho específico, conforme necessário.

<img width="100%" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w, /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w, " src="/cdn-cgi/image/width=960/assets/hero.jpg"/>

Aplicar o tamanho máximo sem alterar os URLs

O Redimensionamento do Cloudflare Images também está disponível no Cloudflare Workers. O Workers permitem que você escreva códigos que são executados perto de seus usuários em todo o mundo. Por exemplo, você pode querer adicionar o Redimensionamento do Cloudflare Images às suas imagens, mantendo os mesmos URLs. Seus usuários e clientes poderão usar os mesmos URLs de imagem de sempre, mas as imagens serão modificadas de forma transparente da maneira que você precisar.

Você pode instalar um Worker em uma rota que corresponda aos URLs de sua imagem e redimensionar qualquer imagem para um tamanho maior que um limite:


addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return fetch(request, {
    cf: {
      image: {
        width: 800,
        height: 800,
        fit: 'scale-down'
      }
    }
  });
}

Como um Worker é apenas código, também é fácil executar esse worker apenas em URLs com extensões de imagem ou, até mesmo, redimensionar apenas imagens sendo entregues a clientes em dispositivos móveis.

Cloudflare e Cloudflare Images

A Cloudflare tem um longo histórico de ferramentas de construção para acelerar imagens. Nosso Caching sempre ajudou a reduzir a latência armazenando uma cópia das imagens mais perto do usuário. O [Polish](https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/) automatiza as opções de compactação de imagem com perdas e sem perdas para remover bytes desnecessários das imagens. O [Mirage](https://www.cloudflare.com/website-optimization/mirage/) acelera a entrega de imagens com base no tipo de dispositivo. Continuamos a investir em todas essas ferramentas, pois todas elas desempenham um papel único na melhoria da experiência de imagem na web.

O Redimensionamento do Cloudflare Images é diferente porque é o primeiro produto de imagem da Cloudflare a dar aos desenvolvedores controle total sobre como suas imagens serão veiculadas. Você deve escolher o Redimensionamento do Cloudflare Images se estiver à vontade para definir os tamanhos em que deseja que suas imagens sejam veiculadas com antecedência ou em um Cloudflare Worker.

Próximas etapas e preços simples

O Redimensionamento do Cloudflare Images está disponível hoje para clientes dos planos Business e Enterprise. Para habilitá-lo, faça login no Painel de controle da Cloudflare e navegue até a guia Velocidade. Lá você encontrará a seção do Redimensionamento do Cloudflare Images, que você pode ativar com um clique.

Este produto está incluído nos planos Business e Enterprise sem custo adicional com generosos limites de uso. Os clientes do plano Business têm um limite de 100 mil solicitações por mês e serão cobrados US$ 10 por cada 100 mil solicitações adicionais por mês. Os clientes do plano Enterprise têm um limite de 10 milhões de solicitações por mês com outros níveis com desconto para mais uso. As solicitações são definidas como uma ocorrência em um URI que contém o Redimensionamento do Cloudflare Images ou uma chamada para o Redimensionamento do Cloudflare Images de um Worker.

Agora que você ativou o Redimensionamento do Cloudflare Images, é hora de redimensionar sua primeira imagem.


1. Usando seu site existente, armazene uma imagem aqui:

https://yoursite.com/images/yourimage.jpg

2. Use este URL para redimensionar aquela imagem:

https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpg

3. Experimente alterar

width=, height=, and quality=.

As instruções acima usam o formato de URL padrão para Redimensionamento do Cloudflare Images. Para obter detalhes sobre opções, casos de uso e compatibilidade, consulte nossa Documentação do desenvolvedor.

Pronto para experimentar o Redimensionamento do Cloudflare Images?