<<

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 or transparency • Uses • Supports transparency • Produces larger file than = = PNG-8 • Best for photography & that also supports • Best for or large hero images transparency logos with limited color • For animation, WebM or • Uses lossy compression • 25-34% smaller than JPEG palette 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 used to describe geometric • Useful for creating , and positions in image transparency gradients by contrast, preserves • Produces vector 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 to color. Raster graphics only appear high advantage-positioning.com form geometric shapes. An image can be quality at the resolution they were meant to resized to any , large or small without be displayed at. If the image is scaled to a 863.648.5762 damaging the quality of the image. larger size, pixilation will occur.