Imagens responsivas no WordPress em 2020: o que você precisa saber

WordPress é um sistema de gerenciamento de conteúdo popular que permite criar sites sem usar código ou com o uso mínimo de código. Você pode fazer isso instalando temas que vêm com layouts prontos para uso e baixando plug-ins que adicionam funcionalidade ao seu site.

A maioria dos temas do WordPress vem com um layout responsivo integrado, adaptando seu site ao tamanho da tela e às especificações do dispositivo dos usuários. No entanto, às vezes os temas ficam com erros, as imagens não são exibidas corretamente e você precisa solucionar os problemas das configurações padrão responsivas.

Além disso, se você alterar o tema padrão, poderá ter problemas com imagens responsivas. Entender como as imagens responsivas funcionam no WordPress pode ajudá-lo a entender a origem do problema e aplicar a solução correta.

O que são imagens responsivas?

Imagens responsivas são imagens exibidas para um usuário de acordo com o tamanho da tela e as especificações do dispositivo. Por exemplo, uma imagem de alta resolução enviada para um grande monitor HD ou uma imagem de baixa resolução enviada para um pequeno celular antigo. O objetivo das imagens responsivas é maximizar a eficiência do uso da largura de banda sem comprometer a experiência do usuário.

Você pode adicionar imagens responsivas fazendo upload de vários tamanhos ou formatos de imagem. Então, quando um usuário visita seu site, você pode usar uma combinação de HTML, CSS e JavaScript para exibir a imagem que está em conformidade com os parâmetros de tela do usuário.

A criação dos vários tamanhos e formatos de que você precisa geralmente requer um pouco de trabalho manual. Isso é particularmente verdadeiro se você deseja alterar o corte de imagens para melhor se adequar a tamanhos de tela específicos. Depois que os vários tamanhos forem salvos, você precisará hospedar todas as suas imagens em seu servidor da web para serem veiculadas conforme necessário.

Como alternativa, você pode usar ferramentas, como redes de entrega de conteúdo (CDN) ou soluções de gestão de ativos digitais (DAM) para redimensionar e publicar imagens dinamicamente. Essa pode ser uma opção mais fácil se você tiver muitas imagens ou vários sites. O uso desses métodos requer a importação da biblioteca apropriada em seus scripts de página e a realização de uma chamada de API para a imagem necessária.

Leia Também:  Como indexar o novo conteúdo do WordPress mais rápido no Google

Por que você deve usar imagens responsivas

Existem muitos motivos pelos quais você deve usar imagens responsivas em seus sites para seu próprio benefício e dos usuários. Além dos motivos abaixo, lembre-se de que o Google dá preferência de pesquisa a sites que possuem imagens responsivas.

  • Uso eficiente de largura de banda: Imagens responsivas garantem que apenas a imagem mais útil para o usuário seja exibida e baixada. Isso elimina o desperdício de largura de banda, pois você não está enviando arquivos maiores do que o usuário pode realmente usar. Também torna seu site mais fácil de usar, especialmente para usuários móveis que geralmente têm dados limitados.
  • Tempo de carregamento mais rápido: Quanto menos dados um cliente de usuário tiver para baixar, mais rápido será o tempo de carregamento de sua página. Isso é vital, pois muitos usuários não querem esperar mais do que alguns segundos para que uma página carregue e abandonarão um site se ele demorar muito para carregar.
  • Experiência do usuário aprimorada—Ao adicionar imagens ao seu site, você o faz para dar ao usuário uma experiência específica. As imagens responsivas garantem que os usuários possam ver as imagens da maneira que desejam, sem distorção ou deslocamento. Isso proporciona ao usuário uma experiência mais agradável e aumenta a probabilidade de ele permanecer em seu site.

Como as imagens responsivas funcionam no WordPress?

A partir de WordPress (WP) 4.4, adicionar imagens à sua biblioteca de mídia a configura automaticamente para imagens responsivas. Quando você carrega uma imagem, o WP cria automaticamente cinco cópias de sua imagem em vários tamanhos. Esses tamanhos incluem:

  • Cheio: O tamanho original da carga
  • grande: Largura ou altura máxima de 1024 px
  • Médio Grande: Largura ou altura máxima de 768 px
  • Médio: Largura ou altura máxima de 300 px
  • Miniatura: Largura ou altura máxima de 150 px
Leia Também:  Como conduzir o funil por meio do marketing de conteúdo e do link building

