Está en la página 1de 20

Introducción.

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

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

2. RESOLUCIÓN Y MODO DE COLOR


Lo primero que tenemos que tener claro es que no es lo mismo preparar imágenes para la
impresión en papel que para visualizarlas en una página web.

En este apartado estamos hablando de "imágenes de mapa de bits", como las


fotografías.
Existe otro tipo de imagen que también se utiliza en las páginas web. Se trata de las
"imágenes vectoriales", como las animaciones Flash, los archivos SVG o la utilización del
elemento canvas de HTML5.
Sin embargo, ahora estamos tratando las "imágenes de mapa de bits".

Normalmente, las imágenes preparadas para la Web no se imprimirán correctamente en papel.


Principalmente por dos motivos: por la resolución y el modo de color. Para ver dónde se aplican
estos conceptos, trabajaremos en Photoshop, pero podrían ser válidas otras aplicaciones
similares. Podríamos definir la resolución, en términos generales, como la capacidad para
describir o representar los detalles de una imagen.
Se habla de "describir" cuando hacemos referencia a la calidad de la imagen; mientras que se
habla de "representar" cuando es el dispositivo en el que se muestra el que debe tener la
capacidad de representar esa calidad. Así pues, las imágenes creadas para su impresión en papel
tienen una resolución mayor que las preparadas para la Web simplemente porque las impresoras
pueden utilizar mayor resolución para representar la imagen con más detalle en el papel.
La resolución, cuando estamos hablando de impresión en papel, se mide en "puntos por pulgada"
(dpi) y representa el número de puntos impresos por pulgada en el papel. Para una impresión
correcta, normalmente se requiere de una resolución de 300 dpi, aunque en impresión digital
puede ser suficiente con 150 dpi. Sin embargo, los navegadores pueden visualizar las imágenes
como máximo a 72 píxeles por pulgada (ppp). Aunque la unidad de medida es distinta, se refiere
a lo mismo, pero en un monitor se habla de "píxel" en lugar de "punto". Esto quiere decir que
una imagen preparada para la Web no se imprimirá correctamente en papel al tener una resolución
mucho menor de la necesaria. Por su parte, una imagen preparada para impresión se mostrará
correctamente a través de un navegador, pero sin poder utilizar toda la resolución que tiene, lo
que aumenta muchísimo el tamaño del archivo de la imagen para nada.
En Photoshop podemos indicar este detalle al crear una imagen. Si la estamos preparando para la
Web, indicaremos una resolución de 72 píxeles por pulgada.
Pulsa en el botón Crear nuevo... de la izquierda.
Aquí podremos establecer los detalles en cuanto al tamaño de la imagen y su resolución.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

Selecciona la categoría Web.


Como puedes comprobar, la resolución se especifica en uno de los campos, adicionalmente al
tamaño de la imagen.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

La optimización también se realiza respecto de una imagen existente, normalmente de alta


resolución.
Elige Abrir en el menú Archivo. Selecciona la imagen venecia02.tif y pulsa en el botón
Abrir.
Esta es una imagen de alta resolución y en un formato gráfico adecuado para la impresión, como
es el formato TIFF . De ahí que el tamaño del archivo no sea adecuado para incluirlo en una
página web.

Elige Imagen - Tamaño de imagen en el menú de Photoshop.


Fíjate que la imagen tiene un tamaño en píxeles bastante grande (1240 x 868) y la resolución
adecuada para impresión (300 ppp).

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

De ahí que el tamaño de archivo sea muy elevado (3,08 MB).


Podemos cambiar los detalles aquí, pero es mejor hacerlo a través de un comando específico para
guardar imágenes destinadas a la Web.
Cancela el cuadro de diálogo.
Despliega el menú Archivo - Exportar y elige Guardar para Web (heredado).
A la hora de guardar una imagen para la Web tenemos que elegir entre uno de estos tres formatos
gráficos: GIF , JPEG o PNG.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

Características del formato GIF :


Permite imágenes de hasta 256 colores.
Comprime eficazmente áreas uniformes de color, preservando el detalle de líneas,
figuras geométricas o ilustraciones con texto.
Permite crear animación.
Admite transparencia.
Utiliza compresión sin pérdida, es decir, la imagen permanece idéntica después de
comprimirla. Es la compresión LZW.

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

Características del formato JPEG o JPG:


Permite imágenes de 24 bits de color, es decir, a millones de colores.
Comprime el tamaño del archivo descartando información de la imagen, por lo que se
trata de compresión con pérdida. Es la compresión JPEG.
El método de compresión puede degradar los detalles de enfoque, especialmente en lo
que confiere al texto o formas vectoriales.
Cada vez que se guarda un archivo JPEG, se pierde calidad. Por lo tanto, debe guardarse
siempre a partir de la imagen original y no de un archivo JPEG previamente guardado.
No admite transparencia.

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

Despliega la lista de formatos.


Existen dos tipos de formatos PNG: el que solo acepta 256 colores (PNG-8) y el que admite
imágenes a millones de colores (PNG-24).
Elige PNG-24.
El resultado que hemos obtenido es que la imagen no ha mejorado significativamente pero sí que
ha aumentado extraordinariamente el tamaño del archivo final, siendo ahora de 2,196 MB.

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.

Características del formato PNG-24:


Admite imágenes a millones de colores.
Preserva variaciones de brillo y tono en las fotografías y además el enfoque de las líneas,
logotipos y texto.
Utiliza compresión sin pérdida, produciendo archivos de mayor tamaño que JPEG.
Permite transparencia de varios niveles. Es decir, donde los píxeles no son totalmente
opacos o totalmente transparentes.
Permite crear halos de fondo, fusionando perfectamente los bordes con el fondo de la
página web.
El inconveniente del formato PNG es que algunos navegadores no los soportan. Sin
embargo, las últimas versiones de cualquier navegador moderno ya lo hacen.

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

