Guía para principiantes sobre imágenes responsivas

A Beginner’s Guide to Responsive Images in HTML.

Texto completo

Una imagen responsiva es una imagen que se adapta a las características de los distintos dispositivos. Cuando se hacen bien, las imágenes responsivas pueden mejorar el rendimiento y la experiencia del usuario de un sitio. Se pueden abordar las imágenes responsivas desde dos ángulos: sirviendo la misma imagen con diferentes tamaños o sirviendo diferentes imágenes según las características de la pantalla.

Cuando los ingenieros de software crearon la web, no tuvieron en cuenta cómo manejarían los navegadores las imágenes responsivas. Al fin y al cabo, los usuarios sólo accedían a la web desde ordenadores de sobremesa o portátiles. Sin embargo, esa no es la situación que se da hoy en día.

Según Statista, más del 90% de la población mundial de Internet se conecta a través de su teléfono móvil. La mayoría de las páginas web de Internet contienen imágenes y éstas son una de las métricas utilizadas para medir el rendimiento de la web. Para mejorar el rendimiento, hay que optimizar las imágenes haciéndolas responsivas.