Kaksi Media

Como ter imagens responsivas no teu site WordPress

Imagens responsivas no WordPress

Há uns anos, numa dessas feiras de Verão, pude experimentar os resultados daqueles espelhos que nos distorcem a imagem.

Tudo passa pela conjugação de física e óptica. A curiosidade levou-me, mais tarde, a tentar perceber o funcionamento da ilusão, mesmo admitindo que as imagens distorcidas não me arrebataram. Sei que não sou o único.

Com excepção das artísticas, as imagens deformadas não entusiasmam a maior parte das pessoas. Em particular em websites e ainda menos nas respectivas versões para smartphones.

Com o consumo de Internet através de terminais móveis numa curva ascendente, todos os websites têm hoje a obrigação de apresentar imagens de qualidade e devidamente ajustadas.

O WordPress enquanto (excepcional) sistema de gestão de conteúdos facilita o processo de desenvolver um website que responde a todos os ecrãs, incluindo os dos terminais móveis. O mesmo acontece com a adaptação das imagens. Desde a versão 4.4, lançada em Dezembro de 2015, que as imagens são geridas de forma responsiva pela plataforma.

Limpinho, limpinho

O WordPress faz quase todo o trabalho por nós. Desde gerar os tamanhos de imagens que precisamos carregando o ficheiro apenas uma vez, até à inserção dos respectivos atributos. Sem configurações adicionais.

Ao utilizador, o WordPress vai mostrar a imagem responsiva desde que esta tenha o tamanho e as proporções correctas. O sistema usa agora o atributo “HTML source set {srcset}” para indicar ao navegador de internet que está a ser usado para fornecer o melhor tamanho de imagem disponível.

Quando o editor ou autor carrega uma imagem para um artigo ou página, o sistema cria três ou quatro tamanhos. Que são apresentados de forma adequada dependendo do tamanho do ecrã.

Uma imagem que tenha, por exemplo, 1024 pixéis de largura na versão original, será replicada noutros tamanhos. Portanto, se um visitante chegar ao site usando um dispositivo com largura máxima de 768 pixéis de largura (viewport de 768), a imagem a apresentar terá essa mesma largura.

Apesar disso, é importante saber que há formas de melhorar ainda mais a experiência dos seus utilizadores e fazer com que o seu site seja melhor apreciado.

Os tamanhos das imagens

Cada imagem que é carregada na biblioteca de media do WordPress é guardada no seu tamanho original e, em simultâneo, são criadas três ou quatro cópias noutras dimensões. Os tamanhos padrão, por omissão, eram:

  • Miniatura (150×150)
  • Médio (300×300)
  • Grande (1024×1024)

Com a versão 4.4 foi introduzido um novo tamanho intermédio, o médio_grande, com a largura de 768px e sem limite de altura.

Estas dimensões podem ser facilmente alteradas para outras se considerares que são mais convenientes para o teu projecto.

Basta ires até ao painel de controlo do WordPress, a Opções e Multimédia.

As tuas preferências pessoais ou o teu projecto podem, no entanto, exigir a criação de cópias com mais tamanhos. Para isso, tens de editar o ficheiro functions.php, chamando o função “add_image_size”. Cada chamada tem de incluir um nome, para o WordPress identificar o tamanho, e uma largura.

Regenerar tamanho

Se implementares tamanhos personalizados de imagens é ainda uma boa ideia regenerares as respectivas miniaturas. Para isso, instala o plugin Regenerate Thumbnails, que vai percorrer todas as imagens anexadas e recriar os novos tamanhos baseados naqueles que definiste no functions.php.

José Freitas

José Freitas

Ajudo pequenas e médias empresas e empreendedores a criar estratégias online para conseguirem melhores clientes, através da comunicação relacional. Na minha vida passada fui jornalista durante 25 anos. A comunicação é a minha praia. Viciado em café intenso e aromático.

Queres receber as nossas mensagens semanais o teu email?

As nossas mensagens são compostas por pequenos textos escritos a pensar em ti (sim a sério, a pensar em ti).

Não enviamos SPAM porque também não gostamos de o receber.