Animated GIFs and Beyond: Motion Design for Impact and Performance
•
1 like•607 views
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
Recommended
More Related Content
Similar to Animated GIFs and Beyond: Motion Design for Impact and Performance
Similar to Animated GIFs and Beyond: Motion Design for Impact and Performance (20)
More from FITC
More from FITC (20)
Recently uploaded
Recently uploaded (20)
Animated GIFs and Beyond: Motion Design for Impact and Performance
- 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…
- 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.”
- 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
- 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?
- 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/
- 27. GIFs in Emails?
- 29. GIFs in News & Media
- 30. newyorker.com
- 31. theoutline.com
- 32. GIFs to Educate & Demonstrate
- 35. @bhaggs
- 36. GIFs as an Art Form
- 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
- 52. Much better at the things
- 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
- 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
- 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
- 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
- 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!