近年、スマートフォンのカメラ性能は飛躍的に向上し、まるでプロが撮影したかのような写真を手軽に撮れるようになりました。
そのため、社内の様子を伝えるブログ記事、新商品の紹介、あるいは現場の施工実績などで、スマートフォンで撮影した写真をそのまま使用する機会も多いのではないでしょうか。

しかし、その撮影した写真をホームページに掲載しようとした際、
「管理画面からアップロードできない」
「パソコンで確認しようとしたら画像が表示されない」
といった事象に遭遇したことはありませんか？

「スマートフォンでは綺麗に見えているのに、なぜホームページでは使えないのか？」
その原因は、データの末尾に隠された「拡張子（かくちょうし）」にあります。

本記事では拡張子の基本から、どうすれば正しくアップロードや表示が出来るようになるのか、そしてホームページにおすすめの画像形式までを詳しく解説します。

【基本】そもそも拡張子とは？

そもそも拡張子とは、ファイルの種類（フォーマット）を識別するために、ファイル名の末尾につけられた「.（ドット）＋アルファベット」の文字列のことです。

例として、ビジネスの現場で毎日使われているMicrosoftのOfficeソフトを見てみると、以下のような拡張子が付いています。

• Word（ワード）で作成したファイル→ 「.docx」
• Excel（エクセル）で作成したファイル→「.xlsx」
• PowerPoint（パワーポイント）で作成したファイル 「.pptx」

パソコンやスマートフォンなどは、この拡張子によってファイルの種類を判断し、「.xlsxということはExcelのデータだからExcelのソフトで開こう」といった処理を自動で行っています。

逆にファイルを保存する時は、「これはExcelで作ったデータだから、.xlsxの形式で保存しておこう」とシステムが処理してくれています。この保存のタイミングでPDF形式などを選択すると、拡張子が「.pdf」となり、Excelのソフトを開かなくても誰でも中身を確認できるようになる仕組みです。

システムやアプリには、それぞれ「対応している拡張子」が決まっています。そのため、全てのソフトであらゆる拡張子を確認できるわけではない、という点をまずは押さえておきましょう。

なぜアップロードや表示が出来ないのか

画像は「.png」や「.jpg」、音楽は「.mp3」、動画は「.mp4」など、それぞれによく使われる保存形式（メジャーな拡張子）があります。これらは多くのシステムが標準で対応しています。

では、なぜ最近のスマートフォンで撮影したデータがアップロードできなかったり、表示できないのか。
その理由はとても単純で「拡張子が異なるから」です。

原因その①：スマホで撮った写真や動画は独自の拡張子を使っていることがある

日本ではスマートフォンの中でも特にiPhoneをお持ちの方が多いですよね。
実はiPhoneで撮った写真や動画などは、上にあげた拡張子ではなく、Appleが生み出した独自の拡張子で画像や動画が保存されているんです。

Apple社独自の拡張子「HEIC」と「MOV」

iPhoneやiPadなどで撮った写真は写真は「.HEIC」、動画は「.MOV」という拡張子で保存されます。

詳細はあとでご紹介しますが、メジャーな画像形式の一つである「jpg」といった画像の保存形式と比べ、同じ画質でもデータ容量を約半分に抑えられる保存形式です。

同じApple製品などで閲覧する場合などは問題ないのですが、WindowsパソコンやAndroidスマートフォンなど、Apple製品以外ではこの拡張子に対応していないことも多く、閲覧できないことも多々あります。

このような独自の形式は、スマホなどの限られた保存容量を節約するためには最適ですが、「世界中のあらゆる環境で閲覧されるホームページ」にとっては不向きなのです。

原因その②：画質が良すぎて重たすぎる

拡張子の問題と並んで、もう1つ考えられる原因が、最近のスマートフォンの写真や動画は「画質が綺麗すぎてデータが重すぎる」という点です。

最新のスマートフォンは、数千万画素というプロのカメラ並みの解像度で撮影が可能ですが、1枚の写真だけで数メガバイト（MB）という巨大な容量になっています。
ですが、システムによってはアップロードできる容量に制限が掛けられている場合もあります。

また、ホームページにおいて、データが重いということは「表示が遅くなる」ことを意味します。
どんなに美しい写真であっても、ページを開くのに5秒も10秒もかかってしまっては、閲覧を諦めてしまう人も多いでしょう。

そのため、スマートフォンで撮影した素材をホームページに掲載する前には、適切な画像サイズへの調整が必要になります。

拡張子を変えるにはどうしたらいい？

ホームページの表示速度を落とさず、かつ全てのユーザーがスムーズに閲覧できるようにするためには、拡張子の変更（変換）が必要です。

