Existe algo errado com minha definição de srcset ou o suporte atual ao navegador é apenas fraco?
Estou tentando entender o novo atributo 'srcset' de 'img'. Criei uma página de teste simples, mas o comportamento que vejo nos navegadores é surpreendente.
Primeiro, aqui está a página de teste:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test Page</title>
<style type="text/css">
section.wrapper {
width: 100%;
text-align: center;
}
section.wrapper div {
margin: 0 auto;
}
section.wrapper div img {
width: 288px;
height: 216px;
}
@media (min-width: 30em) { }
@media (min-width: 40em) {
section.wrapper div img {
width: 576px;
height: 432px;
}
}
@media (min-width: 48em) { }
@media (min-width: 64em) {
section.wrapper div img {
width: 720px;
height: 540px;
}
}
@media (min-width: 72em) {
section.wrapper div img {
width: 960px;
height: 720px;
}
}
</style>
</head>
<body>
<section class="wrapper">
<div class="imagecontainer">
<img src="images/image-720.jpg"
srcset="images/image-1920.jpg 1920w,
images/image-1440.jpg 1440w,
images/image-1152.jpg 1152w,
images/image-960.jpg 960w,
images/image-840.jpg 840w,
images/image-720.jpg 720w,
images/image-576.jpg 576w,
images/image-420.jpg 420w,
images/image-288.jpg 288w,
images/image-144.jpg 144w"
sizes="(min-width: 40em) 576px, (min-width: 64em) 720px, (min-width: 72em) 960px, 100vw"
alt="Test" />
</div>
</section>
</body>
</html>
Estou testando em um Retina Macbook Pro e um Retina iPod, com Chrome / 40.0.2214.115 e Firefox 35.0 (no Macbook Pro), Chrome / 40.0.2214.73 e Safari / 600.1.4 (no iPod). Ativei o suporte ao srcset no Firefox. Estou testando em uma conexão rápida.
O que estou tentando ver é se os vários navegadores podem obter uma imagem de tamanho adequado de maneira inteligente. No entanto, eles não estão se comportando da maneira que eu esperava.
Para os navegadores iOS, minha expectativa é que eles usem o valor de fallback de '100vw' no atributo 'size'. Como a largura da janela de visualização para um iPod no modo retrato é de 320px, eu esperaria que eles fossem para a imagem de 288px ou 420px. Ou, possivelmente, como é um dispositivo Retina, eles solicitam as imagens 576px ou 840px. Em vez disso, o Safari e o Chrome solicitam a imagem 1920px.
O navegador Firefox da área de trabalho faz duas solicitações. A primeira é para a imagem padrão especificada no atributo 'src'. O segundo é para a imagem 1920px. Ele sempre solicita a maior imagem, independentemente do tamanho atual da janela.
O Desktop Chrome chega mais perto de exibir o que eu consideraria o comportamento correto, embora isso seja peculiar. Se meu arquivo de teste for local, ele sempre captura a imagem 1920px, independentemente do tamanho da janela de exibição. Se eu colocar o arquivo de teste em um servidor remoto, ele exibirá uma preferência geral pela imagem de 1152px (mesmo quando a imagem deve ser renderizada em 960px, tornando 1920px a opção lógica para um dispositivo 2x). Se eu limpar o cache do Chrome, redimensionar a janela e recarregá-la, algumas vezes solicitaremos imagens menores.
Se o que estou vendo é o comportamento esperado para esses navegadores, dado o estado atual do suporte de cada navegador, fica claro para mim que provavelmente não devo fornecer as imagens de alta resolução - melhor servir uma imagem com menos aparência perfeito em uma tela 2x do que descarregar um JPEG gigante em um dispositivo móvel em uma conexão possivelmente lenta. E se o Firefox sempre puxar a imagem padrão, provavelmente eu devo torná-la menor e não maior.
Existe um problema com meu código que está causando esses comportamentos? E, se não houver, existem práticas recomendadas para o uso do srcset que lidam com as idiossincrasias das várias implementações atuais, aproveitando as possibilidades do recurso sem fazer o download de imagens muito grandes?