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 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
A brand-new, free resource on web development with high-quality illustrations and animations to help you master the basics of responsive images.
A look at some of the responsive image HTML tags included in the HTML 5.1 standard.
A free, self-paced course on working with responsive images to make sites look good and load fast.
A list of techniques for creating responsive images and guidelines for using them.
A tutorial on how to scale responsive images with the <picture> HTML tag.
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.
Documentation for using responsive images in development, including resolution switching, development tools, and modern image formats.
An article on how to use responsive images with CSS.
A forum for finding and sharing information on HTML 5.1 responsive images elements.
Tools and info
Google's tools for testing responsive and device-specific mobile viewports for responsive, mobile-first development.
GitHub-hosted code for Google's open-source AMP project, which optimizes image performance along with overall page performance.
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
Using GIMP to size, compress, and optimize images for the web.
A Lynda.com course on how to create graphics optimized for quick download and good appearance across multiple devices.
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."
A primer on how to choose image formats, understand the implications of compression, use CSS sprites, and serve scaled images.
Understanding and using progressive, semi-progressive, and non-progressive JPEGs in software.
A free, sophisticated cross-platform image editor.
An improved JPEG encoder from Mozilla to optimize compression size in the popular format. Intended for non-real-time optimization.
A website that lets you drag and drop JPEGs and PNGs into the page for smart lossy compression. Also available as a plugin.
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.
A very fast JPEG codec that is generally two to six times faster in operation than libjpeg.
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.
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.
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
A series of video tutorials on CSS animation, including keyframes, transforms, and the animation property.
A tutorial on using CSS keyframes to create easy animation for "dazzling pre-loaders, interactive interfaces, effects, or full-scale storytelling."
A CSS animation course delivered over four weeks with five emails a week at a pay-what-you-want price.
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.
A Udemy class that includes rotation, skewing, scaling, and mirroring elements in 2D and 3D, combining them to form animated sequences.
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.
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.
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.
A link list to four of the most popular CSS animation frameworks and libraries.
A list of CSS3 engines and libraries.
Another tutorial on using the GreenSock Animation Platform. Focused on an introductory level.
How to use icons to create an animated effect.
A web animation tutorial and inspiration site.
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.
A fast animation engine with the same API as JQuery's $.animate(), but it can work with or without JQuery.
A selection of libraries, including some mentioned in collections above, that didn't actually automatically time out in 2016.
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.
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
An extended example of how to use SVGs to create complex animations from simple illustrations.
An example of animating a line illustration created in Adobe Illustrator.
Tips and resources for SVG animation.
An exchange of opinions on how to successfully animate SVG files.
The basics of using the SVG element in HTML5.
A tutorial on how to use SVG images in HTML programming.
An exploration of the different ways to create professional animations using SVG images.
A free and open-source professional vector graphics editor for Windows, MacOS, and Linux.
An online tool for quickly creating animated SVG spinners, loaders, and other looping animations.
A free online service that turns SVG drawings into a CSS icon kit.
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.
A collection of information on three major web image formats including considerations on how to choose the best one for a given project.
A Facebook engineering team's explanation of the development and use of keyframes as a way to export and play back After Effects animations.
A tutorial for selecting the right size, formats, and resolutions for icons, based on the choice of operating system.
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.