WP 4.4. responsivo carrega imagem normal depois de carregar a imagem responsiva

4

Eu tenho os dois novos tamanhos adicionados que estou testando:

// testing
add_image_size('new-small', 500, false);
add_image_size('medium-large', 768, false); // just added today for devices support

imagem gerada em html:

<img class="alignnone size-full wp-image-24" src="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg"alt="test-image" width="932" height="524" srcset="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-500x281.jpg 500w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-768x432.jpg 768w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg 932w" sizes="(max-width: 932px) 100vw, 932px">

Estou assistindo a guia de rede no chrome e quando eu recarregar o navegador em 500x900 (altura da largura), ele carrega a imagem correta primeiro e, em seguida, carrega imediatamente a imagem natural depois:

Alguém se deparou com isso ou sabe como consertar isso?

    
por RMH 07.01.2016 / 23:46

1 resposta

6

Esta é mais uma questão geral do srcset e do navegador, não uma questão específica do WordPress.

No entanto, em geral, você não pode prever o que os navegadores farão com as informações do srcset. Para o seu exemplo específico, parece que você não limpou completamente o cache entre seus recarregamentos. Observe a resposta 304 indicando que seu navegador já tem a imagem em cache (304 é a resposta não modificada).

Em tal situação, é perfeitamente razoável que um navegador simplesmente use a maior imagem que já possui no cache. Você já tem a versão de maior qualidade e também pode usá-la. Usar uma imagem de baixa qualidade aqui não lhe poupará nenhuma largura de banda de rede, o que é o ponto principal de srcset para começar. O algoritmo do Chrome não é simplesmente "use o tamanho da imagem que se encaixa".

Então, para realmente testar, você precisa limpar o cache e recarregar. Toda vez.

Algumas informações básicas sobre como diferentes navegadores usam o srcset: enlace

Edit: Como Mark Kaplun aponta nos comentários, é totalmente possível para um navegador escolher uma imagem maior com base na velocidade da conexão. O Chrome, por exemplo, sempre escolherá a maior imagem se souber que a imagem está no sistema de arquivos local (como se estivesse visualizando um arquivo .html local). Pode também saber sobre "localhost" e escolher a imagem grande, então também. Você não consegue forçar a questão, você não pode espreitar por trás da cortina. Na verdade não. O objetivo do srcset é fornecer aos navegadores as informações para permitir que eles escolham a imagem. Não é para você decidir qual imagem é usada em quais circunstâncias.

    
por Otto 20.01.2016 / 20:11