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

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.

An O'Reilly tutorial on how to inspect images, assess loading time, use JavaScript to load different images into <img> tags, make use of the data-src and scrset attributes, and use the <picture> tag.

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.

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.

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.

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

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

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.

Using GIMP to size, compress, and optimize images for the web.

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.

Tools

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.

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.

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."

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."

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.

Tools

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.

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 is one of the more popular JavaScript animation platforms for animating HTML elements. This is an introduction to using the platform.

Another tutorial on using the GreenSock Animation Platform. Focused on an introductory level.

How to use icons to create an animated effect.

Adobe's tutorial on how to use Animate CC (formerly Flash Professional) with JavaScript. Focuses on the CreateJS extension.

A web animation tutorial and inspiration site.

Tools

A lightweight and flexible JavaScript animation library that works with CSS, individual transforms, SVG, DOM attributes, and JavaScript objects.

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 fast native JavaScript animation engine with SVG morphing, stroke drawing, 2D and 3D transforms, and various CSS3 attributes and properties, including colors and transforms.

A selection of libraries, including some mentioned in collections above, that didn't actually automatically time out in 2016.

Several dozen libraries that work either with pure JavaScript or with one of several frameworks that include JQuery and React.

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

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.

Tools

A JavaScript library for using SVG images in modern browsers, including making, clipping, patterns, full gradients, and groups.

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.

Keep learning