HTML HEICで最初に確認すること
画像を表示するには、参照先の取得、適切なレスポンス、実行環境でのデコードが関係します。拡張子が.heicであることや、URLにアクセスできることだけで、画面に表示できるとは限りません。
HTML Standardのimg要素の説明を基に、ネットワークの問題と画像の処理を分けて確認します。ファイル自体の意味はHEICの基本で確認できます。
URLから表示までの確認順
- imgのsrcが、意図した画像のURLを指すかを確認します。
- そのURLがHTMLのエラーページではなく、画像データを返すか確認します。
- HTTPステータス、Content-Type、取得したデータの内容を確認します。
- 対象のブラウザーとファイルの組み合わせでデコードできるかを確認します。
- 表示エラー時に、代替説明や別形式の画像へ誘導できるか確認します。
HTTPの宣言はHEICのMIME typeとContent Typeで整理できます。MIMEだけを付け替えることは、画像の変換ではありません。
標準の画像表示と、JavaScriptの解析
HTML HEICを扱う方法には、ブラウザーの画像機能へ委ねる場合と、JavaScriptなどでデコード処理を用意する場合があります。後者が動いても、前者の標準対応を証明したことにはなりません。
JavaScriptで読み込む方法はHEIC JavaScriptの確認点、Chrome上での利用の切り分けはChromeで写真を確認する方法をご覧ください。公開前には、実際に使ってもらうブラウザーとバージョンで表示を確かめましょう。
pictureは変換器ではありません
HTML Standardの画像選択の説明では、候補画像を選ぶ仕組みが示されています。pictureやsourceに別の媒体型を書いても、元画像がその形式へ変換されるわけではありません。代替のJPG、PNG、WebPなどは、別の実ファイルとして用意する必要があります。
手動で代替画像を作る場合は、JPGへ変換またはPNGへ変換して用意できます。リンク先はブラウザーで操作するツールで、サイトに組み込むSDKやAPIではありません。
代替画像にも説明とサイズを用意する
画像が表示されない場合でも内容が伝わる代替テキストを考え、レイアウト上の表示サイズと実画像の寸法を確認します。画像の向き、色、透過が必要な箇所も、変換後に見比べてください。
HTML HEICの表示を確認するときは、画像を取得できない場合、読み込めない場合、画像を表示しない場合も試してください。正常に表示できる写真だけでなく、失敗時にも内容が伝わるかを確かめましょう。
よくある質問
imgやpicture、Content-Type、代替画像について。
HTML HEICの画像はimgに指定すれば必ず出ますか？
HTMLで画像を参照することと、ブラウザーがそのデータをデコードできることは別です。対象環境と実際のファイルで確認してください。
Content-Typeを設定すれば表示できますか？
媒体型はデータの種類を伝えるための情報です。正しく設定しても、デコード機能や画像変換の代わりにはなりません。
pictureがJPGの代替画像を作ってくれますか？
候補となる画像資源はあらかじめ用意します。picture要素がHEICのデータをJPGへ変換するわけではありません。
JavaScriptで画像を表示する方法はありますか？
JavaScriptで対応するデコーダーを使い、画像を読み込む方法があります。ブラウザー標準の表示とは別なので、必要な機能と対象環境を確認してください。詳しくは上のJavaScriptガイドをご覧ください。
JPG、PNG、WebPはどう選べばよいですか？
表示対象、透明部分の必要性、出力品質、用意できる画像資源を基準に選びます。すべての用途に同じ形式が最適とは限りません。