Qual é a melhor maneira de usar a Imagem em destaque para um design responsivo da web?

Tenho uma ideia brilhante e, como o WordPress já cuida de parte do trabalho, só preciso encontrar um bom método para fazer esse trabalho.

Estou trabalhando em um projeto que precisa responder a todos os dispositivos, seja um PC de mesa ou um dispositivo móvel. Portanto, quero que as imagens também sejam responsivas, o que significa que os dispositivos móveis não devem carregar imagens com mais de 50 KB.

Para cada página ou postagem, posso adicionar uma Imagem em destaque usando Miniaturas de postagem que, em tamanho real, a imagem tem cerca de 950x250 a ~ 60 KB. Se eu carregar o site em um iPhone / Android, não gostaria que a imagem ~ 60KB fosse carregada, mas gostaria que a pequena miniatura fosse carregada em seu lugar.

O método padrão para imagens responsivas é tornar a largura da imagem 100% do contêiner pai, assim ele será redimensionado automaticamente se o contêiner pai também for redimensionado. Não é o melhor método para imagens maiores.

Pensei em experimentar o script de imagem responsiva do Filament Group , mas tentei e não funcionou direito. Uma maneira de conseguir isso é através da detecção de agente do usuário, mas prefiro não usar esse método, pois os agentes do usuário podem ser falsificados.

Aqui está outro método para redimensionar imagens em tempo real , mas isso parece estar duplicando o que o WordPress já fez.

Se houver uma maneira de fazer isso com as imagens da Media Gallery, o WordPress será o padrão, com todas as miniaturas redimensionadas já criadas, isso seria preferível.

Passo 1:

Defina dois tamanhos de imagem personalizados, por exemplo:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Passo 2:

Implemente os meios escolhidos para determinar o cliente. Existem várias maneiras, e qual método você está fora do escopo desta pergunta. Mas, supondo que você tenha um método que funcione para você, envie o resultado para alguma variável, como$mobile_device = true;

Etapa 3:

Nos arquivos de modelo, produza a imagem condicionalmente, com base no cliente.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Nota: você pode repetir o if/else(ou fazer a switch) para vários fatores de forma (por exemplo, tamanhos de tela). Basta adicionar vários tamanhos de imagem personalizados e testar condicionalmente para cada tamanho de tela que você deseja oferecer suporte.

A melhor maneira é usar uma grade fluida para criar o tema WordPress e remover os valores de largura e altura das imagens em destaque através de uma função para dimensionamento proporcional. Um tutorial sobre como responder a imagens do WordPress :

Método 1: O CSS

Adicione o seguinte código ao seu arquivo CSS. Isso tornará as imagens escaláveis ​​de acordo com o tamanho da tela.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Removendo altura e largura automáticas nas <img>tags do WordPress

Agora arraste a janela para ver a escala da imagem em ação. Você notará que as imagens no seu blog WordPress são esquisitas. O dimensionamento horizontal fino, mas vertical, nas imagens do WordPress está errado.

Para tornar as imagens redimensionáveis ​​proporcionalmente no WordPress, precisamos remover os valores automáticos de largura e altura que o WordPress adiciona às < img >tags.

Como exemplo, temos que mudar isso:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

Para isso:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Para as imagens que estão em uma postagem ou uma página estática / página de modelo, tudo o que você precisa fazer é adicionar o CSS acima ao style.cssarquivo e remover as propriedades ‘width’e ‘height’da < img >marca no seu editor WordPress. É isso aí!

Mas para a imagem exibida dinamicamente pelo WordPress, como miniaturas de post, a largura e a altura precisam ser removidas dinamicamente usando uma função.

Adicione a seguinte função ao seu functions.phparquivo.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Então, quando você solicitar essas imagens em miniatura na página template.php, substitua:

the_post_thumbnail();

Com isso:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

É isso aí. Arraste e redimensione o navegador para ver suas imagens responsivas do WordPress em ação!

---

Método 2:

O acima não funcionará para alguns temas.

