WEB担当者必見！ おざなりになりがちな画像ファイル形式！ | GUARDIAN Creative BLOG | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

2022年6月現在、日本におけるiPhoneユーザーは6割を超えているというデータがあります。

(iPhoneシェア率が多い？日本と世界のスマホ市場を調査【2022年6月】)

日本人に愛されているiPhoneですが、iPhoneで撮影した画像をそのままWEBサイトにアップロードできない場合があります。
iPhoneユーザーの中には、もしかしたらブログに画像を載せようとして、反映されなかったということがあるのではないでしょうか。

iPhoneで撮影した写真の画像形式は、基本的に、HEIC、または、.jpegです。

HEICとは、iOS11より利用できるようになった、高画質のままファイルサイズを小さくできる新しい形式です。

結論、JPEGであれば問題なくWEBサイトへ載せることができますが、写真がHEIC形式のままだと、画像をサイトへアップロードしてもブラウザで表示できないので、形式を変換する必要があります。

変換すべきファイル形式や方法は下記事項で詳細をご紹介します。

ファイル形式は、冒頭でも触れたように形式が多数ありますが、本記事では、Googleがサポートしている画像ファイル形式をご紹介します。
これら以外のファイル形式の場合、画像はブラウザ上で反映されません。

BMP
・圧縮されていないファイル
・データ容量が大きく重い
・データが圧縮されていない分、データの劣化なく保存できる
⇒ファイルが重いため、WEBサイトへの使用には向いていない

GIF
・データ容量が小さい
・背景を透明にできる
・短いアニメーションを作れる
・表現できる色が少なく、風景写真など、多くの色が使われている画像は再現には向かない
⇒ロゴやシンプルなイラストに向いている

JPG/JPEG
・ファイルサイズの大きなが画像を小さくできる
・小さなファイルサイズでも綺麗な画像を表現できる

・画像を圧縮したあと元に戻せない
⇒写真が多くの色を多用するイラストなどに活用できる
⇒WEBサイトへの活用に特におすすめ

PNG
・画像の加工を繰り返しても、劣化しにくい
・画像を透過できる
・サイズを圧縮した画像を元に戻せる
・画像サイズが大きくなりがち
⇒写真：イラストを編集したいときに活用可能
⇒写真の劣化を防ぎたいとき向け

SVG
・画像の拡大・縮小に対応できる。
・写真や複雑なイラストの表現には向かない
⇒ロゴ・アイコン・ファビコン向け

WEBP
・写真や色彩の複雑なイラストも表現できる
・アニメーションも表現できる
・画像の透過も可能
・圧縮画像も劣化なしで元に戻せる
・ファイル形式変換にソフトが必要な可能性がある
⇒GIF・JPG/JPEG・PNGの良いとこどりをしたファイル形式
⇒新世代のファイル形式なので不便な部分もあるが、ブラウザ上での画像活用において、これから主流になる可能性あり

iLoveIMG
・画像ファイル形式の変換だけでなく、画像圧縮、切り抜き、透過など、画像を自由に加工可能

オンラインファイルコンバーター
・Googleがサポートしているファイル形式全てに変換可能

サルワカ道具箱
・新世代のファイル形式であるWEBPへ画像を変換可能

まとめると、画像を変換するときはその用途に合わせて変換すべきだと言えるでしょう。

ロゴ・アイコン⇒GIF・SVG
画像・多彩なイラスト⇒JPG/JPEG
画像の編集⇒PNG
WEBサイトへ表示⇒JPG/JPEG・WEBP

画像の変換は確かに、面倒に感じることが多いです。
ですが、サイトの表示速度を上げたり、画像で伝えたいメッセージを維持するためにも妥協せず、画像一枚一枚のクオリティを担保していきましょう。