A tortas con responsive images: Guía y recursos de imágenes responsive para entender de una vez cómo trabajar con ellas

responsive-images

Lo de trabajar con imágenes responsive surge porque hace tiempo que quería meter en The Starter Kit alguna manera de cargar diferentes imágenes cuando se visualizara la página a través de dispositivos con una densidad de pixel por pulgada mayor a la habitual. Vamos, lo que conocemos coloquialmente como dispositivos de densidad “2x” y superiores.

La razón es que en el caso de esa web en concreto, las imágenes servidas para cada post tenían un ancho de 300px y al verlas desde móviles como un Nexus 4 y similares, se veían bastante feotas.

La opción más sencilla hubiese sido sustituir la petición de esas versiones de las imágenes para mostrar en su lugar las que subo a WordPress y que están a mayor resolución (un ancho de 800px). Con esto resolvería el problema pero repercutiría negativamente en los entornos en los que no es necesaria una imagen de tales dimensiones. Y luego encima la nota del PageSpeed baja un montón, por mucho que las optimice con Kraken.io 😛

Total, que me tocó rescatar algunos enlaces interesantes que me guardé hace tiempo para investigar con más calma qué era eso de picture, srcset y chino mandarín. Hasta la fecha había cacharreado con Rimg [en] pero quería comprender las diferentes opciones existentes.

Después de haber separado el grano de la paja me he quedado con los que cito a continuación que me han servido para entender cómo está el patio actualmente:

responsive-images-wtf

Porque aunque casi me da un telele cuando lo leí en profundidad, Responsive Images: Use Cases and Documented Code Snippets to Get You Started [en], es el artículo que me ha permitido entender perfectamente todo lo que tiene que ver con el uso de las imágenes responsive en una situacion en la que nos enfrentamos a tamaños de pantalla tan dispares y que a su vez ofrecen densidades de pixel tan diferentes.

En español me quedaría con los dos artículos que comento a continuación. Se solapan en algunos contenidos pero creo que merecen la pena ambos. Hablo del articulo de Félix, Guía práctica de imágenes responsive y este otro en Emenia: Imágenes en diseño web adaptativo: picture, sizes y srcset.

Sí que puede venirnos bien guardarnos también en favoritos el acceso hasta RICG [en] que vendría a ser el rinconcito del consejo de sabios de esto de las imágenes responsive.

Y por supuesto, para WordPress también tengo algo de chicha. En concreto y después de probar un par de plugins diferentes, el que me pareció más resultón es WP Responsify [en] ya que nos permite probar entre diferentes configuraciones. Tengo que decir que para mi situación en concreto no me sirvió pero viendo cómo funcionaba y leyendo los artículos mencionados arriba, pude hacerme un apaño aprovechando las imágenes de las que ya disponía gracias a entender perfectamente qué es lo que buscaba y cuáles eran las posibilidades.

Por si sirve de algo lo que hice fue simplemente mantener la etiqueta img haciendo uso de la imagen que genero en WordPress a un ancho de 300px, pero añadí un srcset adicional con la imagen que subo de ancho 800px para dispositivos con densidad 2x. Tan sencillo como eso 🙂

La imagen de cabecera es cortesía de Shutterstock.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Up Next:

Face of Cars, un cara a cara automovilístico

Face of Cars, un cara a cara automovilístico