Fico feliz que o WP 4.4. vem com um recurso de imagem responsivo integrado. Mas eu não estou tão feliz com isso.
Eu configurei alguns tamanhos de imagem personalizados no meu functions.php
:
add_image_size('post-thumbnails', 600, 600, true);
add_image_size('news-large', 1024, false);
add_image_size('news-small', 500, false);
add_image_size('3-col', 500, 375, true);
add_image_size('presscutting', 600, 850, true);
add_image_size('medium-large', 768, false); // just added today for devices support
add_image_size('full-feature-image', 2000, false);
add_image_size('gallery-image', 800, 600, true);
Como percebi, as imagens que não são cortadas (corte definido como false
) são adicionadas ao srcset
. Uma imagem é impressa no frontend como (quebra de linha adicionada para melhor legibilidade):
<img width="2000" height="1335"
src="http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg"class="attachment-full-feature-image size-full-feature-image"
alt="asdf"
srcset="
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300w,
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w,
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w,
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-500x334.jpg 500w"
sizes="(max-width: 2000px) 100vw, 2000px">
Mas agora meu problema: Na minha tela, apenas as imagens especificadas com largura de 1024 pixels são mostradas, embora tenha uma resolução de tela de 1600px. Então todas as imagens parecem borradas.
Como posso fazer com que o WP e / ou o meu navegador usem a imagem de 2kpx?
Eu teria que adicionar novos tamanhos de imagem para, digamos, 1280px, 1440px, 1600px, 1968px? Ou existe uma maneira mais simples de dizer ao WP / o navegador para usar a imagem maior em vez de mostrar uma versão desfocada e muito pequena?