注意点として、拡張子の変更はファイルの「名前の変更」でただ末尾の文字（アルファベット）を書き換えただけでは変わりません。
むしろファイル構造と拡張子の不整合が起き、ファイル自体が破損して元に戻せなくなるリスクがあります。

拡張子を正しく変換するためには、画像の編集ソフトを通して「別名で保存・書き出し」を行うか、専用のファイル変換ソフトや信頼できる変換サイトを利用して処理する必要があります。
（※インターネット上にはセキュリティ面に懸念のある無料の変換サイトやソフトも存在するため、利用の際は信頼できるものかどうかを十分に確認しましょう） 

ホームページに最適！おすすめの画像拡張子

どのような媒体でも見れるように、というのであれば基本的には画像はpng、jpgで良いのですが、それだと画質の劣化が気になったり、かといって画質を上げると容量が大きくなってしまったり……。

実は画質の劣化を抑えつつも、容量も軽くできて、ホームページで使える拡張子というものもあるんです。
その他にもそれぞれの状況に応じておすすめの拡張子や、拡張子の持つ特徴・メリット・デメリットなども合わせてご紹介していきます。

JPEG（.jpg / .jpeg）

WEB黎明期から現在に至るまで、スタンダードで使われ続ける形式です。
その長い歴史から、古いパソコンから最新のスマートフォン、様々なブラウザ、アプリで表示が可能です。

jpg、jpegなど複数の表記で見かけることもありますが、中身は全て同じです。

メリット

JPEGは数百万色のフルカラーを表現できるため、自然な景色や人物の肌のグラデーションなどを再現する能力に長けています。
さらに人間の目では認識しにくい部分の色データを上手く間引いて圧縮してくれるため、見た目の美しさを保ったまま、ファイルサイズを抑えることが出来るため、よく使われています。

大きなこだわりがなければ、基本的にはJPEGで問題ありません。

デメリット

JPEGの圧縮方法は、データを間引いて圧縮する「非可逆圧縮」という方法で、この方法は一度圧縮してしまうと元に戻せません。
そのためJPEGの画像を保存して、その画像をダウンロードして、また保存し直して…という行動を繰り返していくと、かなりガビガビとした画質になります。

また、JPEGは背景を透明にすることできず、背景が透明な画像を書き出そうとしても必ず白い背景が付いてしまいます。

PNG（.png）

この形式もjpgと並んで、画像としてはメジャーな形式です。
JPEGで出来なかったことが、PNGでは出来るようになっています。

メリット

最大の特徴がJPEGでは出来なかった、画像の背景を透明化がPNGは可能です。
そのため、ホームページの背景に色や模様があっても、綺麗に画像を配置することが出来ます。

またPNGは、圧縮・保存を繰り返しても画質が一切劣化しない「可逆圧縮」を採用しています。
JPEGと違いデータを間引いていないため、JPEGよりもノイズの少ない鮮明で綺麗な画像で表示させることが出来ます。

デメリット

すべての色変化を正確に記録しようとするため、アイコンなどの小さな画像であれば特に問題はありませんが、色数の多い写真などをPNGにすると、ファイル容量がJPEGの数倍から十数倍に跳ね上がります。
画質が良いからと言って、知らずに写真をpngのまま多用すると、ページ読み込みの遅延を招く原因になります。

GIF（.gif）

WEBの歴史において、jpgよりも古くからある画像形式の一つです。
最大の特徴は、複数枚の画像を重ねて「パラパラ漫画」のような動きを表現できる点にあります。

メリット

gif最大のメリットは、簡単なアニメーションを作成できることです。
特殊な動画プレイヤーを使わなくても、ページを開いた瞬間に自動で動くアニメーション（バナー広告や、ボタンの動きなど）を表示させることが出来ます。

デメリット

jpgやpngなどが数百万色を表現できるのに対し、gifは最大で「256色」しか表現できません。
そのため、綺麗なグラデーションなどは不得意で、画質が極端に劣化してザラザラした見た目になってしまいます。

また、アニメーションの時間が長いと、データ容量がも非常に重くなってしまうという弱点があります。
凝った動きや画質を重視するのであれば、動画（MP4など）として書き出すことをおすすめします。

SVG（.svg）

これまでの画像（ピクセルの集まり）とは全く異なり、画像の形を「数式（ベクトルデータ）」として記録する特殊なグラフィック形式です。

メリット

数式で描画されているため、スマートフォンの小さな画面から、巨大な4Kディスプレイまで、どれだけ拡大しても輪郭が1ミリもボヤけず、常に剃刀のようにシャープに表示されます。

そのため、ロゴやシンボルマークなどによく使われたりします。

