Landing Page GIFs

Here you'll learn some information about animated website GIFs and some of the considerations when embedding on a landing page.

Why Use a Landing Page GIF

It’s no secret that landing pages are essential for any website or product. They’re typically the first thing a user sees when they arrive on your site, and they play a key role in determining whether users stay or leave.

One of the best ways to make sure your landing page is effective is to use GIFs. GIFs are a great way to add visual interest and engage users. They can be used to highlight key features, show off your product in action, or just add some fun and personality to your site.

GIFs are particularly well-suited for landing pages because they’re short, eye-catching, and easy to consume.

Landing Page GIFs & Their Uses

Landing page GIFs are created for the web and used to direct site visitors to certain areas of your site. They are also used to help break up the various sections of your site, for example see the animated lightbulb icon above. 

GIFs are universally recognized by all browsers and devices so viewing them is very easy (the exception would be earlier technology such as flip phones but not many people still use those). This site was built entirely using WordPress and inserting GIFs could not be easier…more on this below. 

How To Embed a GIF on Your Landing Page

There are a few different ways to add GIFs to your landing page. You can use a GIF as an image file, as an animated HTML element, or as a video file.

If you’re using a GIF as an image file, you’ll need to upload it to your server and then embed it on your page. Most content management systems these days offer easy drag-and-drop installation (Squarespace, WordPress, etc.). If you aren’t sure, ask your developer and they will be able to easily embed the looping GIF wherever you’d like.

Formatting Considerations - Best Practices

Working backwards from the end goal is recommended by most when going about creating website animations (no matter what format is needed). There are pros and cons to any type of media animation.

Think of GIFs as a portable memory card for the web. GIFs hold all the content and images inside their dimensions. Whether this is PNG, JPGs or custom animations, this all resides inside the memory of a GIF. While all browsers are capable of rendering GIFs, not all GIFs will load in the same manner. Depending on how much animation, video or images are held inside, the total size of the GIF will vary. 

Keep in mind that larger file sizes will take a longer to render. BUT here are some ways to increase the loading time and rendering size of a GIF…

Increasing GIF Loading Speed

There are three main ways to increase the loading/rendering time of a GIF. These are:

Caching systems such as plugins and 3rd party compression tools can do wonders for images and larger file GIFs on a website. If you are using WordPress a good one that I’ve used in the past is “WP-Rocket.” What these caching plugins do is compress the size of an image behind the scenes until it is needed on a case-by-case basis. 

Hosting Providers: Hosting companies are not all created equal, some are faster than others and have better servers and database networks across the country. If you are planning to host many GIFs or larger images on your site I would recommend searching around for a quality hosting provide, personally I use Siteground. 

CDNs: Content Delivery Networks serve up your content throughout the world using the closest server center to where the visitor is pulling the information from. Think of these as digital telephone lines that are stronger closer towards the source. Cloudflare is one of the more popular ones at this point in time. 

File Size: Depending on where you want to use your GIFs, if not embedded into your website, the total file size can range from anywhere to something small like an email signature GIF of about 100kb to a customized (very intricate GIF) of 9,000mb. 

*Note: Google Ads have a maximum file limit of 150kb for reference but these are for banner ads and a different set of criteria go into these. 

GIF vs. Video

If you are planning to host many GIFs or try and push a GIF to the maximum file size for your website, this will vary on a case by case basis, I might suggest embedding a video on your site instead. While this doesn’t necessarily have the same appearance and functionality as a GIF, it will help to load faster than an embedded animation (there are exceptions such as JSON format but I’ll get into that in another post). 

As a general rule I might recommend creating a maximum GIF length of about 10 seconds (looping without skips of course) for a landing page animation. This is because most personal and business websites are not equipped for larger file sizes and simply want to load fast. A good exception that I’ve found is Mailchimp and Medium. Both utilize CDNs and host website animations that are quite large in file size. 

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.