Las imágenes son notoriamente uno de los aspectos más desafiantes del diseño web sensible. Hoy veremos cómo el Elemento, una solución al problema de imágenes responsivas, puede ser utilizado. ahora mismo.
Primero, el problema
Los días de diseño de sitios web de ancho fijo y píxeles perfectos están realmente detrás de nosotros. En la actualidad, los monitores de pantalla ancha, los televisores de Internet, las tabletas de múltiples tamaños y los teléfonos inteligentes, ahora nuestros diseños tienen que atender todo, desde 320px de ancho hasta potencialmente hasta 7680px.
Junto con este paisaje de resolución múltiple, viene la necesidad de que las imágenes se estiren o enciendan para cumplir con estos requisitos tan variados. Esto puede resultar ser un problema dado que, con la excepción de los gráficos vectoriales, la gran mayoría de las imágenes tienen anchos específicos basados en píxeles que no cambian.
Asi que que hacemos?
La solución actual, más común
Como regla general, encontrará lo siguiente en casi cualquier CSS de sitio sensible:
img ancho máximo: 100%; altura: auto;
Este código utiliza el ancho máximo: 100%; configuración para garantizar que las imágenes nunca vayan más allá del ancho de su contenedor principal. Si el contenedor principal se encoge por debajo del ancho de la imagen, la imagen se reducirá junto con él. los altura: auto; La configuración garantiza que la relación de aspecto de las imágenes se conserve a medida que esto ocurre.
Una imagen fluida para todas las circunstancias.
Resuelve el problema en un aspecto, lo que nos permite mostrar la misma imagen en muchas circunstancias diferentes. Pero no nos permite especificar diferente Imágenes para diferentes circunstancias..
Una nueva solución:
es un nuevo elemento que se convertirá en parte de HTML5.
Traerá el proceso para colocar imágenes receptivas al día con la forma actual y los elementos funcionan. Te permitirá colocar múltiples fuente etiquetas, cada una de las cuales especifica diferentes nombres de archivos de imagen junto con las condiciones en las que se deben cargar.
Te permitirá cargar una imagen completamente diferente dependiendo de:
Resultados de consultas de medios, por ejemplo. Altura de la ventana gráfica, ancho, orientación
Densidad de pixeles
Esto a su vez significa que puedes:
Cargue imágenes del tamaño de archivo adecuado, haciendo el mejor uso del ancho de banda disponible.
Cargue imágenes recortadas de manera diferente con diferentes relaciones de aspecto para adaptarse a los cambios de diseño en diferentes anchos.
Cargue imágenes de mayor resolución para pantallas de mayor densidad de píxeles.
Diferentes imágenes servidas, según las circunstancias.
Cómo Trabajo?
Los pasos básicos para trabajar con son:
Crear apertura y cierre. etiquetas.
Dentro de esas etiquetas, crea un Elemento para cada consulta que quieras ejecutar..
Agrega un medios de comunicación atributo que contiene su consulta en cosas como la altura de la ventana gráfica, el ancho, la orientación, etc..
Agrega un srcset atributo con el nombre de archivo de imagen correspondiente para cargar.
Añade nombres de archivo extra a tu srcset atributo si desea proporcionar diferentes densidades de píxeles, por ejemplo, Retina muestra.
Añadir una reserva elemento.
Aquí hay un ejemplo básico que verifica si la ventana gráfica es más pequeña que 768px, entonces si carga una imagen más pequeña:
Notarás que la sintaxis utilizada en el medios de comunicación el atributo es el mismo que podría utilizar para crear consultas de medios CSS. Puede utilizar las mismas comprobaciones, lo que significa que puede consultar anchura máxima, ancho mínimo, Altura máxima, min-height, orientación y así.
Puede usar estas comprobaciones para hacer cosas como cargar versiones horizontales o verticales de una imagen, dependiendo de la orientación del dispositivo, y aún puede combinar consultas de tamaño al mismo tiempo. Por ejemplo:
El código anterior carga una versión más pequeña, recortada horizontal, de la imagen en un dispositivo más pequeño, orientado al paisaje. Carga una versión más grande de la misma imagen en un dispositivo más grande orientado al paisaje.
Si el dispositivo tiene orientación vertical, carga una versión recortada vertical, en tamaño pequeño en un dispositivo pequeño o en tamaño grande en un dispositivo grande.
Si desea proporcionar diferentes versiones de resolución de sus imágenes para pantallas de mayor densidad, lo hace agregando nombres de archivo adicionales a la srcset atributo. Por ejemplo, veamos nuestro primer fragmento de código desde arriba con el manejo de la resolución 2x de Retina agregada:
La consulta de medios aún se evalúa primero para que pueda controlar las dimensiones en las que aparecerá su imagen en la pantalla. Luego, se comprobará la densidad de píxeles de la pantalla y, si las preferencias del usuario admiten y permite mayores densidades, se cargará la versión de mayor densidad de la imagen..
Utilizando Hoy
En este momento la implementación nativa para Está en las obras para Chrome, Firefox y Opera. En el futuro es probable que veamos un soporte generalizado a medida que otros navegadores también se pongan en práctica. Pero por el momento ese soporte aún está por llegar..
Mientras tanto, no tiene que esperar si desea comenzar a usar ahora mismo. Simplemente tienes que usar Picturefill 2.0; un relleno de plástico proporcionado por esas personas inteligentes en Filament Group.
Después de descargar el picturefill.js para su proyecto, se puede implementar simplemente cargándolo en la sección principal de su sitio:
También hay una opción para cargar el script de forma asíncrona para una mayor eficiencia, que puede leer en la documentación de Picturefill.
Con este script cargado, el El elemento funcionará como he explicado, con solo algunas limitaciones..
Limitaciones de Picturefill
IE9
Picturefill funciona bien con otras versiones de IE, sin embargo IE9 no reconoce fuente Elementos que están envueltos en. imagen etiquetas Para evitar esto, envuelva condicionalmente sus elementos de origen en vídeo Etiquetas que luego las harán visibles para IE9, por ejemplo:
Android 2.3
Al igual que IE9, Android 2.3 no puede ver fuente elementos dentro de un imagen elemento. Sin embargo, puede entender la srcset atributo cuando se utiliza en un regular img etiqueta. Asegúrate de incluir siempre tu reserva img elemento con el nombre de archivo predeterminado en el srcset atributo para Android 2.3 y cualquier otro navegador que pueda tener el mismo problema.
Requiere JavaScript y soporte de consulta de medios nativos
Al tratarse de una solución basada en JavaScript, en consecuencia requiere que JavaScript esté habilitado en el navegador. Picturefill 2.0 no ofrece una solución alternativa "no-js" porque si lo hiciera, aparecerían múltiples imágenes cuando el soporte nativo del navegador está desplegado. Sin embargo, tiene la opción de usar Picturefill 1.2 si una opción "no-js" es una necesidad para usted.
El otro requisito que tiene Picturefill es el soporte de consultas de medios nativos, para habilitar las consultas en el medios de comunicación atribuir al trabajo. Todos los navegadores modernos admiten consultas de medios, con IE8 e inferior es el único navegador no compatible con una pequeña base de usuarios restante.
Posibles solicitudes extra de HTTP
En navegadores que tienen soporte nativo para srcset, pero aun no para imagen, Es posible el nombre de archivo especificado en la alternativa. img El elemento puede solicitarse antes de que una imagen mejor ajustada fuente los elementos son determinados.
Esto es solo un problema temporal y desaparecerá una vez que sea nativo imagen se implementa la implementación.
Más información
Lea más sobre Picturefill 2.0 y descárguelo para su proyecto en la página de Picturefill
Obtenga información completa sobre el elemento de responsiveimages.org.
Probar En tu proyecto de hoy y ve lo que piensas.!
Share
Una imagen fluida para todas las circunstancias.
Accentsconagua
Diferentes imágenes servidas, según las circunstancias.
