2025年7月12日土曜日

HTML のimgタグのsrc属性で指定できるファイル拡張子は何ですか?

 <img>タグのsrc属性で指定できるファイル拡張子は、ブラウザが画像として認識・表示できるものです。主要なものから比較的新しいものまで、以下の種類があります。

一般的な画像ファイル形式 🖼️

  • JPEG/JPG (.jpg, .jpeg): 写真や複雑なグラデーションに適しています。非可逆圧縮でファイルサイズが小さいのが特徴です。

  • PNG (.png): 透明度(アルファチャンネル)をサポートし、ロゴやイラスト、アイコンに適しています。可逆圧縮です。

  • GIF (.gif): 簡易的なアニメーションや、色数が少ないイラストに適しています。可逆圧縮で256色までしかサポートしません。


比較的新しい・モダンな画像ファイル形式 🚀

  • WebP (.webp): Googleが開発した画像形式で、JPEGやPNGよりも高い圧縮率で同等以上の画質を提供します。アニメーションもサポートします。

  • AVIF (.avif): 高効率な次世代画像形式で、WebPよりもさらに高い圧縮率と優れた画質を提供します。Netflixなどで採用されています。

  • SVG (.svg): スケーラブル・ベクター・グラフィックス。ベクター形式のため、拡大・縮小しても画質が劣化しません。ロゴ、アイコン、図形などに最適です。テキストエディタで編集できるXMLベースの形式です。


その他の画像ファイル形式 ⚠️

  • BMP (.bmp): Windowsでよく使われる非圧縮の画像形式ですが、ファイルサイズが非常に大きくなるため、ウェブ上ではほとんど使われません。

  • ICO (.ico): ファビコン(ブラウザのタブやアドレスバーに表示される小さなアイコン)によく使われる形式です。


重要な注意点 💡

重要なのは、src属性で指定するファイルが画像ファイルとして有効であること、そしてブラウザがその形式をサポートしていることです。サーバー側でHTMLやPHPなどのスクリプトが画像データを動的に生成して返す場合でも、最終的にブラウザが受け取るデータは上記のいずれかの画像形式でなければ、<img>タグでは表示されません。

また、<img>タグのsrc属性は、画像ファイルへのパスを指定するものであり、HTMLファイルやPHPファイルそのものを直接指定して画像として表示することはできません(PHPが画像データを生成し、適切なHTTPヘッダを返していれば別ですが、これはより高度なサーバーサイドの知識が必要です)。

0 件のコメント:

コメントを投稿