¿Image replacement o simplemente imagen?

La técnica de image replacement puede funcionar bien para la presentación de un documento en pantalla, pero no ocurre lo mismo al imprimir una página web; utilizar efectivamente una imagen puede ser una buena oportunidad de mejorar la presentación de los documentos impresos.

Probablemente una de los primeros trucos que encontré al comenzar a aprender a hacer páginas “bien” —o sea, con un editor de texto, HTML y CSS, no con Dreamweaver y tablas— es la técnica del image replacement. La idea es simple: reemplazar, por ejemplo, una cabecera por una imagen con CSS, prescindiendo de insertarla con el elemento <img src='lorem-ipsum.jpg' alt='Lorem Ipsum' /> ya que esto produciría en un código más accesible y semánticamente correcto.

HTML:
<h1 title="contrasentido">contrasentido</h1>

CSS:
h1{
display:block;
background:url(img/contrasentido.gif) top no-repeat;
width:402px;
height:55px;
text-indent:-9999em;
}

Las reglas básicas de esta técnica: “indentar” negativamente el texto del elemento en el que queremos realizar el reemplazo lo suficiente para que no aparezca en pantalla y especificar la imagen que deseamos mostrar como fondo. El atributo title en el elemento que será reemplazado sirve para poner los tooltips con los que MSIE solía mostrar, erróneamente, el texto alternativo de las imágenes… en otras palabras, completan la ilusión.

Hasta acá pareciera que todo está bien, sin embargo todas las técnicas de image replacement presentan problemas: algunos causados por comportamientos extraños navegadores poco actualizados (más específicamente, Explorer 5 y versiones antiguas de Opera), otras en escenarios que, si bien pueden resultarnos poco comunes, no vale la pena descartar (como que el usuario tenga desactivada la descarga de imágenes al mismo tiempo que activada la utilización de hojas de estilo), necesidad de agregar etiquetas vacías o poco/ningún valor semántico o de aplicar hacks específicos para algunos navegadores.

En concreto:

  • Utilizar un span vacío no tiene ningún valor semántico
  • Si la idea es crear un mejor código, los hacks de CSS no tienen mucho sentido, ¿no?
  • Si utilizamos display:none para ocultar el texto del elemento que será reemplazado, los lectores de pantalla hacen como que no existe
  • Si utilizamos text-indent se produce scrolling horizontal en algunos navegadores

Y lo que es peor —y que de hecho es el motivo por el que comencé a escribir este artículo en primer lugar— es que al intentar imprimir un documento, si no se ha especificado el media de la hoja de estilos (o es una hoja para todos los medios), en el lugar del elemento reemplazado aparece un lindo espacio vacío, no la imagen ni el texto, a menos que el usuario active explícitamente (vaya pleonasmo) la casilla Imprimir colores e imágenes de fondo.

Lo terrible de esto es que muchos somos especialmente adeptos a utilizar image replacement en el título del sitio web, por lo que a menos que creemos una hoja de estilo específica para impresión, sin image replacement, ningún documento impreso desde nuestros sitios mostrará nuestra increíblemente-trabajada-y-mimada “imagen corporativa” sino alguna de las típicas fuentes: Arial, Helvetica, Verdana, Tahoma, sans-serif.

Aquí es donde la alternativa de utilizar una imagen no me parece tan descabellada: después de todo, si está hecho con gusto, en lo personal me gustaría bastante la posibilidad de imprimir un post de Minid.net o aNieto2k con su logo coronando la página.

¿Problemas de accesibilidad? ¿Porqué habría de haberlo (valga la redundancia)? Después de todo, hasta donde yo se todos los lectores de pantalla soportan el atributo alt, y esta sería una situación especialmente para la correcta utilización de este atributo. Vamos, el texto alternativo es precisamente para esto.

En conclusión: ¿por qué cuidar tanto la presentación en pantalla y descuidarla en otros medios? Utilizar una imagen “de verdad” dentro del h1 puede ser una buena oportunidad para estampar nuestro logo no solamente en las pantallas sino en los documentos que los usuarios de nuestros sitios impriman… una pequeña imagen puede hacer una gran diferencia.

… A propósito: debo crear una hoja de estilos para impresión en yukei.net

3 thoughts on “¿Image replacement o simplemente imagen?

  1. mmm… interesante tu post. Yo uso la siguiente técnica:

    En el HTML:

    <h1><span>Título</span></h1>

    En CSS:


    h1{
    height: n px;
    width: npx;
    background: url(titulo.gif) no-repeat left top;
    }
    h1 span{
    display:none;
    }

    Con esto resolví los problemas que me traían los márgenes negativos. Pero tendría que indicar alguna hoja de estilos alternativa para impresión y lectores de pantalla según lo que tú dices, asi que… manos a la obra 🙂

  2. totalmente de acuerdo. siempre me habia llamado la atencion el intento por sacar las imagenes del codigo siendo que para eso tienen el alt.

  3. Pablo: tuve que recuperar el texto del snippet HTML según me parecía que era lo que querías indicar; ¿era así o no?

    Bueno, de todos modos, como bien dices, con esta técnica puedes solucionar el problema de los márgenes negativos en navegadores antiguos, pero trae dos problemas nuevos: según un estudio que leí hace mucho tiempo (por ahí en internet, tendría que googlearlo pero… mejor otro día) los lectores de pantalla como JAWS (hasta donde yo sé, el más popular) no “leen” nada cuando un elemento está marcado con display:none, o sea, es como si el elemento no existiera. Ahora, esto igual es un tema viejo, por lo que es posible que las nuevas versiones de los screenreaders sí hagan algo al respecto, o quizás esto se pueda solucionar, más simplemente, especificando el atributo media de la hoja de estilos.

    El otro problema es el que, hasta donde se, tienen todas las técnicas de image replacement: que simplemente no funcionan en hojas de estilo para impresión, por lo que aun creando un css para impresión no podrías hacer image replacement porque los navegadores vienen configurados para no imprimir imágenes de fondo de forma predeterminada.

Comments are closed.

%d bloggers like this: