Introdução a imagens responsivas no WordPress 4.4

A versão 4.4 do WordPress chegou recheada de novidades que suprem necessidades de desenvolvedores e gestores de conteúdo.

Dentre tantas novidades, uma que me chamou bastante atenção foi a introdução, agora de forma nativa, das imagens responsivas, trazendo uma melhora significativa na performance do seu projeto.

Na verdade o implemento já vinha sendo “namorado” desde abril do ano passado, com o plugin “RICG Responsive Images” mas só agora, após testes e melhorias, pode de fato ser incorporado ao core do WP.

O que são Imagens Responsivas? E como o WordPress irá trabalhar com elas?

De maneira sucinta, responsiva é a capacidade que as imagens possuem de adaptar-se em telas de diferentes resoluções, sem perda de qualidade ou legibilidade.

A versão 4.4 trabalhará da seguinte forma: ao fazer upload de uma imagem, o WordPress criará automaticamente diversos tamanhos desta mesma imagem (pequeno, médio e grande) no servidor e adicionará dinamicamente na tag img do HTML 5 o atributo srcset.

Este atributo listará todos os tamanhos de imagem existentes, com isso os navegadores poderão optar por baixar o tamanho mais adequado e ignorar os demais, potencialmente economizando banda e acelerando o tempo de carregamento de página no processo, além de incluir imagens retina para dispositivos com densidade alta de pixels.

Nota: O atributo srcset só será adicionado (dinamicamente) ao front do site. Caso você acesse a aba “texto” via editor, exibirá apenas a tag src.

Imagens responsivas no WordPress 4.4

Por que torná-la uma funcionalidade padrão do WordPress era imprescindível?

Relevância! Nos últimos anos, segundo pesquisa do Comitê Gestor da Internet no Brasil (CGI.br), tivemos um crescimento exponencial de usuários que utilizam dispositivos móveis. Com esse crescimento buscadores, como o Google, passaram a dar maior relevância para sites que se adequam bem a qualquer tipo de tela e proporcionam boas experiências a seus usuários.

Além do site responsivo, outro desafio é convencer gestores de conteúdo que otimização, principalmente de imagens é algo primordial e deve ser levado em consideração na hora de produzir conteúdo. Mas por mais que se otimize as imagens de um site para desktops, na maioria das vezes estas imagens ainda são bastante pesadas para uma navegação móvel ou deixam a desejar em relação à qualidade e adaptação para imagens de retina (com qualidade superior ao FullHD).

Desde suas últimas versões, o WordPress já vem trabalhando para sanar esse problema. O primeiro passo foi aperfeiçoar a Biblioteca de Mídia, tornando-a muito mais intuitiva e fácil de usar especialmente para usuários que não possuem experiência com otimização. Já nesta versão, promete tratar na raiz do problema de uma vez por todas.

Ainda temos muito a evoluir em Responsive web Design, mas com essa “senhora” ajuda que o WordPress está trazendo, já é possível garantir pelo menos um conteúdo responsivo bonito, que funcione bem tanto no desktop quanto no mobile.

Agora é aguardar! E podem apostar que mais novidades virão por aí 😉