Ahora cambiaremos el tamaño de la imagen estableciendo las dimensiones que deseamos en la


página web.
Haz doble clic en el campo An de la sección Tamaño de imagen.
Escribe 300.
Fíjate que también ha cambiado el alto de la imagen para que sea proporcional. Además, el
tamaño del archivo se ha reducido considerablemente.
Pulsa en el botón Guardar.
Después verás por qué guardo la imagen en la carpeta Documentos.
Acepta para guardar la imagen en formato JPEG.
Con esto, Photoshop no solo se ha encargado de guardar la imagen en el formato JPEG con el
tamaño que le has indicado, sino que ha establecido la resolución de la imagen a 72 ppp y, si es
necesario, el modo de color RGB.
No nos extenderemos más en estos aspectos. Ahora volveremos a trabajar con el HTML para
incluir imágenes en las páginas web.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

Haz clic tras la etiqueta <body> y pulsa .

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.

Guarda los cambios. Pulsa y mostraré la página en Firefox.

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

El texto alternativo solo se mostrará cuando no sea posible mostrar la imagen.


Pero también podemos incluir la imagen como integrante del párrafo. Esto es útil, por ejemplo,
cuando quieres incluir una pequeña imagen o icono.
Vuelve al Bloc de notas.
Haz clic tras la palabra Venecia al principio del segundo párrafo de texto.
Añade un espacio en blanco y escribe:
<img src="escudo-venecia.png" alt="Escudo de la ciudad de Venecia">
Guarda los cambios y comprueba el resultado en el navegador.
Ahora puedes comprobar que la imagen del escudo se incluye como una parte más del párrafo en
el que se encuentra.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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.

Pulsa en el icono del Explorador de archivos de la barra de tareas de Windows.

Pulsa en la carpeta Documentos en el panel de la izquierda.


Pulsa en el botón Nueva carpeta .

Escribe images y acepta.


Selecciona los archivos escudo-venecia.png y venecia02.jpg.
Arrastra estos dos archivos a la carpeta images.
Como hemos cambiado la ubicación de las imágenes, ahora no se mostrarán en el navegador.
Cierra la ventana del explorador de archivos.
Actualiza la página.
Ahora puedes ver el texto alternativo. Así es como lo verán algunos usuarios si han desactivado la
visualización de las imágenes.
Lo importante es que la página siga teniendo sentido con el texto alternativo.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

Vamos a solucionar esto.


Vuelve al Bloc de notas.
Tal como está indicada la ubicación de las imágenes se dice que es una dirección relativa, ya que
se indica la ubicación atendiendo a la de la página web.
Como las imágenes estaban en la misma ubicación que la página web, simplemente incluimos su
nombre. Ahora esto es un poco distinto...
Haz clic delante de venecia02.jpg.
Escribe:
images/

Recuerda utilizar la barra inclinada hacia la derecha / al escribir direcciones de Internet


o URL.

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>.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

5. ESPECIFICAR LAS DIMENSIONES DE LA IMAGEN


Otro detalle que podemos establecer mediante los atributos de la etiqueta <img> es el ancho y
alto de la imagen. Para ello se utilizan los atributos width (ancho) y height (alto).
Aunque no es obligatorio establecer estos atributos, sí que es muy recomendable, ya que al
hacerlo estamos facilitando la tarea del navegador.
El navegador suele representar primero todo el texto de la página y después las imágenes, ya que
estas tardan más en cargarse. Si establecemos los atributos width y height, el navegador sabe
desde el principio lo que ocuparán las imágenes, por lo que puede renderizar la página mejor,
dejando el espacio necesario. Si no indicamos estos dos atributos, entonces la página puede
variar su aspecto a medida que se cargan las imágenes, ya que estas desplazan el texto y los otros
objetos que tienen a su alrededor.
Vuelve al Bloc de notas. Haz clic delante del carácter > de la primera etiqueta img.
Añade un espacio en blanco y escribe:
width="300" height="210"

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

6. IMÁGENES COMO FONDO


Finalizaremos esta lección mostrando un ejemplo distinto de lo que se puede hacer con las
imágenes. Así pues, sabemos que con la etiqueta <img> incluimos imágenes que forman parte
del contenido de la página web. A veces incluso es lo más importante de la página. Sin embargo,
en otros casos la inclusión de una imagen tiene más bien un propósito estético o decorativo. Esto
ocurre en aquellas imágenes que aparecen como fondo de una página web o como fondo de otros
elementos incluidos en esta (por ejemplo, como fondo de una tabla).
Sin embargo, para incluir una imagen como fondo de un elemento, debemos hacerlo utilizando
las hojas de estilo en cascada (CSS). Aunque todavía no las hemos estudiado, no es nada
complicado hacerlo. Incluiremos una imagen de fondo para toda la página. Para ello, lo haremos
en la etiqueta <body>.
Haz clic delante del carácter > de la etiqueta <body>.
Añade un espacio en blanco y escribe lo siguiente:
style="background-image: url(images/fondo.jpg)"
Este es el aspecto que tiene el lenguaje de las CSS. Sin entrar en mayores detalles, vemos que se
utiliza la propiedad background-image a través del atributo style de la etiqueta <body>.

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.

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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).

Copyright © Computer Aided Elearning, S.A.


Introducción. Formato y propiedades

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">

Copyright © Computer Aided Elearning, S.A.

También podría gustarte