点と線のアドレス情報（テキストデータ）だけで構成されているため、単純な図形であればファイルサイズが数キロバイト（KB）程度と、他の画像形式に比べて圧倒的に軽いのも特徴です。

デメリット

ロゴやアイコン、シンプルなイラストにはおすすめなのですが、複雑な色変化や細かなディテールを持つ写真などをSVGにしようとすると、数式が複雑になりすぎて逆にデータ容量が爆発的に重くなってしまいます。

例えば、Instagramのアイコンなどは形は単純ですが、色がグラデーションになっていますね。
これをSVGで書き出すと、実はPNGで書き出したときよりも容量が大きくなってしまいます。

そのため、色の多いものや複雑な図形などは、容量が重くなってしまうという点に注意です。

WebP（.webp）

JPEGの「写真の表現力」と、PNGの「背景透過・画質保持」という、2つの強みを1つに融合させた、Googleが開発した新しい画像形式です。

インターネットの歴史が長くなり、ウェブサイトにたくさんの画像が使われるようになったため、「とにかく画質をキレイなまま、データ容量を圧倒的に軽くして、ホームページの表示速度を速くする」ことを目的に開発されました。

メリット

JPEGやPNGなど同等の画質でありながら、ファイルサイズを小さくすることが出来ます。
ホームページ全体の画像をWebPに差し替えるだけで、サイトの表示速度が劇的に向上し、GoogleからのSEO評価（検索順位）の向上にも直結します。

またPNGの特徴でもあった背景の透明化がWebPも可能です。

デメリット

Chromeやsafariなど主要なインターネットブラウザには対応していますが、2010年に生まれた比較的新しい形式のため、対応していないシステムやソフトなどもあります。

また、最初からWebPで書き出すことが出来るデザインソフトや編集ソフトは珍しいため、基本的にはJPEGやPNGなどで書き出した画像を変換する手間が発生します。

AVIF（.avif）

WebPよりもさらに新しい、次世代の画像形式です。
現代のインターネット環境に最も最適化されたフォーマットとして注目されています。

メリット

最大の特徴は、WebPと同じように画質を保ったままファイルサイズを削減できることです。
ですがAVIFはWebPよりもさらに、20%〜30%近くファイルサイズを小さくすることが出来ます。

また、HDR（表現できる明るさの幅を大幅に広げる技術）にも対応しており、従来の画像よりも広い色域に対応できることから、写真の質感をリアルに表示させることが出来ます。

デメリット

WebP同様、最初からAVIFで書き出すことが出来るデザインソフトや編集ソフトは珍しいため、基本的にはJPEGやPNGなどで書き出した画像を変換する手間が発生します。

ですが高確率で圧縮する計算が非常に複雑なため、画像をAVIF形式に変換して保存する際処理に他の画像形式と比べて、時間がかかります。

結局どれが一番おすすめ？

これだけたくさんの種類があると、「結局どれを使うのがベストなのか？」と迷ってしまうかもしれません。

現在のホームページにて最もおすすめなのは「WebP」「AVIF」です。
ホームページに掲載する写真は軽いに越したことはありません。
具体的には、1枚で500キロバイト（KB）を超えるような画像は、ホームページに掲載するにはかなり重たい画像になります。
JPEGやPNGと同じ見た目で容量を小さくできるのであれば、変換する手間はあるのですが、それ以上にメリットがあるためWebPやAVIFを使用するのがおすすめです。

ですが全てをWebPにするのではなく、アイコンやロゴなどはSVG・PNGなどを使用したりと、
画像の種類や使用用途に応じて、柔軟に色々な形式の画像を使用していくことが大事です。

まとめ：適した拡張子の選択が、サイトの「表示速度」と「成果」を変える

スマートフォンの進化によって、誰でも手軽に高画質な写真が撮れるようになったからこそ、WEB運用の現場では「どの形式で、どう掲載するか」という知識の差が、サイトの成果を大きく左右するようになっています。

 iPhoneに適した拡張子があったように、ホームページにはホームページに適した拡張子が存在します。
適切な形式へと変換し、適切に軽量化してあげること。
この小さな一手間が、ホームページ全体の表示速度を劇的に向上させます。

重要なのは、どれか一つの拡張子が絶対的に優れているわけではない、ということです。
昔ながらのJPEGやPNGにも独自の強みがあり、最新のWebPやSVG、次世代のAVIFにもそれぞれの役割があります。

まずは、今運営している自社サイトの画像がどのような形式になっているか、一度身近なところから見直してみてはいかがでしょうか。
画像形式をスマートに使いこなし、より価値のあるWEB運用を目指していきましょう。！