Você também pode modificar esses tamanhos ou adicionar outros tamanhos manualmente.

Para controlar como esses tamanhos são usados, o WP inclui o srcset e os atributos de tamanhos da tag img. Esses atributos fornecem informações ao navegador sobre quais tamanhos estão disponíveis e quando esses tamanhos devem ser selecionados.

No atributo srcset, atribua uma largura de imagem. Em seguida, o navegador verifica a largura e seleciona a maior imagem que corresponde à largura do navegador ou menor. No atributo size, especifique o tamanho para o qual a imagem deve ser dimensionada. Isso permite selecionar a imagem mais eficiente e garantir que ela seja exibida em proporção à tela.

Um exemplo de como isso se parece em sua tag de imagem pode ser visto abaixo:

<img src="https://wpmayor.com/responsive-images-in-wordpress/image/sample.jpeg"
    srcset="https://wpmayor.com/image/sample-tiny.jpeg 150w,
            https://wpmayor.com/image/sample-small.jpeg 300w,
            https://wpmayor.com/image/sample-medium.jpeg 600w,
            https://wpmayor.com/image/sample.jpeg 1000w"
    sizes="(min-width: 75rem) 60rem,
           (min-width: 50rem) 40rem,
           (min-width: 40rem) calc(100vw - 10rem),
           100vw"
    alt="A sample image">

O que você deve saber sobre imagens responsivas

Ao trabalhar com imagens responsivas, alguns pontos devem ser considerados. Essas considerações podem ajudá-lo a garantir que suas imagens sejam exibidas conforme o esperado e que seus usuários tenham a melhor experiência possível.

“Tamanhos” é opcional com uma captura de tela

Definindo o seu atributo de tamanho, você precisa entender que ele especifica a imagem necessária, bem como a largura renderizada das imagens. Isso significa que você precisa ter cuidado para combinar as larguras entre as imagens. Se as larguras da imagem diferem entre os srcs, você pode acabar com uma imagem que deforma quando renderizada. Além disso, se você usar srcset sem incluir tamanhos, deve estar ciente de que os navegadores clientes usarão uma largura padrão de 100vw.

A reprodução de imagens varia de acordo com o navegador

Os navegadores normalmente exibem o tamanho da imagem que melhor se ajusta ao tamanho da janela de visualização. No entanto, navegadores diferentes usam métodos diferentes para selecionar uma imagem, portanto, a experiência do usuário pode ser inconsistente. Por exemplo, alguns navegadores priorizarão versões em cache de imagens, independentemente de o tamanho corresponder.

Leia Também:  Como calcular o ROI de SEO usando o Google Analytics

Essa variabilidade e a falta de controle granular significam que você não deve confiar no srcset para decisões de design. Em vez disso, você deve considerar, por exemplo, oferecer diferentes imagens ou imagens com diferentes proporções de aspecto para melhor se adequar a dispositivos específicos. Para conseguir isso, você pode usar o elemento .

“Srcset” não é um valor padrão

Se você estiver usando um tema desenvolvido por outra pessoa, observe que srcset não é implementado por padrão. Muitos temas, especialmente os mais antigos, não incluem este ou os atributos de escultura. Se desejar usar esses atributos, você deve personalizar o tema que está usando ou encontrar um tema diferente que implemente os atributos.

Se você não tiver certeza se o seu tema usa srcset e ele não diz isso na documentação do tema, você pode verificar manualmente. A maneira mais fácil de fazer isso é abrir uma de suas páginas com uma imagem em seu desktop ou laptop. Dependendo do seu navegador e sistema operacional, você deve ser capaz de clicar com o botão direito na imagem e escolher Inspecionar. Isso permite que você olhe para o item e veja se srcset está implementado.

conclusão

Imagens responsivas são cruciais para criar uma experiência positiva para o usuário. Quando as imagens respondem, os usuários podem visualizar os arquivos em qualquer tipo de dispositivo sem ter problemas. Você também pode usar imagens responsivas para aumentar os tempos de carregamento e usar a largura de banda com eficiência.

A maioria dos temas do WordPress vem com um conjunto de configurações de imagem responsivas, mas muitas vezes você pode fazer alterações. Antes de fazer alterações nas configurações padrão, você deve garantir que entendeu totalmente as consequências. Para evitar perda de dados, certifique-se de fazer backup do seu site com antecedência e editar um tema filho em vez do arquivo original.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: