{
    "title": "Image Format Decision Matrix for Websites",
    "updated": "2026-08-06",
    "methodology": "The matrix maps common web-image use cases to format characteristics documented by web performance guidance. It is a starting decision tree, followed by real visual and browser testing.",
    "limitations": "Compression efficiency depends on encoder, image content, quality settings, dimensions, browser support, and design requirements.",
    "columns": [
        "Use case",
        "Preferred starting format",
        "Alternative",
        "Why",
        "Verify before publishing"
    ],
    "rows": [
        [
            "Photograph",
            "AVIF or WebP",
            "JPEG",
            "Modern codecs often reduce photo bytes",
            "Visual artifacts and browser support"
        ],
        [
            "Screenshot with text",
            "WebP or PNG",
            "AVIF",
            "Sharp edges and limited colors need care",
            "Text remains readable at target width"
        ],
        [
            "Logo or icon",
            "SVG",
            "PNG",
            "Vectors scale without raster blur",
            "SVG is sanitized and accessible"
        ],
        [
            "Transparent product image",
            "WebP or AVIF",
            "PNG",
            "Modern formats can preserve alpha with fewer bytes",
            "Edge halos on light and dark backgrounds"
        ],
        [
            "Animated graphic",
            "Animated WebP",
            "GIF or video",
            "GIF is often inefficient",
            "Playback support and reduced-motion behavior"
        ],
        [
            "Hero image",
            "AVIF with WebP fallback",
            "JPEG",
            "Large above-the-fold images affect loading",
            "Intrinsic dimensions, preload, and crop"
        ],
        [
            "Tiny UI asset",
            "SVG or optimized PNG",
            "WebP",
            "Request overhead may matter more than savings",
            "Bundle and cache strategy"
        ],
        [
            "Print download",
            "High-quality PDF/JPEG",
            "PNG/TIFF",
            "Print requirements differ from web delivery",
            "Resolution, color profile, and file purpose"
        ]
    ]
}