Automatize suas imagens com o Cloudinary

Se o senhor trabalha com imagens na Web, já passou mais de algumas horas fazendo algumas das coisas a seguir:

• Cortar e dimensionar uma imagem apenas para se ajustar a um layout. E depois fazer isso novamente quando o layout muda. E depois de novo, e de novo, e de novo.
• Com base em anos de experiência e profunda superstições conhecimento para selecionar heresia-melhores práticas-com base nas configurações de compactação de imagem.
• Tentando e errando para selecionar o melhor ideal entre 1 e 100 imagem “Quality” (Qualidade).

Essas tarefas são tão antigas quanto o img . Mas a Web é uma arena dinâmica e em constante mudança! Desenvolvimentos recentes em design responsivo estão adicionando algumas dificuldades aos nossos fluxos de trabalho:

• Geração de versões grandes, médias e pequenas de todas as imagens em um site.
• Percebendo que, na verdade, ter alguns tamanhos *entre* esses tamanhos também seria ótimo.
• Apaixonar-se pelo possibilidades de direção de arte (embora entenda que empregá-lo requer ainda mais mais trabalho manual e ainda mais resources-per-image).
• Gostaria de saber o que é um WebP e como o senhor faria para criar um (sem falar na implementação).
• Ficar sobrecarregado com a complexidade e o tédio.

Nossa prática está superando nosso conjunto de ferramentas. Cloudinary está criando um conjunto melhor de ferramentas. As vantagens de poder fazer tudo isso dinamicamente usando um conjunto simples de parâmetros de URL (visíveis! controlados por versão!) são enormes. E hoje, Cloudinary adicionou algo mais à mistura: inteligência e automação. A proposta é a seguinte: usando o Cloudinary, o senhor pode gerar uma imagem canônica. Cloudinaryé inteligente em relação à imagem do seu conteúdo exclusivo e os seus usuários contextos variadose lida com todos os detalhes da adaptação do conteúdo ao contexto, fornecendo a cada usuário um recurso ideal e automatizando as partes dolorosas da colocação de imagens na Web.

Como? Vamos dar uma olhada em alguns dos novos recursos.

Seleção automática de formato

Vamos começar de forma simples. Qual é a primeira coisa que o senhor deve fazer ao salvar uma imagem para a Web? Escolher um formato. Anteriormente, Cloudinary poderia recodificar imagens em tempo real com base na extensão do arquivo fornecida no URL. Portanto, eu poderia mudar isso:

https://demo-res.cloudinary.com/image/upload/sample.jpg

Para isso:

https://demo-res.cloudinary.com/image/upload/sample.png

E converter um JPEG em um PNG com o mínimo de esforço. *Agora*, não preciso mais pensar em formatos. Este URL…

https://demo-res.cloudinary.com/image/upload/f_auto/sample.jpg

…fornece formatos diferentes para dispositivos diferentes, dependendo de ambos:

1. O conteúdo da imagem. Ela será melhor compactada como PNG ou, digamos, como JPEG?
2. O contexto específico do usuário. Formatos de ponta como Jpeg-XR e WebP ainda não são compatíveis em todos os lugares. Queremos enviá-los apenas para dispositivos que possam renderizá-los e recorrer a formatos com suporte universal em dispositivos que não possam.

Ok, agora que temos um formato, precisamos escolher uma “qualidade”.

Configurações automáticas de qualidade/compressão

Ah, a “qualidade” da imagem. Um número inteiro entre 1 e 100 que mapeia arbitrariamente (e de forma opaca!) dezenas de configurações de codificação de baixo nível; uma entrada cujo resultado varia enormemente entre formatos, ferramentas e até mesmo tipos de imagens. Não há como prever a aparência de uma imagem com uma “qualidade” de 75 (ou quão bem ela será compactada) sem um conhecimento profundo do formato de destino, da ferramenta de codificação e de como essa combinação de ferramenta/formato lida com imagens “como” a imagem em questão.

O que um desenvolvedor da Web deve fazer? Escolher números por meio de tentativa e erro, se tiver tempo, e definir e esquecer, se não tiver.

O novo q_auto utiliza algoritmos que analisam as características específicas da sua imagem e entendem como ela será ou não compactada para atingir o ponto ideal entre arquivos pequenos e imagens nítidas, automaticamente.

Compare isto (imagem de 117 KB):

https://demo-res.cloudinary.com/image/upload/sample.jpg

para este (79KB):

https://demo-res.cloudinary.com/image/upload/q_auto/sample.jpg

O q_auto reduziu o tamanho do arquivo em mais de 30%, com pouco ou nenhum efeito visível.

(E se o senhor quiser ajustar o padrão, pode por meio de uma escala simples e previsível)

Corte inteligente automático

Cortar imagens para ajustá-las a um layout – em um ambiente dinâmico design responsivo dirigido por arteou não – é um problema difícil de resolver em escala. É bastante simples, por exemplo, cortar automaticamente o centro de uma imagem, mas gerando algoritmicamente um corte que pareça bom e preserva as imagens elementos mais importantes é um desafio; a maioria dos designers, de qualquer forma, se resigna a fazer isso manualmente.

O Cloudinary oferece uma configuração chamada “gravity” (gravidade) que permite aos desenvolvedores ancorar suas plantações em torno de uma coordenada específica. A partir de hoje, o senhor pode definir a gravidade dos seus cortes como “auto” e cortar suas imagens de forma inteligente e automática.

Então, em vez de receber essa abelha sem cabeça:

https://demo-res.cloudinary.com/image/upload/c_fill,ar_4:1/sample.jpg

Recebemos esta centralizada:

https://demo-res.cloudinary.com/image/upload/c_fill,ar_4:1,g_auto/sample.jpg

Muito melhor!

Dimensionamento automático para design responsivo

Por fim, quero falar sobre um recurso que está ajudando a impulsionar a Web, mesmo que ainda não esteja pronto para o horário nobre de produção.

Vimos como definir o formato de entrega de uma imagem, as configurações de compactação e o ponto focal para recortes para auto usando o comando f_auto, q_auto, e g_auto parâmetros. E se o senhor pudesse definir os parâmetros tamanho da imagem para “automático” também? O senhor pode! w_auto está aqui e oferece recursos de tamanho perfeito para imagens de largura variável em designs responsivos, a partir de um URL único.

Agora, a má notícia: o w_auto foi criado com base em um recurso de ponta chamado Client Hints. A ativação do Client Hints exige o envio de um cabeçalho HTTP especial e, para aproveitar ao máximo o Client Hints, o senhor também precisa adicionar o cabeçalho sizes atributo em suas imagens. O pior de tudo é que, no momento, o Client Hints só é compatível com o Chrome; esperamos que o suporte do Cloudinary faça com que outros fornecedores acelerem o ritmo de suas implementações.

Mas, se o senhor enviar os cabeçalhos HTTP corretos e estiver usando um navegador compatível, as imagens responsivas de largura variável com o Cloudinary são tão simples quanto:

<img
sizes="100vw"
src="https://demo-res.cloudinary.com/image/upload/w_auto/sample.jpg"
alt="1, 2, 3!" />

O futuro! Não vai ser legal? O senhor pode experimentá-lo (e tudo o mais discutido aqui) hoje mesmo inscrevendo-se em uma conta gratuita do Cloudinary.