ブラウザの画像フォーマットサポート検出
JavaScriptとHTMLを使用してブラウザがサポートする画像フォーマットを検出。Canvasベースの検出、機能クエリ、グレースフルフォールバック戦略。
Web Development
詳細な説明
ブラウザの画像フォーマットサポート検出
すべてのブラウザがすべての画像フォーマットをサポートしているわけではありません。
Canvasベースの検出（JavaScript）
最も信頼性の高い方法はCanvas APIのtoDataURL()メソッドを使用します：
function supportsFormat(mimeType) {
const canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
const dataUrl = canvas.toDataURL(mimeType);
return dataUrl.startsWith(`data:${mimeType}`);
}
このテクニックは、画像フォーマットコンバーターがツール上部のサポートバッジを表示するために使用しているものと同じです。
ベストプラクティス
常にフォールバックを提供します。フォーマットネゴシエーションのピラミッド：
- AVIF（最高の圧縮）
- WebP（幅広いサポート、良好な圧縮）
- JPEG/PNG（ユニバーサルフォールバック）
ユースケース
動的画像配信、CDN設定、プログレッシブエンハンスメント戦略のためにフォーマット検出を実装するWeb開発者向け。