The use of GIFs in websites and email marketing has skyrocketed in the past seven or so years.
You probably might not believe it if you learned from this post that GIFs were created more than 30 years ago, with CompuServe being the first company to use a GIF in 1987.
Although it has taken a while for GIFs to find their footing, their success in social and professional settings is no denying.
This post will give you a comprehensive guide to inserting GIFs into HTML.
How to insert a GIF into HTML
To insert a GIF into HTML, you will use the standard image tag <img src=” “/> used to insert images. However, instead of providing a path or link to the image in the source, you will need to add the path or link to your GIF.
Prepare the GIF You Want To Use
There are many online platforms where you can get free GIFs to use on your projects.
However, most of these GIFs might not meet your standards, and you will need to create one by yourself.
Some platforms you can use to create GIFs easily include Giphy, Adobe Photoshop, free animation software, and other image editors.
Always optimize your GIFs because a large file size will take time to load on the user end.
Note: If you are using HTML to insert GIFs in your marketing emails, only the first frame of the GIF is visible in Outlook (2007-2016) email clients.
Although most users might have updated their systems, there can’t lack that one person who still uses an older version.
Method 1: Insert a GIF Using the Image Tag Without Additional Parameters
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src='main.js'></script> </head> <body> <img src="https://media.giphy.com/media/8ah1D978pNLT8bUC5s/giphy.gif" height="200px" width="200px"/> </body> </html> |
If you used the link we provided in the code snippet above, you should see the GIF appear as shown below when you load the HTML page on your browser.
Source: GIPHY
That was pretty straightforward. Right? What if you wanted to specify a fixed size for your GIF?
Method 2: Insert a GIF Using the Image Tag With Height and Width Parameters
There are situations where you might need to specify the height and width of the GIF as it is loaded on your website. That is easier and simpler than you might think, as you only need to use the height and width parameters supported by the image tag.
See the code snippet below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src='main.js'></script> </head> <body> <img src="https://media.giphy.com/media/8ah1D978pNLT8bUC5s/giphy.gif" height="200px" width="200px"/> </body> </html> |
In the code above, you can see that the GIF is set to a fixed size of height=”200px” and width=”200px”. When you load this HTML page on your browser, you will notice that GIF will have a fixed size of 200px (height and width) as dictated in the image tag.
Source: GIPHY
Method 3: Insert a GIF into an HTML email
Did you know that you can insert HTML in your Emails? For some people, that is a regular thing, while it might be new to others.
If you are doing online marketing, developing a good-looking and attractive email that can entice your potential customers is highly recommended.
Unfortunately, the editing features provided by the Gmail app are limited, and people resolve to use HTML to craft their emails.
Follow the steps below and learn how to insert a GIF in an HTML email.
Step 1: Write the HTML code for your email in a text editor like Notepad++, sublime text, VsCode, etc. To insert a Gif, use the image tag detailed in method-1 and method-2.
This post will use the HTML code for email.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <h2>Don't be left Behind</h2> <br /> <h2>Register today for our upcoming product launch</h2> <img src="https://media.giphy.com/media/8ah1D978pNLT8bUC5s/giphy.gif" /> </body> </html> |
Step 2: There are different ways that you can use to insert HTML into an email. The easiest is using the “Insert HTML by Designmodo” Chrome extension.
After installing this extension, you will notice a new icon added in Gmail, allowing you to insert HTML code. See the image below.
Step 3: Click the “Insert HTML” icon and paste your HTML code in the window that pops up, as shown below.
When done, click the “Insert HTML” button. You will see the content load inside your body, including the GIF you added using the HTML image tag.
That’s it! This post has given you all the methods you can use to insert a GIF in your HTML code.
Frequently asked questions about how to insert a GIF into HTML
Which browsers support animated GIFs?
Currently, nearly all browsers support the us of animated GIFs, including Chrome, Firefox, Opera, Chromium, Safari and other popular browsers. Internet Explorer ist he only browser that seems to have an issue with high frame rates.
Are GIFs better than APNGs?
If you are concerned with file size, APNG or Animated PNG would be the go-to option. However, if the file size is not of concern, you would be good to go with GIFs.