GIF images consists of many frames, so size of GIF image is more as compared to normal image. Its not recommended to load GIF images first and its better to maintain one normal preview image for every GIF image. You can use first frame of GIF image as preview image. Click here to see my on-line tool for generating first frame of GIF image

How Facebook Handles GIF images

Facebook is not loading GIF images directly. Its converting user uploaded GIF images into simple video format. Find below inspected source code
Here We are not following facebook way of dealing GIF images. We are just loading GIF images
on user's interest


I have created this angGifPreview AngularJS directive to create Facebook like GIF Preview.  You can find it on github


Add AngularJS

<script src=""></script>

Add CSS and JS files

angGifPreview specific CSS and JS files
<link rel="stylesheet" href="angGifPreview/angGifPreview.css" />
<script src="angGifPreview/angGifPreview.js"></script>

HTML Markup

Find below for HTML markup. gif-preview element tag has 2 attributes 
gif : gif image path
preview : gif preview image path
<gif-preview preview="previewImage" gif="gifImage"></gif-preview>


import gifPreview module as like shown in below code
(function(angular) {
    'use strict';
    angular.module('sampleExample', ['gifPreview'])
      .controller('Controller', ['$scope', function($scope) {
          $scope.previewImage = 'sample_first_frame.png';
          $scope.gifImage = 'sample_giphy.gif';


  1. It is a known fact that we all spend time on our favorite social media platform, Facebook. For some of us, it's our only true source of information while others get their daily news from there. The truth is that no matter how much you really love Facebook and all that it has to offer – using the site's features can be tiring after a while. That's where Facebook Like GIF Preview comes in.



Popular Posts