Adding a GIF to Your Website

Although adding a gif to your website may not be crucial it is still a fun way to spice up your website. Gifs create a relatable aspect to any sort of communication. Adding a gif could further engage a viewer of your website and add some cute flourish.

Adding a gif is not complicated. There are two easy ways that one can add a gif into their HTML5. The website Giphy provides hundreds and hundreds of great gifs on their website. To make using their gifs easier they provide a link to use specifically for HTML5.

Adding a GIF from personal folder. 

  • Step 1:  You can find a gif almost anywhere, when you come across one that you like and think is useful for the future save it into a folder and make sure to save it as a Graphics Interchangeable Format (GIF)screen-shot-2017-02-06-at-12-58-58-pm
  • Step 2: The code for adding a gif is similar to adding an image. Simply write a line of code that looks similar to inserting a photo. Instead of adding “photo.jpg” make sure you add “movingpicture.gif”. The code would be <img src=”movingpicture.gif”>screen-shot-2017-02-06-at-1-05-05-pm
  • Step3: Once you’ve added your gif you can then start playing around with it and add height and width like you would for an image.

Adding a GIF from Giphy.

  • Step  1: Giphy makes using their GIFs incredibly easy. Once you find the GIF you want to use scroll to the bottom of the GIF and you will find a ‘share’ tab. Next to that tab there is an ‘advanced’ tab. In the ‘Advanced’ tab there is a list of links. Select the HTML5 link and copy it. screen-shot-2017-02-06-at-12-55-50-pm
  • A sign will flash at the top of the screen saying ‘Copied to Your Clipboard’. You can now add it to your website. The coding for this would be <iframe src=”GIF URL”> and then again add height and width to your specifications. The iframe tag is used to display your gif in your website. Since it comes from the website, Giphy, the iframe tag allows you to use the source url to display the gif. Screen Shot 2017-02-06 at 1.11.22 PM.pngAnd thats all there is to it! Have fun!

~ by lb2843 on February 6, 2017.

One Response to “Adding a GIF to Your Website”

  1. This is my choice for best overall post. It is the most interesting given that gifs are a lot of fun, and it is also clearly explained, step by step with bullet points and images.

Comments are closed.

%d bloggers like this: