SMUSH PRO Guide to

JPEG WebP PNG-8 GIF • Supported on all browsers • NOT supported on Safari • Limited to 256 colors • Supports animation and • No support for animation • Limited animation support • No support for animation transparency or transparency • Uses Lossy compression • Supports transparency • Produces larger file than = = PNG-8 • Best for photography & that also supports • Best for screenshots or large hero images transparency logos with limited color • For animation, WebM or • Uses lossy compression • 25-34% smaller than JPEG MP4 produce smaller file

WebP Lossless PNG-24 LOSSY VS. LOSSLESS • NOT supported on Safari • Supports transparency • Limited animation support • Produces images with COMPRESSION • Best for reserving full millions of colors without With lossy compression, image detail = loss of detail some of your data will be • 26% smaller than • 3x larger image file than lost forever. Lossy image comparable PNGs compressed JPEG compression permanently removes image data and degrades the image in the WebP produces smaller PNG-32 process. file size than JPEG & SVG PNG equivalent • Supported on all browsers This is not as bad as it • Uses an extra 8-bit alpha sounds, as some detail • Supported on all browsers channel for advanced might not be perceivable transparency capabilities to the human eye. • XML-based markup language

used to describe geometric • Useful for creating Lossless compression, shapes and positions in image transparency gradients by contrast, preserves • Produces that data so nothing is lost. can be animated with CSS = FUNCTIONAL Lossless algorithms keep • Not allowed by default SIMILARITIES all the necessary data in WordPress due to to recreate the image security risks exactly.

VECTOR RASTER Vector images are mathematically consist of a pixels arranged generated from a series of points which on a grid, with each pixel representing a are connected by lines and curves to color. Raster graphics only appear high form geometric shapes. An image can be quality at the resolution they were meant to resized to any shape, large or small without be displayed at. If the image is scaled to a damaging the quality of the image. larger size, pixilation will occur.