Cómo usar HTML5 Elemento para lograr una imagen receptiva

El diseño receptivo puede estar aquí para quedarse, pero hay muchos problemas que deben abordarse cuando se trata de hacer que las imágenes sean receptivas . Aunque las imágenes con capacidad de respuesta se redimensionan automáticamente según el tamaño de la ventana gráfica (lo que es técnicamente sencillo), un problema al que se enfrentan los usuarios es que el punto vocal de la imagen apenas será visible cuando la imagen sea demasiado pequeña .

El consenso ideal entre los desarrolladores web es que la dimensión real también debería ser receptiva . El navegador debería poder cargar imágenes más pequeñas o más grandes de acuerdo con el tamaño de la ventana gráfica. De esta forma, podemos dirigir y entregar la mejor proporción de imagen en lugar de la imagen encogida (como se muestra).

Aquí es donde entra el elemento de picture HTML5. La picture nos permite proporcionar múltiples fuentes de imágenes y controlar la entrega a través de consultas de medios. Aunque todavía no hay ningún navegador que implemente este elemento, podemos usar un relleno llamado Picturefill para hacer esto. Veamos cómo se hace, ¿de acuerdo?

Empezando

Picturefill es una biblioteca de JavaScript desarrollada por Filament Group. Nos permite usar el elemento de picture ahora. Para comenzar, descargue el script en el repositorio de Github y coloque el picturefill.js o picturefill.min.js . Picurefill es una biblioteca de JavaScript independiente que no requiere ninguna otra biblioteca para funcionar. Simplemente puede agregarlo en la etiqueta de la head .

La imagen

He preparado una imagen en tres dimensiones diferentes, de la siguiente manera. La imagen ha sido recortada para conservar el foco en la persona en la imagen. El plan aquí es que mostraremos el tamaño más pequeño en pantallas pequeñas y la imagen más grande en pantallas grandes.

Usar elemento de imagen

Picturefill puede funcionar de dos maneras: podemos insertar srcset en la etiqueta img o usar el elemento de picture . Aquí optaremos por el elemento de picture ya que es más manejable, más fácil de entender y más legible.

De forma similar a audio elementos de video y audio, la picture envuelve varios elementos source que apuntan a la fuente de la imagen, de la siguiente manera.

El elemento de source, como puede ver en el fragmento de código anterior, se configura con el atributo de media . En este atributo especificamos el punto de corte de la ventana en la que se debe presentar la imagen. Puedes ver el efecto de inmediato.

Echa un vistazo a la página de demostración y cambia el tamaño del tamaño de la ventana gráfica, debes encontrar la imagen que se muestra dentro del ancho de la ventana gráfica especificada.

Picturefill para WordPress

Si está usando WordPress, puede usar un complemento llamado Picturefill.WP que le permite implementar el elemento de imagen en WordPress, sin la molestia. Simplemente cargue e incruste su imagen como de costumbre, y este complemento se encargará del resto.

Pensamiento final

El elemento de picture es una gran adición en HTML5. Tenemos más control sobre el tamaño y la dimensión de la imagen que debe presentar el navegador. Y con picturefill podemos usar este nuevo elemento ahora mismo aunque ningún navegador lo haya implementado todavía. Picturefill funciona en una amplia gama de navegadores incluidos en IE (aunque con algunas advertencias).

Por último, vea la demostración y descargue el código fuente a continuación.

• Manifestación
• Descargar Fuente

Hacer mejores imágenes progresivas cargando con antiModerado

El script AntiModerate puede no parecer mucho. Pero es uno de los mejores scripts de JS que puede ejecutar para mejorar el rendimiento en una página más grande y mantener una sólida experiencia de usuario.Con este complemento gratuito, puede cargar imágenes cuando aparecen a la vista y reducir el tamaño total de la página.De es

(Consejos de tecnología y diseño)

20 lecciones que los Vengadores pueden enseñarte sobre diseño

Avengers: Age of Ultron es actualmente la comidilla de la ciudad, así que hablemos de este famoso súper equipo. Hay seis personajes distintos, cada uno con su propia franquicia bien establecida, y cada uno con un esquema de color único, personalidad y una "sensación" general. Y lo más interesante, cada uno de ellos tiene algunas lecciones que enseñarnos.Empec

(Consejos de tecnología y diseño)