Imagens flexiveis e responsíveis em Drupal

UPDATE: acabei por fazer um tutorial video deste assunto: 

O Webdesign já não é o que era

O webdesign de hoje em dia (estou escrevendo em 2013) tem necessidades muito diferentes de à alguns anos atrás. Deixámos de desenhar apenas para desktop e, na minha sincera opinião, considero que também já ultrapassámos o patamar de desenhar para o trio iPhones + iPads + Android. Hoje, e tendo em conta a gigantesca oferta de produtos móveis e não-móveis (a internet na tv também está a ganhar ímpeto), desenhar um layout dedicado ou ajustado para cada dispositivo é simplesmente impossível.

Sim, hoje um webdesigner responsável deve desenhar para todos os dispositivos, e terá de fazê-lo de forma diferente - pensando no layout como uma equilibrada relação de proporções, com algum controlo mas não totalmente constrangido. Deixar de usar px e passar a usar em's ou %'s também contribui muito para um design mais eficiente de forma global. Este "estilo" (não sei o termo certo) de design adquiriu o nome de "responsive webdesign" - porque realmente reage às diferentes medidas do ecrã onde está a ser visualizado. Quem quiser saber mais veja este artigo em inglês da Smashing Coding. Usar media queries, layouts fluídos e imagens flexíveis é obrigatório no webdesign de 2013 em diante. Mas também trouxe novos problemas...

Uma imagem vale 1.000... kbits?

De entre os recursos mais importantes e incontornáveis do webdesign estão as imagens. E, para se efetuar um design que reaja aos vários dispositivos, é imperativo utilizar imagens flexíveis, que se ajustam ao tamanho de cada aparelho.

Tenhamos em conta o seguinte cenário, com uma imagem jpeg em ecrã inteiro, como no exemplo acima.

• No desktop ocupa visualmente o ecrã inteiro (mais a área onde foi cortada, acima e abaixo), tem cerca de 400kb, e uma resolução de cerca de 1900px largura por 1050px altura.
• No iPad 1 (deixemos o iPad 2 para outras andanças), ocupa visualmente o ecrã inteiro, tem cerca de 400kb, com uma resolução de 1024px altura por 768px largura.
• No iPhone (novamente, deixemos os Retina fora da equação), ocupa visualmente o ecrã inteiro, tem cerca de 400kb, com uma resolução de 320px largura por 480px altura.

Aparentemente, tudo está bem quando acaba bem. No entanto, se formos a ver, um iPhone tem um resolução real de 320px X 480px. Isto significa que uma imagem em fullscreen, no máximo precisaria apenas de cerca de 60kb para ser apresentada em alta qualidade. 340kb é muita diferença, especialmente numa rede GSM ou 3G.

As imagens são quem leva a maior fatia do consumo de largura de banda, e, consequentemente, incluencia a a performance perceptível de um website.

mais e maiores imagens == maior consumo de dados == mais tempo de download

menores imagens == menor consumo de dados == menos tempo de download

Se nas nossas casas temos ligações estáveis e rápidas, seja por fibra, cabo, adsl ou outras, para quem anda de um lado para o outro, com tablets ou smarphones as ligações não são tão boas.

Obviamente que a oferta está aumentar: o 4G promete chegar aos 100mbps, mas a sua implementação não é homogénea no território geográfico (e continua cara como tudo...), o 3G tem ligações mais estáveis mas muito mais lentas, que também dependem de território), etc.

Ao fim e ao cabo, tudo o que fizermos para optimizar o tamanho e qualidade das imagens, traduz-se em menos custos para o utilizador, menos tempo de espera, e menos memória utilizada. E é da responsabilidade do webdesigner tentar otimizar ao máximo a performance do seu website.

A solução para Drupal

A solução passa por servir uma cópia da imagem na resolução mais perto da óptima para o dispositivo. Às imagens que são servidas desta forma chamamos de "Adaptive Images". As técnicas são várias, mas todas com o mesmo propósito. No entanto, quando usamos um CMS, tudo fica um pouco mais difícil, devido à complexidade inerente às camadas de abstracção. 

Nota: neste website de teste as imagens já são "responsive images" - já se ajustam ao ecrã do aparelho. Eu não vou tratar disso neste tutorial. Se quiser saber como o fazer, pode começar a sua pesquisa por aqui ou aqui. 

