Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Formato y propiedades
Se estudia la etiqueta img del lenguaje HTML, utilizada para incorporar imágenes en el contenido
de una página web, describiendo los formatos gráficos adecuados para este propósito. Se describe
cómo optimizar una imagen para la Web (resolución, modo de color y compresión). Finalmente,
se presenta la posibilidad de incluir imágenes como fondo de la página o de otros elementos, para
lo que se utiliza las hojas de estilo en cascada (CSS). En esta lección se estudian:
Insertar imágenes.
Introducción.
Formato y propiedades.
1. INTRODUCCIÓN
Las imágenes son uno de los elementos más importantes de una página web y están presentes
prácticamente en todas.
En algunos casos son el contenido más importante, como puede ser una página web de
fotografías o para compartir fotografías. En otros casos sirven como apoyo fundamental al texto
u otros elementos que encontramos en la página. Así, ver la imagen del producto que se está
vendiendo es prácticamente obligatorio si se desea tener éxito en la venta.
En cualquier caso, las imágenes son el apoyo fundamental de cualquier página web. Hace unos
años no eran tan populares, ya que, al fin y al cabo, el tamaño de la página puede aumentar
considerablemente debido a la aparición de imágenes, lo que hace que la página tarde más tiempo
en cargarse en el navegador. Sin embargo, hoy en día ha evolucionado muchísimo el acceso a
Internet, principalmente a través de la banda ancha. Por ello, ya no se atiende demasiado a esta
circunstancia.
En esta lección veremos cómo incrustar imágenes en las páginas web a través de la etiqueta
<img>, qué formatos son los más adecuados y cómo prepararlas para la Web. Aunque la banda
ancha esté muy extendida hoy en día, las imágenes deben estar preparadas para la Web ya que es
un medio muy diferente al impreso.
Debes establecer la resolución a 72 píxeles por pulgada para una imagen destinada para la Web.
El tamaño será el que deseas que tenga en pantalla en cuanto a anchura y altura (en píxeles).
Por otra parte, también debemos hablar del modo de color en cuanto a las diferencias entre una
imagen para impresión en papel o en la Web.
En el papel, los colores se consiguen mediante la combinación de cuatro tintas. De ahí que el
modelo de color usado es el CMYK (cian, magenta, amarillo y negro).
Sin embargo, en un monitor los colores se consiguen mediante tres componentes: rojo, verde y
azul. De ahí que se emplee el modo de color RGB.
En este mismo cuadro de diálogo podrás indicar el modo de color. Recuerda que para una imagen
para la Web deberás utilizar RGB.
La resolución, el tamaño en píxeles y el modo de color determinan el tamaño o peso final del
archivo. Por ello es importante establecer adecuadamente estos detalles.
Adicionalmente, veremos que podemos optimizar ese tamaño de archivo mediante la correcta
selección de los formatos de imagen y de sus características.
Cierra la ventana Nuevo Documento.
3. FORMATOS GRÁFICOS
La optimización de las imágenes persigue un objetivo muy claro: conseguir el menor tamaño de
archivo manteniendo la mejor calidad de imagen posible. Para ello se aplica compresión.
Partiendo de una correcta elección de la resolución y modo de color, la optimización se basa en la
selección del formato gráfico y de sus ajustes.
Antes de optimizar una imagen, guárdate una copia de la imagen de alta resolución u
original.
Formato GIF : Es el formato adecuado para dibujos, diseños con textos, etc.
Quiero que te fijes en la imagen porque vamos a elegir el formato GIF .
Elige el formato GIF en la lista superior fijándote en el resultado que obtenemos.
Si te has dado cuenta, algunos colores han variado, como, por ejemplo, el color rosado o azulado
de las barcas.
Esto se debe a que el formato GIF admite como máximo 256 colores, por lo que aquellos
colores que quedan fuera de esa gama se tienen que simular de alguna manera.
Esta "simulación" se consigue mediante los ajustes de paleta y tramado, principalmente.
Por ejemplo, podemos indicar que no se haga tramado. Entonces la imagen empeorará al no
simular los colores que quedan fuera de la paleta de 256 colores.
Por otra parte, nos interesa el tamaño final de archivo. Esto queda indicado debajo de la imagen.
Fíjate que el tamaño es de 701 KB con estos ajustes del formato GIF .
El formato GIF no es el más adecuado para las fotografías en color. Para ello, es mejor el
formato JPEG.
Selecciona JPEG en la lista donde pone GIF. Fíjate en el cambio que se produce en la imagen.
Ahora la imagen ha mejorado su aspecto y encima con un tamaño de archivo menor.
Formato JPEG: adecuado para fotografías o imágenes de más de 256 colores y/o con
degradados.
El formato JPEG es el más adecuado para este tipo de fotografías a color, aunque en función de
la compresión que empleemos, puede degradar demasiado la imagen optimizada.
Para ello, el principal ajuste que se debe establecer es el de la calidad.
La calidad actual en el panel de optimización es de 60, es decir, una calidad medio-alta.
Con estos ajustes el tamaño del archivo pasa de 701 KB del GIF a 356,6 KB con un resultado
mejor que el de GIF.
Finalmente, también podemos emplear el formato PNG.
Características del formato PNG-8: se recomienda como sustituto del formato GIF.
Admite 256 colores como máximo.
Comprime eficazmente áreas uniformes de color, preservando el detalle de líneas,
figuras geométricas o ilustraciones con texto.
Utiliza esquemas de compresión más avanzados que los GIF, consiguiendo archivos
entre un 10 y un 30% más pequeños.
Produce compresión sin pérdidas.
Permite transparencia y crear halos de fondo, fusionando los bordes de los objetos con
el fondo de la página web.
Formato PNG: adecuado para fotografías a todo color que incluyan transparencia sofisticada.
En general, utilizarás GIF para dibujos de hasta 256 colores, JPEG para fotografías a todo color
y PNG cuando necesites transparencia compleja o imágenes a todo color con texto y logotipos.
Vuelve a elegir JPEG.
4. LA ETIQUETA IMG
La etiqueta HTML que se utiliza a la hora de insertar imágenes en una página web es <img>.
Como mínimo tendrás que establecer dos atributos de esta etiqueta: src y alt.
Cierra la ventana de Photoshop. Pulsa en el botón No. Elige Abrir del menú Archivo del Bloc
de notas. Despliega la lista de tipo (donde pone Documentos de texto) y elige Todos los
archivos.
Fíjate que aquí tenemos la imagen venecia02.jpg, que creamos en el apartado anterior.
Selecciona la página Image.html y pulsa el botón Abrir.
Por ahora la página solamente incluye un par de párrafos de texto. Utilizando la etiqueta <img>
incluiremos lo que se conocen como "imágenes en línea", es decir, imágenes que forman una
parte importante del contenido de la página y que no aparecen solo como elemento decorativo.
La etiqueta <img> se puede utilizar dentro o fuera de un párrafo de texto.
Escribe lo siguiente:
<img src="venecia02.jpg" alt="Góndolas en la ciudad de Venecia">
Mediante el atributo src indicamos la ubicación de la imagen. En este caso, la imagen está en la
misma carpeta que la página donde se incluye. Por su parte, con el atributo alt establecemos un
texto alternativo a la imagen. Como ya sabemos, es posible que el navegador no pueda mostrar
las imágenes por distintos motivos, ya sea porque el usuario ha desactivado esa característica o
porque se trate de un dispositivo que no la acepte (por ejemplo, un lector de páginas para
personas con problemas de visión). Por ello es tan importante incluir siempre el atributo alt,
excepto en los casos en que la incorporación de la imagen sea simplemente por motivos estéticos
(entonces debes incluir el atributo alt, pero con una cadena vacía: alt=""). El texto del atributo
alt debe dar una idea de la imagen. Piensa en cómo leerías el contenido de la página y utiliza el
texto que has elegido para describir la imagen como texto del atributo alt. Con estos dos
atributos es suficiente.
En este caso primero se muestra la imagen y después se crea una nueva línea para iniciar el texto
de la etiqueta de párrafo.
Con el atributo title de la etiqueta <img> incluiremos un texto para mostrarlo cuando
situamos el puntero del ratón por encima de una imagen. Sin embargo, este atributo se utiliza
mucho menos que alt.
Por otra parte, es una buena costumbre guardar las imágenes de las páginas web en una carpeta
propia. Es habitual que esa carpeta tenga el nombre "images", aunque esto no es obligatorio.
Con esto indicamos la ubicación actual de la imagen respecto de la página web. Por eso sigue
siendo una dirección relativa.
Podríamos utilizar una dirección absoluta, indicando toda la ruta para acceder a la imagen:
protocolo, servidor, carpeta y nombre.
Por ejemplo, http://www.empresa.com/images/venecia02.jpg.
La ventaja de las direcciones o URL relativas es que no se tienen que modificar si la ubicación
relativa no cambia.
Sin embargo, si se utilizan direcciones absolutas, esto sí que será necesario al cambiar la
ubicación.
Modifica de la misma manera la URL de la segunda imagen incluida en la página, la del escudo
de la ciudad de Venecia.
Guarda los cambios y comprueba el resultado en el navegador.
Recuerda que siempre debes incluir, al menos, los atributos src y alt de la etiqueta <img>.
Puedes averiguar las dimensiones de una imagen con cualquier aplicación de edición de
imágenes o incluso accediendo a las propiedades del archivo a través del Explorador
de archivos de Windows.
Pueden establecerse estos valores en píxeles (como hemos hecho) o en porcentaje. Además, esto
también podría utilizarse para escalar la imagen (hacerla más pequeña o más grande), aunque no
suele ser una buena idea. Por ejemplo, si queremos mostrar una imagen pero más pequeña que
sus dimensiones originales, será mejor hacerla más pequeña con una aplicación de edición de
imágenes, ya que si simplemente cambiamos el valor de width y height, el peso del archivo
seguirá siendo el de la imagen grande.
Guarda los cambios efectuados.
No es difícil suponer que esa propiedad representa la imagen del fondo de la etiqueta <body> y
que el valor que toma es justamente la imagen fondo.jpg, que he añadido por mi cuenta en la
carpeta images.
Guarda los cambios efectuados.
Comprueba el resultado.
El navegador repite la imagen a lo largo de toda la página para adaptarla al cuerpo de la misma.
Por eso, normalmente estas imágenes son pequeñas o forman patrones que se pueden repetir
adecuadamente.
Como ocurre con las imágenes que incluimos mediante la etiqueta <img>, debemos ser
precavidos y establecer, adicionalmente, un color de fondo para el caso en el que la imagen no
pueda ser cargada por cualquier motivo.
Esto es de especial importancia en el caso de que hayamos creado una combinación de colores
entre el color del texto y la imagen del fondo.
Por ejemplo, si has cambiado el color del texto para que sea blanco porque la imagen del fondo es
oscura y al cargarse la página no se muestra la imagen, entonces el texto será blanco sobre fondo
blanco, por lo que el resultado es que no se podrá leer.
Aprenderemos más cosas sobre todo esto cuando estudiemos las CSS. Esto es solo un pequeño
ejemplo.
La etiqueta del lenguaje HTML que se utiliza para introducir imágenes en las páginas web es
<img>.
Con el atributo src de esta etiqueta se indica el archivo gráfico a mostrar (puede indicarse con
una dirección absoluta o relativa).
Con el atributo alt de esta etiqueta se indica el texto alternativo, es decir, el que se muestra si
no se puede cargar la imagen. También es utilizado para dispositivos de accesibilidad, como
lectores de pantalla.
Se pueden establecer las dimensiones con que se mostrarán las imagenes con los atributos
width (anchura) y height (altura) de la etiqueta <img>.
Por ejemplo:
<img src="images/venecia02.jpg" alt="Góndolas en la ciudad de Venecia" width="300"
height="210">