Otimização de imagens com o Cloudinary

Estamos sempre procurando maneiras de melhorar a velocidade do site; fazemos lazy load, minificamos e concatenamos, criamos sprites, experimentamos o cache e praticamente tudo o que podemos imaginar. Com todas as estratégias de otimização de desempenho disponíveis, a melhor maneira de diminuir o tamanho da página sempre volta à otimização de imagens. As técnicas de otimização de imagens incluem:

• Escolhendo o formato de imagem ideal
• usando o melhor algoritmo de compactação
• servindo o tamanho de imagem otimizado por dispositivo
• servindo imagens de uma fonte escalonada e rápida
• dimensionar imagens para o tamanho de uso

A ideia por trás da otimização de imagens é simples, mas a execução nem sempre foi: cada uma dessas otimizações geralmente requer uma solução separada, o que dificulta a automação. O senhor entrou no Cloudinary: upload, armazenamento, manipulação e fornecimento de imagens e vídeos na Web.

Resultados rápidos

Alguns pontos importantes sobre o Cloudinary:

• O Cloudinary fornece APIs para Node.js, Rails, django, PHP, jQuery, Angular, .NET, Java, iOS, Android, linha de comando básica e HTML simples src Incorporação de estrutura de URL
• O Cloudinary permite manipulações avançadas em tempo real, incluindo corte direcionado pela arte, transformações baseadas em detecção facial e muito mais
• O Cloudinary cria automaticamente imagens responsivas dirigidas por arte
• O Cloudinary fornece uma interface de relatório de administrador
• O Cloudinary tem uma dúzia de plugins para otimizar ainda mais as imagens e a entrega
• O Cloudinary permite que os usuários criem transformações personalizadas de imagens em sua interface de administração
• O Cloudinary tem corte e posicionamento avançados, incluindo detecção facial, dimensionamento de avatar de mídia social e muito mais
• O Cloudinary tem uma oferta com todos os recursos para o caso de uso básico disponível gratuitamente

Usando o Cloudinary

Há muitos casos de uso para um serviço como o Cloudinary. Quando penso no meu site, vejo uma necessidade óbvia: imagens redimensionadas e otimizadas nas páginas de listas de posts. O Google PageSpeed critica meu site pelo tamanho das imagens e não posso culpá-lo: Tenho uma rotina regex que procura a primeira imagem em uma postagem e a usa como imagem da postagem, mas a rotina não otimiza as imagens, portanto, se a imagem for muito grande, posso reduzi-la com atributos HTML, mas o tamanho do download ainda é enorme.

O Cloudinary resolveria facilmente meu problema e de várias maneiras diferentes, mas acho que o melhor caminho seria com o Node.js. Eu começaria instalando o módulo deles e, em seguida, enviaria uma imagem para ele:

// npm install cloudinary
var cloudinary = require('cloudinary');

// Setup
cloudinary.config({
        cloud_name: 'david-walsh-blog',
        api_key: '###############',
        api_secret: '###############'
});

// Get me my modified image!
cloudinary.image('logo.png', { width: 200, height: 200, crop: 'fill' });

O que é retornado é o img para a imagem redimensionada e otimizada:

<img src="https://res.cloudinary.com/david-wash-blog/image/upload/c_fill,h_200,w_200/logo.png" height="200" width="200"/>

Como meu blog é executado no WordPress, eu poderia facilmente usar a API PHP:

\Cloudinary\Uploader::upload("/home/logo.png");

/*
Array
(
[public_id] => c87hg9xfxrd4itiim3t0
[version] => 1371995958
[signature] => f8645b000be7d717599affc89a068157e4748276
[width] => 864
[height] => 576
[format] => jpg
[resource_type] => image
[created_at] => 2013-06-23T13:59:18Z
[bytes] => 120253
[type] => upload
[url] => https://res.cloudinary.com/demo/image/upload/v1371995958/logo.png
[secure_url] => https://res.cloudinary.com/demo/image/upload/v1371995958/logo.png
)
*/

Para reduzir as chamadas para o Cloudinary, posso armazenar o secure_url e usá-lo quando criar a saída da página da lista de postagens! Com a imagem no servidor, agora o senhor pode recuperá-la e modificá-la!

Recuperação de imagens

Uma das principais conclusões do uso do Cloudinary é que é muito conveniente usar um sistema que permite que o senhor gere e recupere facilmente uma imagem diferente com base em um URL. Aqui estão alguns exemplos:

<!-- Use HTML to put image into account -->
<img src="https://res.cloudinary.com/demo/image/fetch/https://davidwalsh.name/demo/logo.png">

<!-- Create a Facebook social image -->
<img src="https://res.cloudinary.com/demo/image/facebook/w_150,r_max/logo.png">

<!-- Create a Twitter, sepia social image -->
<img src="https://res.cloudinary.com/demo/image/twitter/w_150,e_sepia/logo.png">

<!-- Create a greyscale image -->
<img src="https://res.cloudinary.com/demo/image/upload/e_grayscale/sample.jpg">

