Importância das imagens responsivas no WordPress Core

A popularidade das imagens responsivas está aumentando e é algo que ninguém pode ignorar. No entanto, empregar a mesma funcionalidade em CMS populares como o WordPress pode ser uma experiência desafiadora. A tarefa pode ser demorada, embora seja possível para os próprios usuários escreverem recursos dentro do tema. Mas as coisas mudaram drasticamente desde que o WordPress 4.4 foi introduzido, tornando muito mais fácil para desenvolvedores e administradores incorporar a funcionalidade de imagem responsiva em seus temas.

O maior destaque inclui a disponibilidade do plug-in Responsive Images no núcleo do WordPress. Isso significa que os usuários agora podem desfrutar da presença de suporte de imagem responsivo, que vem como um recurso padrão do WordPress. Vamos dar uma olhada em como esse recurso realmente funciona e como pode ser usado com cuidado para aproveitar o potencial do site WordPress.

Funcionamento do recurso

Todo o conteúdo e as imagens serão composta de srcset e tamanhos atributos uma vez que você atualizar para WordPress 4.4. Isso é principalmente para garantir a disponibilidade de todos os tamanhos de imagem, de modo a manter a dimensão real da imagem solicitada. Durante as instâncias em que a proporção da imagem varia em comparação com a imagem original solicitada, os cortes personalizados serão deixados de fora do atributo srcset . Ao mesmo tempo, uma imagem responsiva seria retornada quando uma imagem fosse chamada por meio da função wp-get-attachment-image.

As imagens responsivas atuam como um recurso de plano de fundo no WordPress 4.4 por causa de sua funcionalidade automática que ocorre sempre que uma imagem é carregada no WordPress por meio de um uploader de mídia. Esse processo automático de segundo plano resulta na exibição de atributos de srcset e tamanhos sempre que uma imagem aparece em uma página. Isso significa que não há interfaces visíveis no novo recurso de imagens responsivas. Nenhuma das opções como a presença de formulários para fins de preenchimento ou caixas para fins de verificação e opções para fins de alternância está disponível devido à falta de interfaces visíveis.

Os desenvolvedores de temas terão que garantir que atributos de tamanhos precisos sejam disponibilizados nas imagens por meio da edição do arquivo functions.php do tema. É importante considerar porque srcset e tamanhos atributos presentes na tag de imagem é o que realmente representa as imagens sensíveis em WordPress. O mais difícil de prever é o atributo de tamanhos, embora o WordPress tenha um bom desempenho quando se trata de incluir todos os tamanhos disponíveis no atributo srcset . É função do atributo de tamanhos explicar ao navegador a largura da imagem em cada janela de visualização disponível. No entanto, os resultados podem ser diferentes dependendo do estilo disponível com o tema do usuário, fornecendo o padrão razoável, a saber 'tamanhos = ”(largura máxima: {{largura da imagem}}) 100 vw, {{largura da imagem}}”

Com o atributo tamanhos, os usuários podem realizar especialmente duas coisas. Em primeiro lugar, garante a disponibilidade de um atributo de tamanhos válido na imagem, que agora se tornou um pré-requisito no que diz respeito às especificações. Em segundo lugar, evita que o navegador forneça uma fonte de imagem mais comparada com a largura original solicitada. No entanto, o benefício do atributo de tamanhos padrão torna-se menor sempre que qualquer CSS manipula o tamanho da imagem em larguras de janela de visualização totalmente diferentes.

Os desenvolvedores de temas podem ajustar o atributo de tamanhos correspondente a cada imagem com a ajuda de ganchos de filtro para garantir a entrega de atributos de tamanhos perfeitos durante cada ponto de interrupção. Portanto, é desejável garantir que o tema não dependa do atributo de tamanhos padrão quando se trata de oferecer suporte a imagens responsivas precisas. O principal motivo é o fato de que os navegadores não têm permissão para modificar ou alterar a fonte da imagem pelo atributo de tamanhos padrão durante as instâncias em que o tamanho da janela de visualização é menor em comparação com o tamanho da imagem original solicitada. No entanto, se a imagem já foi alterada com CSS em um ponto de interrupção, a fonte também não pode ser alterada.

Se você é um indivíduo que tem acesso a uma Base de Código WordPress ou se é um desenvolvedor de temas, então é mais necessário filtrar as imagens nos temas para fornecer atributos de tamanhos que sejam precisos. Essas devem ser as coisas mais importantes a serem feitas após o lançamento da nova versão.

Configuração de imagens responsivas para o seu tema

Uma série de novos ganchos são introduzidos junto com as novas funções que podem ser usadas para fornecer um nível de suporte de imagem responsivo que são ajustados para corresponder ao seu tema. A largura máxima da imagem que deve ser incluída no atributo srcset pode ser filtrada pelo desenvolvedor do tema por meio do gancho max_srcset_image_width. Os atributos srcset da imagem podem ser filtrados conectando-se a wp_calculate_image_srcset, enquanto o atributo tamanhos pode ser customizado por um desenvolvedor de tema para ajustar os pontos de interrupção da imagem em seu tema por meio da filtragem de wp_calculate_image_sizes.

As imagens de conteúdo podem ser filtradas com wp_calculate_image_sizes, enquanto miniaturas de postagem / imagens em destaque podem ser filtradas com a função wp_get_attachment_image_attributes. A necessidade de duas funções diferentes é necessária, uma vez que o tema muda para a maneira como as imagens apresentadas são exibidas em pontos de interrupção diferentes e é totalmente diferente em comparação com a maneira como as imagens de conteúdo são exibidas nas mesmas circunstâncias. Assim, o WordPress 4.4 oferece aos desenvolvedores de temas uma oportunidade aprimorada de filtrar imagens de várias maneiras e, portanto, ser o mais específico possível.

Tudo isso destaca os benefícios instantâneos que os usuários e desenvolvedores de temas serão capazes de obter com suporte de imagem responsivo por meio da atualização do WordPress 4.4. Também permite que os desenvolvedores de temas incluam imagens claras e nítidas, independentemente do tamanho da janela de visualização e da densidade de pixels, melhorando assim o desempenho do site, pois as páginas da web podem evitar o tempo adicional necessário para carregar imagens maiores. Embora seja um procedimento automático para os usuários, os desenvolvedores de temas são responsáveis ​​por ajustar o atributo de tamanhos de imagem, gastando tempo no arquivo functions.php dentro do tema. Além disso, deve-se ter em mente que criar e mesclar o plug-in Responsive Images é mais um esforço de equipe.