¿Quieres saber cómo mostrar GIFs en HTML? En este artículo te explico todo lo que debes saber sobre estos elementos para que los puedas emplear en tu sitio web y añadirlos a través de HTML.
¡Despegamos!
Índice de Contenidos
¿Qué es un GIF en HTML?
La palabra GIF es el acrónimo de Graphics Interchange Format, lo que se traduce al español como Formato de Intercambio de Gráficos. Se trata de un formato muy utilizado en la web, de forma que se puede afirmar que los GIFs en HTML son elementos que permiten añadir tanto animaciones como imágenes a tu sitio web.
¿Cómo insertar un GIF en HTML?
En la práctica, los GIFs en HTML no son más que archivos con extensión .gif que se suben al servidor web y se enlazan desde el documento HTML. Para ello, se utiliza la etiqueta <img>, la cual sirve para añadir imágenes a la web.
Se trata de una etiqueta vacía (no tiene etiqueta de cierre) y su particularidad es que siempre debe llevar consigo el atributo src, en cuyo valor se indica la ruta al archivo GIF que deseas mostrar en HTML.
En el siguiente ejemplo, te muestro el código necesario para mostrar un archivo GIF llamado gifs-html.gif almacenado en la carpeta uploads del servidor donde se aloja este sitio web. A su vez, la carpeta uploads se encuentra dentro del directorio wp-content, el cual se ubica en la carpeta raíz del servidor.
<img src="https://htmlmasters.tech/wp-content/uploads/gifs-html.gif">
El resultado de aplicar dicho código es el siguiente:
Para subir la imagen a tu servidor web, puedes emplear programas como FileZilla. Si empleas un gestor de contenidos como WordPress, debes acceder a Medios -> Añadir Nuevo y arrastrar o subir el archivo en cuestión.
Después, una vez el archivo se encuentre en la biblioteca de medios, podrás acceder a él y copiar su URL:
¿Dónde encontrar GIFs para añadir en HTML?
Hay una serie de fuentes en las que encontrar GIFs libres de derechos de uso que podrás añadir a tus sitios web. Te recomendamos las siguientes:
En cualquier caso, antes de emplear una imagen de terceros en tu sitio web, te recomiendo revisar sus condiciones de uso a la hora de descargarla, ya que las plataformas anteriores pueden modificar periódicamente sus políticas.
GIFs en HTML: conclusión
Si quieres añadir GIFs en HTML, únicamente debes emplear la etiqueta <img> indicando en su atributo src la ruta del archivo con extensión .gif. Podrás encontrar y utilizar dichos ficheros en webs como las que te he explicado y añadirlos a tu servidor mediante una conexión FTP (FileZilla) o empleando un gestor de contenidos como WordPress.
Espero que este artículo te haya sido de ayuda. Para más artículos como este, te recomiendo visitar todas nuestras entradas.
¡Hasta la próxima!
