Imprimir

Las imágenes: XHTML / CSS

Posteado en Contenido: HTML

Es dificil encontrar una página web que no tenga alguna imagen, ya sea como adorno o como complemento al texto que aparece. Las imágenes es uno de los elementos más utilizados en la web.

En una página web, por tanto, se pueden distinguir 2 tipos de imágenes:

  • De aspecto: son las que utilizamos para diseñar nuestra página web (fondos, adornos de listas, bordes, etc...). Estas imágenes van enlazadas normalmente en la hoja de estilos CSS.
  • De contenido: son las que ponemos para aclarar, complementar o simplemente mostrar contenido en la página. Estas imágenes se incluyen siempre directamente en el código de la página XHTML.

La etiqueta XHTML que se utiliza para añadir imágenes a una página Web es <img /> y es una de las pocas etiquetas que no tiene etiqueta de cierre por ser una etiqueta vacía.

networkLos atributos de esta etiqueta son:

  • src = "URL"   proporciona la ruta de la imagen
  • width = "número"   ancho de la imagen
  • height = "número"   alto de la imagen
  • alt = "texto"   descripción corta de la imagen

Por ejemplo, la imagen de la derecha se incluye en esta página así:

<img src="/i2012/_data/tema6/contenido/network.png" alt="network" width="128" height="128" />

 XHTML no impone restricción alguna en cuanto al formato gráfico de la imagen pero es conveniente utilizar un tipo de formato gráfico que "entiendan" todos los navegadores como son: JPG, GIF o PNG.

Salvo el ancho y el alto que, como excepción, van en la página XHTML, el resto de características de aspecto irán en la hoja de estilos: alineación, sombras, transparencia, etc...

Es importante tener siempre presente que la rapidez de carga de una página web depende de su peso (en KB) y en él tiene bastante importancia el número y el grado de optimización de las imágenes que incluimos; es conveniente por ésto utilizar el formato gráfico más adecuado y utilizar siempre programas que optimicen lo más posible las imágenes que formen parte de la página Web.

roseroseroseEstas 3 imágenes parecen iguales, sin embargo la primera (jpg) pesa 7 KB , la segunda (gif) pesa 10 KB y la tercera (png) pesa 25 KB.

A veces puede interesarnos sacrificar algo de velocidad de carga a cambio de una determinada presentación.

Adium animLa mayoría de los programas de diseño gráfico permiten añadir una sombra (llamada "drop shadow") a las imágenes. CSS 2.1 no incluye propiedades para ello, pero sí las nuevas especificaciones para CSS 3.0; evidentemente siempre estamos hablando de imágenes cuadradas o rectangulares, no como la mostrada más arriba de la Tierra, si queremos que ésta tenga sombra se consigue con algún programa gráfico que lo permita y que deberemos guardar en formato .png que adminte canal alfa de transparencia.

En otras ocasiones puede interesarnos algo de "animación" y esto sólo lo podemos conseguir con imágenes en formato GIF (desde hace algún tiempo se está desarrollando animación en formato PNG). La imagen derecha del pato verde está en formato GIF y presenta una sombra creada con CSS 3.

Esta imagen rectangular tiene sombra utilizando reglas CSS 3, concretamente estas:

img {
    float: left;
    margin: 10px 20px;
    -webkit-box-shadow: 4px 4px 8px ;    /* para Chrome y Safari */
    -moz-box-shadow: 4px 4px 38x ;       /* para Firefox */
    box-shadow: 4px 4px 8px ;        /* para IE8 y 9 y nuevos */   
}

Una imagen también puede ser un enlace o hipervínculo. Los navegadores, por defecto, tienen una forma particular de representar los links, y en el caso de las imágenes tienen la "manía" de mostrar un borde azul grueso cosa que, estéticamente, no resulta muy agradable, por eso es conveniente definir la siguiente regla en el archivo .css para evitar este comportamiento:

a img { border: none; }

 

Aula Virtual / Foro

aula virtualforo

Utilidades...

imprescindibles Chrome Safari Opera IE9 Adobe Reader 7zip Flash Java Filehippo Ninite

Visitas...

Hoy2
Ayer7
Mes132
TOTAL58839

En línea...

Tenemos 10 visitantes y ningun miembro en Línea