Se você é um dos poucos que não funcionou, ainda pode resolver o problema de imagem usando a função abaixo.

Adicione a seguinte função ao seu functions.phparquivo.

Isso remove os atributos de largura e altura embutidos das imagens recuperadas the_post_thumbnail()e impede que esses atributos sejam adicionados às novas imagens adicionadas ao editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

Uma maneira de conseguir isso é através da detecção de agente do usuário, mas prefiro não usar esse método, pois os agentes do usuário podem ser falsificados.

Esse não é um método ruim e, na verdade, é o padrão do setor, um bom WURFL tem uma classificação de precisão muito alta; os que eu usei e testei sempre retornavam resultados sólidos e testes independentes (acima do que eu me incomodaria em fazer) parecem tê-los em prática. a faixa de 98% +. Quem se importa se algum bot coxo está falsificando um agente do usuário, eles não estão lá por uma boa razão de qualquer maneira.

Para a etapa 2, acho que qualquer um dos métodos se resume ao que é realmente mais rápido, uma consulta de mídia WURFL ou CSS suportada por PHP.

Primeiro você tem que definir "melhor". Minha definição seria: Renderiza a imagem com o efeito pretendido pelo designer em qualquer dispositivo ou tela Renderiza a imagem com a mesma qualidade que o original Consome a quantidade mínima absoluta de sistema e recursos humanos (por exemplo, largura de banda, CPU, tempo de designer / programador)

Aqui estão as abordagens que vi até agora:

1. Carregue a imagem em tamanho real e faça com que o navegador a reduza para ajustar ao layout. Defina a largura máxima da imagem como 100% e reduza-a pela largura do seu contêiner.

Prós: Requer quase nenhum esforço para implementar, compatível com vários navegadores e suportado por navegadores mais antigos.

Contras: geralmente baixa mais dados do que o necessário e, em seguida, gasta ciclos de CPU no cliente, diminuindo a velocidade (lento). Você pode acabar com imagens de baixa qualidade, dependendo do algoritmo de dimensionamento do navegador. Não há possibilidade de direção artística e não pode adaptar a imagem para telas do tipo retina.

2. Use consultas de mídia para ler as propriedades do cliente e buscar uma das várias imagens personalizadas para diferentes pontos de interrupção no seu design. (As tags Extensão de imagens responsivas HTML e Os atributos srcset estão trabalhando para incorporar essa abordagem nas especificações HTML).

Prós: Download mais rápido em dispositivos móveis. Pode lidar com monitores do tipo retina. Qualidade de imagem aprimorada, pois as imagens foram processadas com algum método de alta qualidade. A direção artística se torna possível.

Contras: alguém precisa gastar tempo processando, cortando e gerenciando várias versões da mesma imagem. Mais codificação: agora você precisa especificar cada versão da imagem de alguma maneira e criar consultas de mídia para todos os layouts desejados. Repita o procedimento acima para cada imagem que você servir. Funcionará apenas para navegadores que suportam consultas de mídia CSS3 ou as novas tags.

3. Crie o back-end Otimize as imagens para qualquer tela ou layout usando uma única imagem de origem em tempo real. Na minha opinião, isso equivale a tratar imagens responsivas como uma tarefa de negociação de conteúdo, como o HTTP.

Prós: o Designer não precisa gastar tempo processando imagens e gerenciando várias versões. A imagem com o tamanho ideal é enviada sempre. Pode lidar com telas do tipo retina e ajustar dinamicamente para a direção artística (embora com algum esforço extra - precise saber onde se concentrar). Nenhuma marcação especial ou extra necessária (ressalva abaixo). Compatível com vários navegadores e funcionará para navegadores mais antigos.

Contras: É necessário capturar e transmitir informações sobre as propriedades de tela e navegador do cliente. A primeira vez que uma imagem é carregada pode ser mais lenta do que em qualquer outra abordagem, pois a imagem precisa ser processada (normalmente é armazenada em cache para solicitações posteriores).