Webgraphics

Webgraphics is the set of visual content intended for display in web browsers. It includes raster images (bitmap graphics), vector graphics, animations, and interactive graphics created with HTML, CSS, and scripting. Webgraphics are delivered as files or generated in the browser using APIs such as the Canvas API, WebGL, or CSS drawing, and they are typically embedded in web documents through img, picture, or canvas elements and CSS backgrounds.

Raster formats such as JPEG, PNG, GIF, WebP, and AVIF encode bitmap images with varying compression and color characteristics. JPEG is common for photographs due to its lossy compression; PNG supports lossless compression and transparency; GIF supports simple animations with a limited color palette. Modern formats like WebP and AVIF provide improved compression and quality. Vector formats such as SVG encode shapes with mathematical descriptions and are scalable without loss. SVGs can be embedded inline or as images and are widely used for icons and illustrations. Animated vector formats and CSS or SMIL-based animations complement interactive graphics.

Performance and accessibility: Webgraphics should balance quality and file size. Techniques include responsive images with srcset and sizes, the picture element, lazy loading, and compression. Metadata removal and appropriate color profiles improve load times and privacy. Accessibility considerations require alt text for images and non-text equivalents for graphics used as information.

Rendering and standards: Browsers render webgraphics using engines and APIs. Graphics APIs include the Canvas API, SVG DOM, WebGL, and WebGPU. Standards bodies such as W3C and WHATWG govern image and graphics specifications, formats, and APIs, while developers choose formats and techniques to suit content, audience, and devices.