El problema de las imágenes en los diseños adaptables

En el artículo El problema de las imágenes responsive en la web y la primera propuesta del W3C para arreglarlo nos explican el problema que tienen las imágenes en los diseños adaptables:

  • mediante CSS, puedo decir que las imágenes no tengan un tamaño fijo sino que tengan un 100% del espacio en el que están contenidas y con un máximo de anchura para que no se pixele en pantallas grandes. Así, se adaptan al espacio disponible, pero en realidad estoy cargando siempre la misma imagen (con todo su peso) y adaptándola visualmente mediante hojas de estilos. No mola. En realidad, el mayor problema de esta solución es que se carga la misma imagen en todos los dispositivos.
  • existen otras opciones, plugins y librerías creadas para intentar solucionar este problema. Por ejemplo, el proyecto Adaptive Images es un script combinado con unas líneas en el fichero .htaccess que redimensiona realmente las imágenes, las cachea en el servidor y las muestra de acuerdo al tamaño de la pantalla del usuario. Mola, pero tampoco mucho: hay que tocar el sistema de ficheros del servidor, utilizar las cookies del navegador, las imágenes dejan de ser un contenido puramente estático…

En el artículo se ofrecen varias soluciones, basadas en el empleo de JavaScript, pero lo más interesante es que nos anuncia que el W3C está trabajando en el desarrollo de una solución: HTML Responsive Images Extension. Parece que es la primera versión de este documento, y está fechado 3 de septiembre de 2012.

Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.

2 comentarios sobre “El problema de las imágenes en los diseños adaptables

  1. yo uso este css

    img ,embed,object,iframe
    {
    max-width: 100%;
    max-height: 300px;
    width: auto\9; /* ie8 */
    }
    Saludos

Deja un comentario

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

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.