<!-- Create a YouTube screen image -->
<img src="https://res.cloudinary.com/demo/image/youtube/https://www.youtube.com/watch?v=aNwnPElsJGE">

<!-- Create a round-cornered, sized animated GIF -->
<img src="https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,r_max/kitten_fighting.gif">

<!-- Create a sized image overlay -->
<img src="https://res.cloudinary.com/demo/image/upload/l_face_left/w_200,h_200,c_thumb,g_face,r_max/fl_layer_apply,g_north_east/flower.jpg">

<!-- Use conditional overlays -->
<img src="https://res.cloudinary.com/demo/image/upload/if_w_lt_600/l_text:Arial_20:Image shown in full scale,co_white,g_south_east/c_scale,e_blur:400,u_small_dinosaur,w_600/if_end/v1458729247/small_dinosaur.jpg">

Embora o senhor possa usar praticamente todos os recursos de modificação de imagem modificando o URL da imagem, usarei a API do Node.js em alguns casos para lhe dar uma ideia das diferentes APIs do Cloudinary.

O Cloudinary fornece um plug-in jQuery e uma estratégia para imagens responsivas, muitas vezes usadas em sistemas de grade:

<img data-src="https://res.cloudinary.com/david-walsh-blog/image/upload/w_auto/logo.jpg" class="cld-responsive">

// Using the jQuery plugin: https://cloudinary.com/documentation/jquery_integration#getting_started_guide
$.cloudinary.responsive(); // That's it!

O senhor pode modificar os URLs para configurar os tamanhos de imagem que deseja:

Adoro o fato de que a simples modificação do URL permite que o senhor modifique o formato e o tamanho de uma imagem – isso facilita muito a experimentação e a criação de protótipos.

Imagens responsivas com <picture>

Se o senhor deseja fornecer mídia por meio do <picture> para diferentes consultas de mídia, O Cloudinary tem uma excelente estrutura para fazer isso também:

<picture>

  <!-- wide crop -->
  <source 
    media="(min-width: 600px)"
    srcset="https://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_600/on_the_phone.jpg 600w,
            https://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1200/on_the_phone.jpg 1200w"
    sizes="100vw" />

  <!-- standard crop -->
  <img
    srcset="https://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg 400w,
            https://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_800/on_the_phone.jpg 800w"
    src="https://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg"
    alt="President Obama on the phone in the Oval Office"
    sizes="100vw" />

</picture>

O resultado acima é esse efeito incrível:

Formato e manipulação de imagens

O senhor pode converter formatos de imagem ao longo do processo:

// Format image to PNG
cloudinary.image("logo", { format: 'png' });

// Format image to 50% quality
cloudinary.image("logo.jpg", { quality: 50 });

// Get a thumbnail image of the second page of a PDF
cloudinary.image("multi_page_pdf.jpg", { width: 100, height: 140, crop: 'fill', page: 2 });

Se o senhor quiser brincar com filtros e outras modificações:

cloudinary.image("smartphone.png", {
  underlay: "site_bg.jpg",
  width: 80, height: 80, effect: "brightness:100",
  transformation: {crop: 'fill', height: 80, width: 80 }
});

Conversão automática de formatos

Cloudinary’s funcionalidade de conversão automática de formatos é realmente interessante: esse recurso substitui o formato original da imagem por um formato que terá bom desempenho no navegador do cliente. O Chrome receberá uma imagem WebP e os usuários do IE receberão uma imagem no formato JPEG-XR:

<!-- "f_auto" triggers automatic formatting -->
<img src="https://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg">

Essas atualizações dos formatos WebP e JPEG-XR devem proporcionar um incrível aumento na carga de desempenho! É altamente recomendável usá-las!

Personalização de vídeo

O senhor pode até mesmo personalizar a saída de vídeo, desde o simples dimensionamento até marcas d’água e adições de texto:

<!-- Sized video -->
https://res.cloudinary.com/demo/video/upload/w_200,h_200,c_fill,g_north/dog.mp4

<!-- Video with overlay and brightness customizations -->
https://res.cloudinary.com/demo/video/upload/ac_none,w_500/l_cloudinary_icon,g_north_east,e_brightness:200,o_40,x_5,y_5,w_120/l_text:Roboto_34px_bold:Cute Dog,co_white,g_west,x_10,so_3/dog.mp4

Hospedar seus vídeos com o Cloudinary permitirá que o senhor tenha as mesmas vantagens de manipulação e hospedagem em nuvem de alto desempenho que suas imagens terão!

Experimente o Cloudinary!

Cloudinary é um incrível balcão único para fazer upload, armazenar, manipular e fornecer imagens e vídeos. As APIs são todas intuitivas, eficazes e fáceis de usar. Os plugues de otimização são todos úteis e a detecção de faces, as transformações de sépia/escala de cinza e a criação de imagens para mídias sociais são um bônus enorme e prático. O senhor pode se inscrever gratuitamente no Cloudinary para experimentar – eles têm uma grande quantidade de documentação e exemplos de projetos incríveis para começar!

Mais Leitura