Ir al contenido principal

Formatos e inserción

Las imágenes juegan un papel MUY importante en el diseño web.

Existen muchos tipos de imagenes distintos (formatos de imágenes). Pero para el Diseño web, solo nos interesan las imágenes con formato .jpg, .png, .ico o .gif

Estructura básica de una imagen

<img src="imagenes/faro.jpg"/>

Formato GIF
Formato de archivos gráficos de mapa de bits desarrollado por Compuserve. Soporta una paleta de 256 colores y la posibilidad de crear imágenes animadas. Los archivos GIF utilizan una compresión sin pérdida, así que el tamaño se reduce sin modificar la calidad, permitiendo que el archivo se convierta a otro formato sin pérdida de calidad excesiva.
Formato JPG (JPEG)
El más utilizado junto al formato PNG. Sin embargo, se trata de un algoritmo pensado para comprimir imágenes con 24 bits de profundidad o en escala de grises. Y es preferible no guardar imágenes en formato JPEG, si se van a modificar. Cada vez que se edita, la imagen sufre una pérdida de calidad. Es imprescindible, por tanto, tener una copia en formato BMP o TIFF, con la máxima profundidad de color y sin compresión, y guardar en formato JPEG (.jpg) sólo las imágenes finales que se vayan a publicar.
Formato PNG
Formato de archivos de gráficos de mapa de bits desarrollado en 1995 como una alternativa al formato GIF. De mejor calidad que el formato GIF, permite almacenar imágenes en blanco y negro con una gran profundidad de color. Utiliza una paleta de 256 colores, soporta la transparencia y posee una función de entrelazado para mostrar la imagen de forma gradual.
Formato ICO
Pequeña imagen que representa un fichero, carpeta o dispositivo en el sistema operativo del ordenador. Son aquellos iconos que puedes ver en todas las barras de herramientas y en el menú de diferentes softwares. También las usamos para los favicon de los sitios web.

Imágenes en otra carpeta

Si no se especifica, el navegador se esperará encontrar la imagen junto al documento actual.

La estructura propia de cualquier página web os obligará a colocar las imágenes en una carpeta distinta. Más que nada para organizar los contenidos y encontrarlos más fácilmente. Si bien es importante saber cómo configurar correctamente la ruta hacia la imagen.

En nuestro ejemplo la imagen se encuentra en la carpeta imágenes. Dicha carpeta está situada junto al documento actual.

Imágenes en otro servidor

<img src="https://www.enreinosa.com/estilos/imagenes/reinosa.jpg"/>

Si la imagen que queremos cargar se encuentra en otra página web, es necesario indicar la ruta absoluta hacia la página web.

Tener cuidado con este método, ya que no siempre se controlan bien los cambios que se hacen en otro servidor y la imagen que se inserta puede estar sujetada a derechos de autor.

Las imágenes enlaces

Para usar una imagen como enlace, procedemos así:

<a href="reinosa.html" title="imagen enlace">
<img src="plaza.png"alt="imagen del ayto de Reinosa"width="350"/>
</a>

Newsletter

Si mandas tu email desde este formulario, te responderé con una oferta de 5% aplicable a tu próximo presupuesto. Más adelante, te enviaré ofertas y noticias acerca de mi actividad.
No spam. Tus datos están protegidos y no compartidos.

imagen Captcha correspondiente a tzaar

Por favor, escribir el nombre visible en esta imagen sin tilde, mayúscula, símbolo...

Parte inferior de la sección rellenada por fotos de gente