Presented at Web Unleashed 2017. More info at www.fitc.ca/webu Presented by Miguel Cardona, imgix Overview 30 years ago this year, the humble GIF was born – as a still image format. Animation, the only reason people are still using GIFs in 2017, was an afterthought, and that explains almost everything you need to know about it. The GIF’s anarchic, DIY ethos has led to it becoming one of the main mediums of communication online. And yet as something that conquered the world accidentally, it’s also a uniquely difficult medium to work in – finicky in its behaviour and tough to make look good, a massive, antiquated file that can slow page loads to a crawl. imgix lead designer Miguel Cardona knows GIFs well. He’s been making them since 1998, and as creative lead at the company that powers visuals for top internet brands, he and his team are working on ways to realize the promise of GIFs while minimizing its baggage. In this talk, Miguel will take an in-depth look at the history and specifications of GIFs, and share techniques and tactics for making GIFs that not only look good, but perform well. Target Audience Designers Five Things Audience Members Will Learn A brief history of GIFs, and how it informs their use and limitations When to use GIFs, and when they should be avoided Best practices for designing and implementing striking and emotionally impactful animations Performance tricks to make GIFs look good and perform well More about the file formats looking to replace GIF

1. Animated GIFs
Miguel Cardona
miguel@imgix.com
Design for Impact & Performance

2. Me…
• Writing HTML and making GIFs since 1997
• BFA New Media and MFA in Industrial Design
• Lead Designer at imgix, San Francisco, CA
• Visiting Professor New Media Design, RIT
• FITC Attendee 2004-2010, 2016-17
• Mildly internet famous once drawing on coffee cups
sketchcups.com

3. imgix
• Image resizing & optimizing for the web
• Realtime edits via URL + CDN
• Format Converting
• CEO, Chris Zacharias formerly of Youtube
• We sponsored the coffee booth

4. It’s kind of like “Save for web”
But for Millions of Images on Demand

5. I work a lot with motion
in User Experience Design
& Prototyping.

6. Some Examples of my students’
course work at RIT…

7. Kelly Hurlburt http://kellyhurlburt.com

8. Tim Torres http://timtorr.es

9. Wei Wei Huang

10. Tim Torres http://timtorr.es

11. Understanding motion’s role in design
is important for better communication.

12. Our brains process video
60,000 times faster than text.
– Psychology Today, “Video vs. Text: The Brain Perspective.”

13. So…about those
Animated GIFs

14. History
• Originally called GIF89a
• Graphic Interchange Format
• Developed by CompuServe in 1987
• Invented by the homie, Steve White
• Patent dispute with UNISYS
• Open Source since 2006

15. GIF89a
https://www.w3.org/Graphics/GIF/spec-gif89a.txt

16. • Limited Indexed Color Palette & Large File Sizes
• Poor 8-bit Aliased Transparency
• Bad 1980’s Compression Technology
• Was a Rally Cry for the creation of the PNG
• Processing Still Computationally Expensive
• Fist fights over pronunciation
Problems

17. Why do we still have Animated GIFs?
Why are they still popular?

18. • Structured and simple
• Communicate complex thoughts
• Expressive punchlines
GIFs are like Haikus!

19. • Open source since 2006
• Ubiquitous
• Creation Tools
• People just expect them to work…
• Facebook added GIF support in 2015.
• Right Click “Save Image As…”
is like “View Source” of GIFs
Why are they still around?

20. They Resonate
with People’s
Emotions

21. #WhatShouldWeCallMe?
• Meme Culture
• 2 Million+ Views a Day
• Law Student’s blog of inside jokes
• “Reaction GIFs”
• An Awesome Timesuck

22. Even ask @beep

23. bukk.it/

24. GIFs in Marketing

25. https://www.hakro.com/en

26. https://www.hakro.com/en

27. GIFs in Emails?

28. Express Morning Mischief

29. GIFs in
News & Media

30. newyorker.com

31. theoutline.com

32. GIFs to Educate
& Demonstrate

33. http://blog.studiominiboss.com/

34. https://dribbble.com/MarkusMhttps://dribbble.com/guidorosso

35. @bhaggs

36. GIFs as an Art Form

37. http://www.evan-roth.com/work/one-gif-compositions/
Evan Roth

38. http://www.sam-cannon.com/
Sam Cannon

39. probertson.tumblr.com/
Paul Robertson

40. That’s Pirate Baby's Cabana
Battle Street Fight 2006 on youtube …
Thank me later.

41. What do you want
to know about GIFs?

42. What do you want
to know about GIFs?
I asked three
Designers…

43. What do you want
to know about GIFs?
I asked three
Designers…
Seasoned Designer (12 yrs Experience)

44. What do you want
to know about GIFs?
I asked three
Designers…
Seasoned Designer (12 yrs Experience)
Young Designer (4 yrs Experience)

45. What do you want
to know about GIFs?
I asked three
Designers…
Seasoned Designer (12 yrs Experience)
Young Designer (4 yrs Experience)
Design Student (Senior Year in College)

46. Seasoned Designer Ali Ali
of dwaiter.com & former Visual Designer at Google
What are people using
to make gifs?

48. Animation by Mike Roushey
Timeline Tool FTW!

49. Save for Web

50. All the GIF
Options

52. Much better
at the things

