# 133: Descubriendo imágenes receptivas - Trucos CSS

Probablemente soy un poco raro en el sentido de que disfruté tratando de mantenerme al día con las imágenes receptivas. Es un problema interesante que generó muchas soluciones interesantes. Sin embargo, todo está comenzando a concluir ahora, ahora que las soluciones oficiales son:

1. y amigos
2. 

   Digamos que estamos en una pantalla de 1x. Debido a que le hemos dicho al navegador que usaremos estas imágenes tan grandes como sea posible (100% de la ventana gráfica), los "puntos de interrupción" para cuando el navegador muestre las imágenes aparecerán en 1280px, 640px, y 320px, los mismos tamaños exactos que le hemos dicho que son las imágenes.

   Si estamos en una pantalla de 2x, esos "puntos de interrupción" se reducirán a la mitad (independientemente de lo que hagamos para dimensionar esas imágenes) y estarán en 640px, 320px y 160px.

   Ahora digamos que usamos las mismas imágenes, pero sabemos mucho más sobre el diseño de nuestra página y usamos algo como esto:

   Aquí estamos diciendo (con el sizesatributo), si la ventana gráfica es de 500 px o menor, pretendemos mostrar la imagen a 250 px de ancho. Si la ventana gráfica es más ancha que eso, muestre la imagen a 500 px de ancho.

   Eso coincidiría con CSS de esta manera:

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

   En una pantalla 1x, siempre obtendrá la imagen de 320w (pequeña) cuando la ventana gráfica tenga 500px de ancho o menos, y siempre obtendrá la imagen de 640w (mediana) cuando la ventana sea más grande. Nunca obtendrá la imagen grande, porque puede decirle que nunca necesitará tantos píxeles.

   En una pantalla 2x, siempre obtendrá la imagen de 640w (media) cuando la ventana gráfica tenga 500px de ancho o menos (porque cree que necesita 500px de píxeles y la pequeña no es suficiente con 320px), y siempre obtendrá la Imagen de 1280w (grande) cuando la ventana gráfica es más grande. Nunca obtendrá la imagen pequeña, porque nunca hay suficientes píxeles para cubrir lo que le ha dicho que intenta representar la imagen.

   Talla real

   Recuerde que el tamaño real de la imagen aún depende de usted. Creo que en la mayoría de los casos eres tú quien lo hace a través del CSS. Y el CSS siempre gana. Lo que declare será el ancho renderizado de la imagen sin importar lo que suceda con srcsety sizesesas cosas. Eso solo determina qué imagen se mostrará.

   Esto es lo que hace que el atributo de tamaños sea un poco difícil. Digamos que tienes algo como:

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

   Eso no es nada inusual. Entonces, ¿qué tamaño usas en el sizesatributo? Eso sería 13,33% (multiplíquelos todos juntos) porque ese número debe ser relativo a la ventana gráfica, no al contenedor. Y eso no tiene en cuenta los márgenes y el relleno y las cosas en esos contenedores, por lo que es una especie de conjetura. Supongo que se acercan los recuentos en herraduras, granadas de mano y el atributo de tamaño.

   Entonces, digamos que aparece una consulta de medios y el cuerpo en realidad se vuelve un 75% de ancho además de todo eso. Debe saberlo para poder ajustar el tamaño que cree que tendrá el renderizado de las imágenes. Su atributo de tallas podría convertirse en:

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

   Luego, repita eso para cada consulta de medios de diseño que tenga que afecte a las imágenes de contenido. Puede volverse un poco complejo.

   ¿Tamaños prácticos?

   Sospecho que la mayoría del uso del mundo real usará algo como:

   Suponiendo que las imágenes de contenido tendrán aproximadamente la mitad del tamaño de la ventana del navegador en pantallas grandes y el tamaño completo de la ventana del navegador en pantallas pequeñas, simplemente deje que los puntos de interrupción sucedan donde suceden. De esta manera, obtendrá una opción bastante decente sin tener que hacer coincidir exactamente todas sus consultas de medios.

   Y recuerde que estas son imágenes de contenido. HTML tiende a durar más que CSS o JS, especialmente cuando es contenido.

   Otras cosas para saber

   También puede especificar si una imagen es 2x o 1x con srcset. Entonces, un caso de uso realmente simple puede ser:

   Eso por sí solo es bastante útil. No lo mezcle con especificar anchos. Como dice Eric Portis:

   Y nuevamente permítame enfatizar que si bien puede adjuntar descriptores de resolución 1x / 2x a las fuentes en srcsetlugar de wdescriptores, 1x / 2x & w no se mezclan. No uses ambos en el mismo srcset. En realidad.

   ¿Y recuerdas cuando dije que el relleno de imagen original era fácil? Lo nuevo puede ser así de fácil, pero los elementos internos también admiten srcsety sizes. Eso significa que puede ser muy específico. Agrega otra capa a esto:

   1. Tu decides cual

      Enlaces

      • El artículo de Martin Wolf que inspiró esto
      • Picturefill es el polyfill que desea utilizar.
      • Artículo de Smashing Magazine sobre Picturefill 2.0 por Tim Wright
      • Eric Portis sobre por qué existe Srcset y tamaños y qué resuelve mejor que las consultas de medios
      • Eric Portis con más información sobre el nuevo

      Vea el caso de prueba de Pen srcset y tamaños de Chris Coyier (@chriscoyier) en CodePen.