65 Resources For Boosting Web Images And Animations
Some people say that appearances too often displace substance in importance. When it comes to software, however, appearance is often part of substance. An application is only as good as its user experience. That means graphics.
Images, icons, navigation objects, maps, data displays, animated status indicators, and other elements help inform, entice, or direct users. For web developers, managing these elements gracefully is a fundamental requirement. You need to understand the constraints of network bandwidths, mobile device power, and varying screen sizes to be good at front-end development.
Here is a collection of 65 largely free and low-cost resources—tutorials, courses, books, and tools—that will help you get up to speed.
Responsive images
Responsive design means supporting whatever device, screen size, and resolution a user might have. Images need scaling, resizing, and a choice of resolutions.
Tutorials and courses
HTML & CSS is Hard: Chapter 11 — Responsive Images
A brand-new, free resource on web development with high-quality illustrations and animations to help you master the basics of responsive images.
Using Responsive Images (Now)
A look at some of the responsive image HTML tags included in the HTML 5.1 standard.
Responsive Images by Google
A free, self-paced course on working with responsive images to make sites look good and load fast.
Responsive Images
An O’Reilly tutorial on how to inspect images, assess loading time, use JavaScript to load different images into tags, make use of the data-src and scrset attributes, and use the tag.
The Techniques and Guidelines Behind Responsive Images
A list of techniques for creating responsive images and guidelines for using them.
How to Use HTML5 “picture” for Responsive Images
A tutorial on how to scale responsive images with the HTML tag.
Lesson 8, Responsive Web Design
A course on building responsive web designs. Lesson 8 focuses on adding images for any screen size and using techniques to deliver high-quality images while avoiding loading speed penalties.
Mozilla Developer Network Responsive Images
Documentation for using responsive images in development, including resolution switching, development tools, and modern image formats.
Responsive Images in CSS
An article on how to use responsive images with CSS.
Responsive Images Community Group
A forum for finding and sharing information on HTML 5.1 responsive images elements.
How to use responsive images
Added 5/2/17:There’s also a Part 2 where you learn how to build your own responsive image workflow, how to automate responsive images with AWS Lambda.
Tools and info
Test Responsive and Device-specific Viewports
Google’s tools for testing responsive and device-specific mobile viewports for responsive, mobile-first development.
Code for Accelerated Mobile Pages Project
GitHub-hosted code for Google’s open-source AMP project, which optimizes image performance along with overall page performance.
Lazy Loading on Non-AMP Pages with Layzr.js
A list of techniques for optimizing websites that weren’t designed for AMP compliance.
Image compression and optimization
Network bandwidth, storage, and device power often have constraints. Compression and optimization let you get the best image quality possible while minimizing demand on resources.
Tutorials and courses
Essential Image Optimization for the Web
A free ebook/webpage by Google’s Addy Osmani. It will teach you about modern image optimization techniques, formats, decoders, techniques for efficient compression, and more.
Preparing Your Images for the Web
Using GIMP to size, compress, and optimize images for the web.
High Performance Images: Shrink, Load, and Deliver Images for Speed
An O’Reilly book on images for developers, including “color theory, image formats, storage and management, operations delivery, browser and application behavior, the responsive web, and many other topics.”
Web Performance 101: Tuning Tips for Images
A primer on how to choose image formats, understand the implications of compression, use CSS sprites, and serve scaled images.
Progressive JPEGs and green Martians
Understanding and using progressive, semi-progressive, and non-progressive JPEGs in software.
Tools
GIMP
A free, sophisticated cross-platform image editor.
mozjpeg
An improved JPEG encoder from Mozilla to optimize compression size in the popular format. Intended for non-real-time optimization.
TinyPNG
A website that lets you drag and drop JPEGs and PNGs into the page for smart lossy compression. Also available as a plugin.
VIPS
A free and fast image-processing library that handles many formats, including JPEG, TIFF, PNG, SVG, PDF, GIF, WebP, FITS, OpenEXR, Matlab, Analyze, PFM, Radiance, and OpenSlide, with low memory requirements.
libjpeg-turbo
A very fast JPEG codec that is generally two to six times faster in operation than libjpeg.
ImageMagick
A software suite that lets programs calling it create, edit, and convert images, with support for more than 200 raster or vector image types. There are interfaces for many languages and it runs under Linux, Windows, MacOS, iOS, Android, and other operating systems. There’s a module library or bindings for ImageMagick in almost every programming language ecosystem. All you have to do is Google “ImageMagick [language]” and you’ll probably find what you need.
GraphicsMagick
A fork of ImageMagick that claims to have incorporated many improvements. It’s a collection of tools and libraries that can read, write, and manipulate images in over 88 major formats.
Image Processing in JavaScript
A simple, scannable comparison of Caman JS, glfx.js, Grafi.js, Jimp, Filtrr2, and Processing.js. According to the author, “most of them provide basic operations like adjusting brightness and contrast, greyscale, and inverting and image while others mainly focus on easy understandable code or extendability.”
CSS animation and images
Images can be built and animated in pure CSS. CSS animation allows elements to gradually change their style.
Tutorials and courses
CSS Animation Tutorial #1, #2, #3, and #4
A series of video tutorials on CSS animation, including keyframes, transforms, and the animation property.
Easy CSS Animation Using @keyframes
A tutorial on using CSS keyframes to create easy animation for “dazzling pre-loaders, interactive interfaces, effects, or full-scale storytelling.”
9 Popular Courses on CSS Animation
Tutorials from the Envatotuts+ platform on a number of approaches to animation, including “CSS, JavaScript, easing, SVGs, and special frameworks like the GreenSock Animation Platform.”
CSS Animation 101
A CSS animation course delivered over four weeks with five emails a week at a pay-what-you-want price.
CSS: Animation
A course offered by UI animation consultant Val Head over the Lynda.com platform. It covers transforms and transitions, elements in place, sprite images, multiple animations, SVG images, and high-performance CSS animations.
CSS3 MasterClass — Transformations and Animations
A Udemy class that includes rotation, skewing, scaling, and mirroring elements in 2D and 3D, combining them to form animated sequences.
Tools
Animate.css
A cross-browser library of CSS animations, including dozens of actions, such as bouncing, fading, rotating, sliding, and zooming entrances and exits, plus a list of “attention seekers” and other actions.
CSS Animation Tools, Frameworks, & Tutorials
A link list of CSS animation tools and libraries. The next few entries are also collections, but none of them is a complete duplicate of another.
15 Best CSS3 Animation Tools
Another collection of animation tools and libraries specifically for CSS3. It covers some of the tools in the previous collection, but still has items unique to it.
4 top CSS animation frameworks
A link list to four of the most popular CSS animation frameworks and libraries.
Top 15 CSS3 Animation Tools You Must Try
A list of CSS3 engines and libraries.
JavaScript Animation
JavaScript is the most common and powerful method for animation on the web. There are myriad animation libraries available, but this collection just features some of the current favorites.
Tutorials
GreenSock Animation Platform: First Steps
GreenSock is one of the more popular JavaScript animation platforms for animating HTML elements. This is an introduction to using the platform.
JavaScript Animation with GSAP
Another tutorial on using the GreenSock Animation Platform. Focused on an introductory level.
How to Animate Icons
How to use icons to create an animated effect.
Using HTML5 Canvas in Animate CC: JavaScript Basics
Adobe’s tutorial on how to use Animate CC (formerly Flash Professional) with JavaScript. Focuses on the CreateJS extension.
Codrops
A web animation tutorial and inspiration site.
Tools
Anime.js
A lightweight and flexible JavaScript animation library that works with CSS, individual transforms, SVG, DOM attributes, and JavaScript objects.
GreenSock Animation Platform
A standard commercial HTML5 animation platform. Its “no charge” license covers “most commercial uses.” A paid license is required only when a project is being sold to multiple users.
Velocity.js
A fast animation engine with the same API as JQuery’s $.animate(), but it can work with or without JQuery.
Klute.js
A fast native JavaScript animation engine with SVG morphing, stroke drawing, 2D and 3D transforms, and various CSS3 attributes and properties, including colors and transforms.
Top 9 Animation Libraries to Use in 2016
A selection of libraries, including some mentioned in collections above, that didn’t actually automatically time out in 2016.
JavaScript Animation Libraries
Several dozen libraries that work either with pure JavaScript or with one of several frameworks that include JQuery and React.
Lottie
A new open-source tool from Airbnb’s engineering group. It renders Adobe After Effects animations in real time in iOS, Android, and React Native apps.
SVG Animation
A common standard for web animation is scalable vector graphics files, or SVG. These files can be used for a number of graphics from large animations to simple icons.
Tutorials and info
The Illusion of Life: An SVG Animation Case Study
An extended example of how to use SVGs to create complex animations from simple illustrations.
SVG Line Animation for the Uninitiated
An example of animating a line illustration created in Adobe Illustrator.
Overview of SVG Animation Usage in Web Design
Tips and resources for SVG animation.
How do you animate SVG for the web?
An exchange of opinions on how to successfully animate SVG files.
HTML5 SVG
The basics of using the SVG element in HTML5.
SVG Tutorial
A tutorial on how to use SVG images in HTML programming.
The Art of SVG Animation
An exploration of the different ways to create professional animations using SVG images.
Tools
Snap.svg
A JavaScript library for using SVG images in modern browsers, including making, clipping, patterns, full gradients, and groups.
Inkscape image editor
A free and open-source professional vector graphics editor for Windows, MacOS, and Linux.
SVG Circus
An online tool for quickly creating animated SVG spinners, loaders, and other looping animations.
Iconizr
A free online service that turns SVG drawings into a CSS icon kit.
SVG tools list
A curated list of SVG tools. The collection is part of GitHub’s well-known “awesome” lists.
Image file formats
It’s important to have a basic understanding of image file formats, their effects, and the implications of each if you’re going to be doing front-end development.
JPEG vs. GIF vs. PNG: Which Image Format Is Best for the Web?
A collection of information on three major web image formats including considerations on how to choose the best one for a given project.
Keyframes: Delivering scalable, high-quality animations to mobile clients
A Facebook engineering team’s explanation of the development and use of keyframes as a way to export and play back After Effects animations.
Choosing the Right Size and Format for Icons
A tutorial for selecting the right size, formats, and resolutions for icons, based on the choice of operating system.
Understanding the Most Popular Image File Types and Formats
A review of different image types with images to show differences in effects.
Consider browser support
Some aspects of images and animations in web and mobile applications are long established. But how you handle and use them changes over time with new tools, operating system features, image standard features, and hardware capabilities.
Keep abreast of what is new and different. The site Can I Use is one good way to see what current browsers support for front-end web technologies on desktop and mobile web browsers.
Are there any resources that you find particularly useful for image and animation handling on the web? Share them in the comments below and we will consider adding them to our evolving guide.
Keep learning