53. Save as Animation

54. Import it
Don’t “Open” it

55. Trim & Set Frames

56. Edit & Optimize

57. Timeline Options

59. Animation by Allison Gross
Video
& GIF Options

60. https://www.invisionapp.com/blog/7-tips-for-designing-awesome-gifs/

62. Add captions Export

63. • Options to scale & adjust frame rates
• Screen capture live content
• Export to MP4 video, or run batch operations
• Simple UI for casual use
• Options to caption, edit & save locally
• Keeps you from making really dumb mistakes
GIPHY Capture

64. • Gifsicle is a command-line tool for creating, editing,
and getting information about GIF images and
animations.
GIFSICLE
gifsicle --delay=10 --loop *.gif > anim.gif

65. • GIF to Video conversion for Command Line
https://github.com/jclem/gifify
GFIFY

66. Young Designer Paul Forgione
Design @ Tide Pool & Former Designer at Google
What are some modern
alternatives I may not
know about?

67. • Just like GIFs
• Potentially smaller file size
• Works on Android & Chrome Browser
• Use with SrcSet to Enable Alternative
Animated WebP

68. Animated WebP
• WebPonize Tool to Convert
https://webponize.github.io/
• Just Works

69. <picture>
<source srcset=“img/animation.webp" type=“image/webp">
<source srcset=“img/animation.gif” type=“image/gif">
<img src="img/animation.gif" alt="Alt Text!">
</picture>
Animated WebP

70. • Control with CSS
• More Color
• Better Transparency with PNG24s
• Better Compression with PNG8 or JPEG
• More Programmatic Control
• Think Muybridge…
Sprite Sheets

71. Eadweard Muybridge
was an English photographer important for his pioneering work in
photographic studies of motion, and early work in motion-picture.
zoopraxiscope kinetoscope

73. Twitter like animation

74. Drag onto Stage
Inside a MovieClip

75. Right Click on
the MovieClip

76. Do Math with
Total Frames
& Stage Width
To get Desired
Output.

78. Sprite Sheets
• Can be made of existing media in Animate
• Use GIFs or built animations
• Game Devs Use this tool still
• Must be exported out of MovieClips
• Have Supplied JSON data for Animating
• Great for detailed Emoji and Interface Animations

79. Check out kirupa.com for a great Demo

80. Inline Video
<video id=“spinner" loop autoplay playsinline muted style="border:solid
1px #e3eaef;width:100%;">
<source src=“animation.mp4” type="video/mp4">
<img src=“animation.gif” alt="header image">
</video>

81. Use MP4 native video embeds with
playsinline, autoplay & loop.
<video id=“spinner" loop autoplay playsinline muted style="border:solid
1px #e3eaef;width:100%;">
<source src=“animation.mp4” type="video/mp4">
<img src=“animation.gif” alt="header image">
</video>
Inline Video
Makes them behave like
Animated GIFs

82. <video id=“spinner" loop autoplay playsinline muted style="border:solid
1px #e3eaef;width:100%;">
<source src=“animation.mp4” type="video/mp4">
<img src=“animation.gif” alt="header image">
</video>
Inline Video
GIF Backup

83. • Twitter, GIPHY, imgur all convert uploaded
GIFs to MP4 video.
• Better & variable compression methods
• Does not account for pauses
• Longer GIFs with pauses don’t fare well
Inline Video

84. GIF 2MB MP4 34KB
(Using imgix.com to transcode files)

85. Design Student Apriet Kenig
RIT New Media ’18. http://aprietkenig.com/
How do I save out a
smaller GIF file?

86. Before Authoring
1. Be Smart and use fewer colors
2. Create a File Size Budget (Less than 100KB)
3. Consider Alternatives, like Spritesheets, WebP, or MP4
4. Keep it as short as possible
5. Consider the Destination
6. Be Smart about Choosing Background Colors / Transparency
7. Think about the next larger context

87. 1. Physically Scale Down Size
2. Reduce Frame Rate / Remove Extra Frames
3. Increase Frame Duration
4. Add Pauses for Duplicate Frames
5. Tighten Loop
6. Reduce Colors Further
7. Use Lossy Compression (ImageOptim)
(Lossy GIF Compression can reduce Animated
GIF file sizes by 30%–50%)
When Exporting

88. Delete Redundant Frames

89. Adjust Delay
20 frames 30fps
can be 10 frames at 15fps

90. Select GIF

91. Reduce Colors

92. For movie-like
GIFs, make
lossy, then adjust
dither.

93. Don’t set if you
want current browsers
to match color
values

94. No metadata =
smaller file sizes

95. Global palette,
can be manually
edited

96. Scaling for
after the fact

97. Looping options,
typically forever

98. https://imageoptim.com/

99. https://imageoptim.com/

100. https://imageoptim.com/

101. imgix + GIFs
• GIFs on imgix have been in beta for a while
• imgix currently processes GIFs for select customers
• Convert to Sprite Sheets, MP4, WebM, Animated WebP
• Makes use of our Image API Manipulations
• We can stream GIFs, take advantage
of local palettes, & lossy compression

105. THANK YOU
FITC!

106. hello@miguelcardona.com
mig@imgix.com
twitter: @miggi
instagram: @instamiggi
www.imgix.com
www.rit.edu