Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Animated GIFs and Beyond: Motion Design for Impact and Performance

171 views

Published on

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

Published in: Design
  • Be the first to comment

Animated GIFs and Beyond: Motion Design for Impact and Performance

  1. 1. Animated GIFs Miguel Cardona miguel@imgix.com Design for Impact & Performance
  2. 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. 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. 4. It’s kind of like “Save for web” But for Millions of Images on Demand
  5. 5. I work a lot with motion in User Experience Design & Prototyping.
  6. 6. Some Examples of my students’ course work at RIT…
  7. 7. Kelly Hurlburt http://kellyhurlburt.com
  8. 8. Tim Torres http://timtorr.es
  9. 9. Wei Wei Huang
  10. 10. Tim Torres http://timtorr.es
  11. 11. Understanding motion’s role in design is important for better communication.
  12. 12. Our brains process video 60,000 times faster than text. – Psychology Today, “Video vs. Text: The Brain Perspective.”
  13. 13. So…about those Animated GIFs
  14. 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. 15. GIF89a https://www.w3.org/Graphics/GIF/spec-gif89a.txt
  16. 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. 17. Why do we still have Animated GIFs? Why are they still popular?
  18. 18. • Structured and simple • Communicate complex thoughts • Expressive punchlines GIFs are like Haikus!
  19. 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. 20. They Resonate with People’s Emotions
  21. 21. #WhatShouldWeCallMe? • Meme Culture • 2 Million+ Views a Day • Law Student’s blog of inside jokes • “Reaction GIFs” • An Awesome Timesuck
  22. 22. Even ask @beep
  23. 23. bukk.it/
  24. 24. GIFs in Marketing
  25. 25. https://www.hakro.com/en
  26. 26. https://www.hakro.com/en
  27. 27. GIFs in Emails?
  28. 28. Express Morning Mischief
  29. 29. GIFs in 
 News & Media
  30. 30. newyorker.com
  31. 31. theoutline.com
  32. 32. GIFs to Educate 
 & Demonstrate
  33. 33. http://blog.studiominiboss.com/
  34. 34. https://dribbble.com/MarkusMhttps://dribbble.com/guidorosso
  35. 35. @bhaggs
  36. 36. GIFs as an Art Form
  37. 37. http://www.evan-roth.com/work/one-gif-compositions/ Evan Roth
  38. 38. http://www.sam-cannon.com/ Sam Cannon
  39. 39. probertson.tumblr.com/ Paul Robertson
  40. 40. That’s Pirate Baby's Cabana Battle Street Fight 2006 on youtube … 
 Thank me later.
  41. 41. What do you want to know about GIFs?
  42. 42. What do you want to know about GIFs? I asked three 
 Designers…
  43. 43. What do you want to know about GIFs? I asked three 
 Designers… Seasoned Designer (12 yrs Experience)
  44. 44. What do you want to know about GIFs? I asked three 
 Designers… Seasoned Designer (12 yrs Experience) Young Designer (4 yrs Experience)
  45. 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. 46. Seasoned Designer Ali Ali of dwaiter.com & former Visual Designer at Google What are people using to make gifs?
  47. 47. Animation by Mike Roushey Timeline Tool FTW!
  48. 48. Save for Web
  49. 49. All the GIF Options
  50. 50. Much better at the things
  51. 51. Save as Animation
  52. 52. Import it Don’t “Open” it
  53. 53. Trim & Set Frames
  54. 54. Edit & Optimize
  55. 55. Timeline Options
  56. 56. Animation by Allison Gross Video & GIF Options
  57. 57. https://www.invisionapp.com/blog/7-tips-for-designing-awesome-gifs/
  58. 58. Add captions Export
  59. 59. • 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
  60. 60. • 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
  61. 61. • GIF to Video conversion for Command Line
 https://github.com/jclem/gifify GFIFY
  62. 62. Young Designer Paul Forgione Design @ Tide Pool & Former Designer at Google What are some modern alternatives I may not know about?
  63. 63. • Just like GIFs • Potentially smaller file size • Works on Android & Chrome Browser • Use with SrcSet to Enable Alternative Animated WebP
  64. 64. Animated WebP • WebPonize Tool to Convert
 https://webponize.github.io/ • Just Works
  65. 65. <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
  66. 66. • Control with CSS • More Color • Better Transparency with PNG24s • Better Compression with PNG8 or JPEG • More Programmatic Control
 • Think Muybridge… Sprite Sheets
  67. 67. Eadweard Muybridge  was an English photographer important for his pioneering work in photographic studies of motion, and early work in motion-picture. zoopraxiscope kinetoscope
  68. 68. Twitter like animation
  69. 69. Drag onto Stage Inside a MovieClip
  70. 70. Right Click on the MovieClip
  71. 71. Do Math with Total Frames & Stage Width To get Desired Output.
  72. 72. 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
  73. 73. Check out kirupa.com for a great Demo
  74. 74. 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>
  75. 75. 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
  76. 76. <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
  77. 77. • 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
  78. 78. GIF 2MB MP4 34KB (Using imgix.com to transcode files)
  79. 79. Design Student Apriet Kenig RIT New Media ’18. http://aprietkenig.com/ How do I save out a smaller GIF file?
  80. 80. 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
  81. 81. 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
  82. 82. Delete Redundant Frames
  83. 83. Adjust Delay 20 frames 30fps can be 10 frames at 15fps
  84. 84. Select GIF
  85. 85. Reduce Colors
  86. 86. For movie-like GIFs, make lossy, then adjust dither.
  87. 87. Don’t set if you want current browsers to match color values
  88. 88. No metadata = smaller file sizes
  89. 89. Global palette, can be manually edited
  90. 90. Scaling for after the fact
  91. 91. Looping options, typically forever
  92. 92. https://imageoptim.com/
  93. 93. https://imageoptim.com/
  94. 94. https://imageoptim.com/
  95. 95. 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
  96. 96. THANK YOU FITC!
  97. 97. hello@miguelcardona.com mig@imgix.com twitter: @miggi instagram: @instamiggi www.imgix.com www.rit.edu

×