Em Drupal, a solução é até simples, mas necessita de ser correctamente configurada. Iremos utilizar dois módulos: 

• Picture - http://drupal.org/project/picture
• Breakpoints - http://drupal.org/project/breakpoints

1. Instalar os módulos

Preciso mesmo de dizer? Ok. Basta fazer o download da versão correcta nas páginas mencionadas acima, e  copiar cada um para pasta [raizdosite]/sites/all/modules. Ou copiar o link do módulo e colar-lo na página /admin/modules/install.

Depois, ir à página de administração dos módulos e activá-los. Atenção: o Picture depende do Breakpoints, portanto comece por este último.

2. Definir os breakpoints no seu tema

Um passo importante é informar o seu tema dos breakpoints aos quais deve reagir. Devem ser os mesmos que estão definidos nos vários @media-queries no css.

Neste exemplo, o meu website tem breakpoints aos 768px e aos 480px. Portanto, necessito de 3 tipos de imagens:

1. Um para resoluções de smartphones, dos 0px até  aos 480px;
2. Outro para resoluções de tablets, dos 481px aos 768px;
3. E a resolução original para desktops, dos 769px em diante.   

Poderiamos levar isto mais a peito, e criar mais tipos e resoluções para cada orientação ou outros aparelhos, mas seria demasiado, e assim contraproducente. Lembrem-se, procuramos um equilíbrio, e quantos mais cópias optimizadas criarem, maior será o espaço ocupado no servidor, mais tempo levará ao cron para os gerar, e assim por diante.

Devemos, a pedido do módulo Breakpoint, especificar os breakpoints no ficheiro .info do vosso tema. Fazemos isso da seguinte forma:

breakpoints[mobile] = (min-width: 0px)
breakpoints[narrow] = (min-width: 480px)
breakpoints[desktop] = (min-width: 768px)

Nota: é necessário desactivar o tema (fazer mesmo o disable) e escolher outro tema como default. Depois de fazer isso, pode voltar a escolher o tema correto. É estranho, mas é mesmo necessário.

3. Definir quais as imagens a reagir 

Agora que o tema sabe quais os breakpoints, temos de configurar o resto do módulo. Para isso vamos a /admin/config/media/breakpoints. Devemos encontrar os nossos breakpoints correctamente preenchidos, como na imagem, e um grupo de definições já preparado, com o nome do vosso tema (neste caso, 'Fabian').

Para quem perguntar, os multipliers servem para os dispositivos Apple com displays Retina, e que portanto necessitam de mais resolução para imagens.

Para definir-mos quais as imagens a reagir, devemos ir ao "Add Responsive Style", selecionar um tamanho de imagem previamente definido em "Image Styles" (/admin/config/media/image-styles), e dar-lhe um novo nome.

Neste caso, estou a definir três novos estilos de imagem (mobile, narrow e desktop) baseados no estilo "large". Para não confundir, vou dar-lhes o nome de "responsive-image". 

Assim, passarei a ter 3 estilos novos, como se pode ver abaixo.

4. Aplicar no tema

Ficaram com nomes compridos, mas percebem-se perfeitamente. Vamos agora aplicá-los no nosso tema. Para isso vamos a /admin/config/media/picture, e entramos no nosso tema definido, para mapear os estilos de imagem a utilizar.

Estamos assim a informar o Drupal que, para o breakpoint X, utilizar o estilo de imagem X.

5. Definir o tamanho real dos vários estilos

Agora temos de definir o tamanho real - Drupal não sabe o que é um mobile ou um narrow. Para isso temos de ir a Image Style /admin/config/media/image-styles e definir o tamanho máximo de cada um. 

Eu quero que as minhas imagens estejam definidas da seguinte forma:

1. Mobile: scale - largura: 480px
2. Narrow: scale - largura: 768px
3. Desktop: scale - largura: 960px

6. Utilizar Picture em vez de Images 

Estamos no final, só falta definir que o campo a ser mostrado não é uma "Image", mas uma "Picture". É esta última que vai tornar o sistema inteligente.

Vamos então ao nosso Manage Display do Content Type que queremos, e alteramos o formato de "Image" para "Picture". Entrem nas opções e definam o "Picture Group" com o nome do vosso tema, e o Fallback Image Style para Automatico.

Vamos então testar. Abram uma página com o tipo definido, e vejam os detalhes do recurso.

Todo deve funcionar sobre rodas.

Espero que tenham gostado.