CSS: ¿Dónde van las imágenes?

Métodos para organizar imágenes en sitios diseñados con CSS

Imaginemos una página web con imágenes. Una galería de fotos, un reporte lleno de gráficos o una receta de cocina con fotos de los platos terminados. Además, imaginemos pequeños bullets para las listas, sombreados de color para los bordes y una imagen que se repite como patrón de fondo. Esta página imaginaria debe ser construída con la más estricta separación de contenidos y diseño según los estándares XHTML y CSS.

¿Dónde pongo las imágenes?

La etiqueta img de HTML me permite incluír imágenes de todo tipo como parte del documento. Pero además sabemos que en CSS podemos usar background-image para el mismo efecto.

Ambas opciones son técnicamente legítimas. Como siempre, la decisión pasa por una cuestión de objetivos, y la idea fundamental debe ser aprovechar al máximo las virtudes de cada tecnología.

El propósito de HTML es estructurar el contenido del documento, es decir todo aquello que informa al lector sobre el tema de la página. Junto al texto, los gráficos del reporte, o las fotos de la receta de cocina, claramente son parte de esa información. Si efectuáramos una busqueda de imágenes en Google para la frase “Pato a la Naranja“, probablemente querríamos encontrar fotos del suculento plato y sus ingredientes. La forma de lograr eso es incluír esas imágenes en el contexto de los textos que la complementan.

Por otro lado, tenemos aquellas imágenes que son eminentemente decorativas, ya sea para ayudar al formato visual del documento (bordes, bullets) o por mera estética (fondos, sombreados). Esas imágenes son ornamento, y por lo tanto debieran ser agregadas por medio de CSS, ya que el propósito de esa tecnología es dar formato y diseño a los contenidos estructurados en HTML.

Considerados estos dos tipos de imágenes (contenido y diseño), falta decidir dónde se ubicarán en la estructura del sitio. Métodos hay muchos, pero yo suelo crear un directorio para las imágenes-contenido en la raíz del sitio (llamado “medios”, o “imagenes”) donde, además de las gráficos, logos y fotos, van los flash y otros elementos que pueden ser considerados contenidos no dependientes del diseño.

/
index.html
medios/

logo.png
grafico.gif
banner.swf

Además, creo un directorio llamado “CSS” o “estilos”, donde guardo los archivos .css. Dentro de este último directorio, creo una subcarpeta para las imágenes que van incluídas en las hojas de estilos (normalmente la llamo “i” o “bitmaps”). Esta estructura me permite aprovechar una cualidad de CSS: las imágenes referenciadas por background-image (o cualquier atributo que soporte el comando url()) son relativas a la hoja de estilos, no al documento HTML. De esta forma puedo “empaquetar” los CSS junto con sus imágenes a la manera de “skins” o “temas” que puedo intercambiar o actualizar. Al mantener las imágenes-contenido en su propio directorio, no importa qué estilos CSS ocupe mi sitio, no perderé los gráficos, logos o fotos.

/
medios/
css/
master.css
i/
body-fondo.gif

Para sitios más grandes, es recomendable profundizar esta estructura para mantener el orden y la modularidad del proyecto. EL siguiente ejemplo usa subdirectorios para los distintos diseños de un sitio a lo largo de los años:

/
medios/
logo.png
grafico.gif

css/

2005/
master.css
i/
body-bg.gif
sombreado-izq.jpg
2006/

master.css
i/
body-1-bg.gif
body-2-bg.gif
header-bg.gif

¿Cómo nombro las imágenes?

Otra pregunta importante y dos respuestas posibles: para las imágenes-contenido (las que van en el directorio “medios”) es importante que los nombres tengan relación con el contenido, para aumentar su visibilidad en buscadores. Por lo mismo, es recomendable separar palabras por guiones (Google reconoce los guiones como separadores de palabras, y así se potencia la visibilidad de cada palabra). Por ejemplo: “grafico-estadisticas-2007.jpg”.

Por otra parte, las imágenes-diseño (esas que van en los subdirectorios de la carpeta “css”) deben ser, ante todo, fáciles de encontrar y organizar. Para esto yo he llegado a la convención de nombrar, primero, el elemeno HTML donde van posicionadas y luego la función que cumplen (”header-titulo-bg.gif”, “body-sombra-izq.jpg”). Para sitios más grandes defino más directorios para las secciones del proyecto.

/
css/
master.css
header/
header-bg.gif

main-nav-border.png
content/
content-border-izq.gif
content-border-der.gif
footer/
footer-col1-bg.jpg

footer-col2-bg.jpg

En master.css usaría las imágenes de la siguiente manera:

Code (css)

  1.  

  2. #header {
  3.   background: url(header/header-bg.gif) left top repeat-x;
  4. }

  5. #footer .column1 {

  6.   background: url(footer/footer-col1-bg.jpg) left top repeat-y;
  7. }

  8. #footer .column2 {

  9.   background: url(footer/footer-col2-bg.jpg) left top repeat-y;
  10. }

  11.  

¿Qué convenciones usan los lectores de EstadoBeta? ¿De qué forma se puede optimizar aún más el trabajo con CSS e imágenes?

About The Author

Diseñadora grafica / Desarrolladora web / wordpress themes y mas

No Comments