Web Images

Written by Cody Lindley

The Front-End Developer Roadmap from Frontend Masters - Advance your skills with in-depth, modern front-end engineering courses.

Overview:

Learning resources.

Definitions:

Web Images
Image file types are generally supported by web browsers (AVIF, WebP, gif, jpeg, png, svg).
Image File Formats
Standardized means of organizing and storing image data. An image file format may store data in an uncompressed format, a compressed format (which may be lossless or lossy), or a vector format. Image files are composed of digital data in one of these formats so that the data can be rasterized for use on a computer display or printer. Rasterization converts the image data into a grid of pixels. Each pixel has a number of bits to designate its color (and in some formats, its transparency). Rasterizing an image file for a specific device takes into account the number of bits per pixel (the color depth) that the device is designed to handle.
Data URLs
URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as "data URIs" until that name was retired by the WHATWG.

Contribute content, suggestions, and fixes on github:

https://github.com/FrontendMasters/learning-roadmap

Learning Data URLs (Formerly known as: Data URI's)