# 133: Descobrindo imagens responsivas - CSS-Tricks

Provavelmente sou um pouco raro no sentido de que gostei de tentar me manter atualizado com as imagens responsivas. É um problema interessante que gerou muitas soluções interessantes. A coisa toda está começando a se resolver agora, agora que as soluções oficiais são:

1. e amigos
2. 

   Digamos que estamos em uma tela 1x. Como dissemos ao navegador que usaremos essas imagens o maior possível (100% da janela de visualização), os "pontos de interrupção" para quando o navegador for girar as imagens acontecerão a 1280px, 640px, e 320 px, os mesmos tamanhos exatos que dissemos que as imagens têm.

   Se estivermos em uma tela 2x, esses “pontos de interrupção” serão cortados pela metade (independentemente do que realmente fizermos para dimensionar essas imagens) e estarão em 640px, 320px e 160px.

   Agora, digamos que usamos as mesmas imagens, mas sabemos muito mais sobre o layout de nossa página e usamos algo assim:

   Aqui estamos dizendo (com o sizesatributo), se a janela de visualização for 500px ou menor, pretendemos exibir a imagem com 250px de largura. Se a janela de visualização for mais larga do que isso, exiba a imagem com 500 px de largura.

   Isso combinaria com o CSS assim:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   Em uma tela 1x, você sempre obterá a imagem de 320 W (pequena) quando a janela de visualização tiver 500 pixels de largura ou menor, e você sempre terá a imagem de 640 W (média) quando a janela de visualização for maior. Você nunca obterá uma imagem grande, porque isso pode dizer que você nunca precisará de tantos pixels.

   Em uma tela 2x, você sempre obterá a imagem de 640 W (médio) quando a janela de visualização tiver 500 pixels de largura ou menor (porque ela pensa que precisa de 500 pixels de pixels e o pequeno não é suficiente em 320 pixels), e você sempre obterá o Imagem de 1280w (grande) quando a janela de visualização é maior. Você nunca obterá a imagem pequena, porque nunca são pixels suficientes para cobrir o que você disse que pretende renderizar a imagem.

   Dimensionamento real

   Lembre-se de que o tamanho real da imagem ainda depende de você. Eu acho que na maioria dos casos é você fazendo isso por meio do CSS. E o CSS sempre vence. O que você declarar lá será a largura renderizada da imagem, não importa o que aconteça com o srcsete sizesoutras coisas. Isso apenas determina qual imagem será exibida.

   Isso é o que torna o atributo de tamanhos um pouco difícil. Digamos que você tenha algo como:

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   Isso não é incomum. Então, agora, qual tamanho você usa no sizesatributo? Isso seria 13,33% (multiplique-os todos juntos) porque esse número precisa ser relativo à janela de visualização, não ao contêiner. E isso não leva em consideração as margens e preenchimento e outras coisas nesses contêineres, então é uma espécie de palpite. Acho que contagens aproximadas em ferraduras, granadas de mão e o atributo de tamanho.

   Então, digamos que uma consulta de mídia apareça e o corpo realmente tenha 75% de largura acima de tudo isso. Você precisa saber disso para poder ajustar o que acha que será o tamanho renderizado das imagens. Seu atributo de tamanhos pode se tornar:

   sizes="(min-width: 500px) 8%, 13.33%"

   Em seguida, repita isso para cada consulta de mídia de layout que afete as imagens de conteúdo. Pode ser um pouco complexo.

   Tamanhos práticos?

   Suspeito que a maior parte do uso no mundo real usará algo como:

   Supondo que as imagens de conteúdo terão cerca da metade do tamanho da janela do navegador em telas grandes e o tamanho total da janela do navegador em telas pequenas - apenas deixe os pontos de interrupção acontecerem onde acontecerem. Você ainda terá uma escolha bastante decente dessa forma, sem ter que se preocupar com a correspondência exata de todas as suas consultas de mídia.

   E lembre-se de que essas são imagens de conteúdo. HTML tende a durar mais do que CSS ou JS, especialmente quando é conteúdo.

   Outras coisas para saber

   Você também pode especificar se uma imagem é 2x ou 1x com srcset. Portanto, um caso de uso realmente simples pode ser:

   Só isso é muito útil. Não misture com a especificação de larguras. Como Eric Portis diz:

   E mais uma vez, deixe-me enfatizar que, embora você possa anexar descritores de resolução 1x / 2x às fontes em srcsetvez de wdescritores, 1x / 2x e w não se misturam. Não use os dois ao mesmo tempo srcset. Mesmo.

   E lembra quando eu disse que o preenchimento da imagem original era fácil? O novo pode ser fácil, mas os elementos internos também suportam srcsete sizes. Isso significa que você pode ser muito específico. Ele adiciona outra camada a esta:

   1. Você decide qual

      Links

      • O artigo de Martin Wolf que inspirou este
      • Picturefill é o polyfill que você deseja usar.
      • Artigo da Smashing Magazine sobre Picturefill 2.0 por Tim Wright
      • Eric Portis explica por que Srcset e tamanhos existem e o que ele resolve melhor do que consultas de mídia
      • Eric Portis com mais sobre o novo

      Veja o caso de teste Pen srcset & Tamanhos por Chris Coyier (@chriscoyier) no CodePen.