Cómo insertar archivos GIF en mi sitio web

Añadir una imagen a tu web mejora mucho su atractivo. Los formatos más usados para imágenes en la web son .jpg y .gif. La Universidad de Indiana dice que los .gif son más adecuados para imágenes con bordes nítidos y gradaciones de color reducidas: dibujos animados, texto y arte lineal. Otras ventajas: fondo transparente y animación. Añadir un .gif es tan simple como subir el archivo y escribir una línea de código.

Paso 1

Abre el panel de administración de tu web. Será diferente para cada uno según el servidor o si usas programas como Dreamweaver. Básicamente hay dos tipos de editores: editor HTML o WYSIWYG (What You See Is What You Get). Estos últimos hacen la creación de páginas más intuitiva. Los editores HTML requieren conocer lo básico del lenguaje HTML.

Paso 2

Guarda tu archivo .gif en la carpeta "images" o la adecuada de tu web. Si usas un programa local, busca la carpeta correcta en tu disco. Si usas una interfaz online, sube la imagen. Navega a la carpeta correcta en tu panel y sigue las instrucciones para subir archivo. Normalmente usarás un botón "Examinar" para encontrar el .gif en tu ordenador y luego "Subir".

Paso 3

Añade el .gif a la página web. En un editor WYSIWYG, solo arrastra y suelta la imagen donde quieras. Previsualiza para asegurar que aparece como esperas y ajusta si es necesario.

Si usas editor HTML de texto, abre la página HTML donde irá el .gif. Desplázate al punto en el código HTML donde quieres que aparezca. Añade la siguiente línea, sustituyendo la información tras los signos "=" por la de tu .gif y manteniendo las comillas:

<img src="tu_carpeta/tu_imagen.gif" alt="texto alternativo" width="ancho" height="alto" hspace="espacio_horizontal" vspace="espacio_vertical" border="borde">

"img src" significa "fuente de imagen". Entre comillas va la carpeta y el nombre del .gif. "alt" es el texto que aparece si el enlace de imagen está roto, si el visitante tiene imágenes desactivadas o para lectores de texto. "width" y "height" establecen el tamaño en píxeles. "hspace" y "vspace" definen espacio vertical/horizontal alrededor de la imagen. "border" añade un borde y el número su grosor.

Consejo

Un uso común de .gif es "spacer.gif": una imagen transparente de 1x1 píxeles. Da a los diseñadores la opción de añadir espacio predecible en el layout. Para añadir espacio bajo un bloque de texto, pon el spacer.gif en su propio párrafo y ajusta altura y ancho.

Advertencia

Guarda una copia de la página que vas a alterar antes de añadir el nuevo .gif y trabaja offline si es posible hasta que estés satisfecho. Evita que páginas de prueba se publiquen y protege tu capacidad de empezar de nuevo si hay dificultades.