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 recursos que cito a continuación que me han servido para entender cómo está el patio actualmente:
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 🙂
Suena muy interesante, pero sigo sin entender, eso de los códigos no es lo mío 🙁
Es más sencillo de lo que parece Roberto! Si algún día necesitas ayuda, no dudes en preguntarme 🙂