| JPG/JPEG | Format originally developed for photographic images. Uses adjustable lossy compression to reduce file size, which can degrade quality at high compression levels. Best used when smaller file sizes are needed and slight quality loss is acceptable. | Photos (preferred). Use WebP for photos over web. |
| PNG | Supports lossless compression, preserving full image quality. Ideal for images that require transparency, sharp edges, or crisp detail, such as UI elements, icons, and illustrations. Typically larger in size than JPG, making it less ideal for full-resolution photographs. | Use when SVG/JPG/WebP doesn't work: graphics where raster detail is needed (e.g. shadows), screenshots or photos where exact color is needed. |
| SVG | A vector-based format ideal for logos, icons, and scalable graphics. Maintains sharp quality at any size since it’s based on shapes and paths instead of pixels. Not suitable for photographs or detailed raster images. | Graphics (preferred) |
| WebP | A modern image format designed for the web. Offers superior compression compared to JPG and PNG, resulting in smaller file sizes with excellent quality. Supports transparency and animation. Widely supported in modern browsers. | Photos/graphics on websites (preferred) |
| GIF | Primarily used for simple animations and short looping visuals. Limited to 256 colors and uses LZW compression, which is technically lossless but results in reduced visual fidelity due to the color limitation. Not suitable for high-resolution or color-rich images. | Simple animations. For longer or higher-quality animations, consider MP4/WebM. |