AI検索対応に飛びつくな！——紺野俊介×辻正浩が語る“企業が今やるべき判断”【1週間まとめ】

こんにちは。今週の担当は四谷です。今日は、「新年度シリーズ」ということで、超小ネタではありますが、「ファイル名の拡張子」について。新年度になると、新しい人が部署に来て、Webにまつわるいろんな基本的なことをまず覚えてもらいます。

Webの業務では「ドメイン名」や「パンくずリスト」などの普段聞きなれない用語が飛び交いますが、その中でも特に身近なのに、よくわかっていない「画像ファイル」。

「なぜ、日本語名だとエラー出るの？」「拡張子はどう使い分けるの？」という小ネタを解説します。ちなみに、この記事は、Webでコンテンツを更新したり、書いたりする人向けにまとめています。

●なぜ、画像名が日本語だとエラーが出るの？

SNSにアップするときは意識しませんが、Webサイトの更新では「日本語名」は厳禁です。結論からいうと、「インターネットの共通言語が英語（半角英数）」だからです。

• URLのルール： ブラウザが画像を読み込むとき、画像の名前はURLの一部になります。URLには基本的に「半角英数字」と一部の記号しか使えないという世界共通のルールがあります。
• エンコードの壁： たとえば「猫.jpg」をURLで送ろうとすると、コンピュータは「%E7%8C%AB.jpg」のような複雑な文字列（エンコード）に変換します。この変換過程で、サーバーやブラウザが「えっ、何これ？」とパニックを起こし、画像が消えてしまう（リンク切れ）こともあるのです。
• OSの違い： Windows、Mac、Linuxなど、OSによって日本語の処理方法が微妙に違います。自分のパソコンでは見えても、他人の環境では文字化けして読み込めない、という事故が起こりやすいのです。

だからこそ、Webにアップロードする画像は、必ず「猫.jpg」ではなく「cat.jpg」などと半角英数を使いましょう。また、文字化けを考慮すると、記号もアンダーバー（_）やハイフン（-）など決められたものしか使えないんです。

●そもそも「拡張子」って何？

画像の拡張子を説明する前に、まず「そもそも拡張子って何？」を超簡単に説明しておきます。

拡張子とは一言でいうと「パソコンが、そのファイルをどのアプリで開けばいいかを判断するためのもの」です。ファイルの末尾に「.jpg」「.docx」など3～4文字のアルファベット書かれているものが拡張子です。

• 「.jpg」がついていたら、画像ファイルなので、フォトアプリで開く。
• 「.docx」がついていたら、文書ファイルなので、Wordを開く。

というふうに、判別しています。拡張子を変更すると、「どのアプリで開けばいいかわからない！」と混乱して、中身が壊れていないのに文字化けして開けなくなってしまうのです。

●Webで主に使われる拡張子

さて、本題の画像ファイルの拡張子についてです。ここでは、主にWeb用の拡張子を解説します。

• .jpg（JPEG：ジェーペグ）: 色数が多い写真を圧縮するのが得意。圧縮率は高いけど、保存するたびに画質が少し劣化するのが難点。主に、写真などで使われます。
• .png （PNG：ピング）: 背景の透過が可能。文字や線などがくっきり残る。劣化しない（可逆圧縮）。主に、イラストやロゴ用、図解などで使われます。
• .gif （GIF：ジフ）: 色数が少なく256色まで。パラパラ漫画のようなシンプルなアニメーションが作れます。主に、簡単なアニメーションや色数が少ないバナーなどで使われます。

◎最近注目されている「次世代」拡張子

• .webp（WebP：ウェッピー）： 2010年にGoogleが開発した「いいとこ取り」の形式。JPEGより軽くて、PNGのように透明にもできる、現代のWebのスタンダードです。
• .svg（SVG：エスブイジー）： これは写真ではなく「数式」で描かれた画像です。どれだけ拡大しても画像が荒れない（ボケない）ので、スマホでもPCでも綺麗に見せたいロゴに最適です。

WebPは、Googleが開発した拡張子。以前は、Chromeでしか見られない時期もありましたが、2020年にAppleのブラウザSafariでも表示されるようになり、2022年にAdobe Photoshopでもプラグインなしで標準対応されたことでかなり普及してきました。

WebPは、JPEGファイルよりもファイルサイズが軽くなるため、Webサイトを高速で表示したい場合は、WebPを活用することが一般的です。Webサイトで表示されている画像の拡張子を知りたかったら、画像を右クリックして、保存してみると拡張子がわかりますよ。

◎更に最近注目されている拡張子

• .avif（エイヴィフ）：現在WebPのさらに上を行く「次世代画像形式の本命」と言われている存在です。

AVIFは2019年に開発されました。一言でいうと、WebPが「JPEGの進化版」なら、AVIFは「さらにその限界を超えた超・高圧縮形式」です。AVIFは、最新のビデオ圧縮技術（AV1）を静止画に応用したものです。

• 圧縮率が「最強」： WebPよりもさらに軽く、JPEGと比較すると最大50%以上もファイルサイズを削減できることがあります。それなのに画質は驚くほど綺麗です。
• 色表現が豊か： 通常の画像（8bit）よりも深い色（10bit / 12bit）を扱えるため、色のグラデーションが非常に滑らかです。

●WebP / AVIFは利点はあるけど、扱いづらさには課題が残る

WebPやAVIFは「きれいな画像で爆速表示できる」というメリットはありますが、デメリットもあります。

• 他アプリで使いづらい： WebPは最近かなり普及してきましたが、AVIFはまだまだ「Webサイトで見るための専用形式」という印象が強いです。AVIFでは特に、Webサイトから保存した画像をWordに貼ったりSNSに上げたりしようとすると、「対応していない」と弾かれることがあります。WebPはだいぶ減ったように感じますが…どうなんでしょう。
• 再利用しづらい： Photoshopなどのプロ用ソフトは対応していますが、古い無料ソフトやスマホアプリ、さらには最新のWord・ExcelなどのOfficeソフトでも（特にAVIFは）読み込めないことが多く、結局JPEGに変換し直す手間が発生しがちです。
• 重たい問題： これらの形式は画像を画面に表示する際の計算負荷が高く、スペックの低いPCで大量に開くと動作が重くなる原因にもなります。Webサイトでの閲覧には最適ですが、資料作成や他者への共有といった二次利用においては、まだ扱いづらい「Web専用」の形式です。

ちなみに、Webから画像をダウンロードする時、ブラウザの拡張機能（「Save image as Type」）を使うと右クリックで直接「JPEGとして保存」を選択できるので便利です。

まとめ：【新人さん向け】これだけは覚えて！

• 画像名は必ず「半角英数字」にする（日本語はNG！）。
• 写真はJPEG、図版や透過させたいものはPNG。
• サイトを軽くしたいならWebPかAVIFを選ぶ。
• 「保存した画像がソフトで開けない！」と思ったら、拡張子がWebPかAVIFじゃないか確認して、JPEGに変換する。

ちなみに、編集部でも新人に教えますが、結論「この4行だけ覚えて」でいつも解説が終わります。さぁ今週も頑張りましょう！

Web担の編集後記も毎月末に更新してますので、よろしければご覧ください：
https://webtan.impress.co.jp/editors_note