Conoce la nueva mejora en HTML

Se trata de un nuevo elemento que gestionará de manera inteligente las imágenes.

HTML es el lenguaje con que está escrita una página web: detrás de sitios como Fayerwayer o Wayerless, existen vastas líneas de código que dan instrucciones al navegador web acerca de lo que debe cargar y mostrar. Y como toda tecnología moderna, HTML está en constante desarrollo y mejora. Así, ahora aparece un nuevo elemento llamado <picture> que en pocas palabras ayudará a mover la web más rápido, especialmente en dispositivos portátiles con conectividad lenta.

Esta nueva etiqueta llega para solucionar un viejo problema de Internet. Porque cuando aparecieron los dispositivos móviles con navegadores web complejos, como el primer iPhone y los actuales smartphones y tabletas con Android, nos dimos cuenta que la carga de imágenes pesadas raletiza la experiencia del usuario, considerando que un sitio web pensado para pantallas más grandes estaba empujando imágenes pesadas a un dispositivo de pantalla pequeña. Para ponerlo en perspectiva, si en promedio un sitio web pesa 1,7MB, 1MB corresponden a elementos gráficos.

Pero ahora, cuando un desarrollador web utilice la etiqueta <picture> antes de una imagen, la plataforma escogerá de manera inteligente el tipo de pantalla que posee el usuario, cargando el archivo adecuado para cada uno. Según sea el caso, podremos acceder a contenido mucho más ligero desde su propio origen, acelerando el proceso de carga de un sitio web.



¿Cómo apareció esta nueva tecnología?

El nacimiento de <picture> ha sido largo y con múltiples protagonistas. Porque tras la aparición de los primeros dispositivos móviles con navegador web, Internet se adaptó y comenzó la creación de los portales alternativos para pantallas pequeñas, generalmente asociados a una dirección del tipo m.sitioweb.com. Esto obliga a los desarrolladores a crear dos sitios en lugar de uno.

Más tarde llegó una solución mucho más elegante: diseñar el sitio de manera flexible, es decir, adaptando su contenido según el dispositivo con que se visualiza. Esto permite ordenar mejor el texto y las imágenes incluso en pantallas diminutas, sin la necesidad de crear un sitio web paralelo. Fayerwayer y la red Betazeta utilizan dicha tecnología.

Sin embargo, incluso bajo este modelo muchos portales siguen cargando imágenes destinadas para pantallas más grandes. Con esto el móvil recibe un archivo de gran tamaño que no necesita; pero al menos lo podemos ver muy bien en un smartphone o tableta.

Así, durante varios meses se juntaron desarrolladores asociados a Google, Mozilla, Opera e incluso desde proyectos independientes como el Boston Globe, quienes finalizaron el estándar <picture>. Ahora faltaba su implementación en los navegadores web más populares. Y con campaña para reunir fondos en Indiegogo de por medio, llegamos al día de hoy.

Porque hoy, Google y Mozilla se comprometieron a implementar la nueva etiqueta en sus motores para Chrome y Firefox antes de final de año. Y Opera, Microsoft y Apple también están considerando integrar la tecnología en sus respectivos navegadores web. Así que muy pronto, navegar por Internet será mucho más rápido.