今回は、画像データを行う際に知っておきたい、様々なファイル形式（拡張子）や、その具体的な活用例と画像圧縮技術、そして、画像の扱い方に関する知識を持っておくことの重要性について、紹介していきます。
用途に応じて、画像のファイル形式を変える必要がありますし、画像ファイルに関する知識を持っておくことは、画像をより綺麗に扱うことはもちろん、WEBサイトの機能性UP（サイトの表示速度の向上など）にもつながります。
※ ちなみに拡張子はファイル名.「docx」ファイル名「.xlsx」ファイル名「.ppt」など、ファイル名の後ろについている文字のことです。
１.JPEG / GIF / PNG / TIFF / BMP それぞれの拡張子の特徴について
(1)JPEG
JPEGは（ Joint Photographic Experts Group ）の略称で、主に写真などの画像に適したファイル形式です。表現できる色数はフルカラー1670万色となっています。
- JPEGとJPGの違いは？
「JPEG」と「JPG」、2つありますが、こちらは過去の時代の制約（前まで拡張子は3文字までというルールがあった）による名残りからのものといわれています。
ちなみに現在は「.jpeg」と「.jpg」のどちらも利用可能で、どちらの方がいいのか迷った際は「.jpg」を利用したほうがよいとされていますが、大文字（.JPG）と小文字（.jpg）には注意しましょう。UNIX上では大文字と小文字が区別されるようです。
JPG（JPEG）に関して、より詳しい内容を知りたい場合は、以下の記事も参照してみてください。 JPGとJPEGの違いとは？ / UX MILK
(2)GIF（ gif ）
GIF（Graphics Interchange Format ）は、主にドット絵のGIFアニメーション（動く画像）などに適したファイル形式です。上で紹介したJPEGと違い、画像が動くことや、画像を透明にできることなどが特徴ですが、色数は256色に制限されています（ 逆に言うと色数が少ない分、WEPページを表示する際の負担は小さくなります ）。
- GIFのビジネスでの活用例について
GIFというフォーマットは、Twitterなど、SNS上での企業の投稿にも活用されています。
こちらは沖縄の琉球新報の投稿で、ソーシャルディスタンスを取ることを、GIFを使って表現したものになります。一枚の画像では表現できない、動きのあるGIFを使った、ならではの表現になっていてます。
琉球新報HPの題字もソーシャルディスタンスということで空けています。こちらは動きます。#題字 pic.twitter.com/ZiSsHEXlFy
— 琉球新報(@ryukyushimpo) April 15, 2020
2つ目は、飲食店の「なか卯」が提供している様々なメニューを、GIFを使ってテンポよく表示したものです。
複数枚の画像を一度に表示する方法は他にもありますが、移動中にスマホなどを使って閲覧する際は特に、タイムラインの情報は、まずはサッと流し見で確認することが多いので、このようにGIFアニメを使うと目にとまりやすくなり、より多くの情報を見てもらえる可能性が高くなります。
なか卯の人気メニューをテイクアウト！
— epark_jp (@epark_jp) April 16, 2020
今なら最大 #300円引き ✨
詳しくはこちら➡️https://t.co/n3lAQFSIgE
ポイントを利用すれば、200円以内で
テイクアウトできちゃうメニューを集めました！ pic.twitter.com/3Vgg3TgCBu
(3)PNG
PNG（ Portable Network Graphics ）は、主にロゴやイラスト画像などに適したファイル形式です。
画像を透明にできることや、データを完全に復元できること（ png形式で保存する前の画像の状態に戻せること＝可逆圧縮方式 ）などが大きな特徴で、表現できる色数は最大で1677万色（これは24bitの場合で、8bitの場合は256色）となっています。
ただしJPEGの場合と同じように、24bitのフルカラー（PNG-24）にすると、ファイルサイズが大きくなり、ページに負荷がかかってしまうため、画質に問題のない場合は8bit（PNG-8）の方を利用するほうがいいかもしれません。
可逆圧縮方式・・・保存（圧縮）しても画質が劣化しない方式（GIF、PNG） 非可逆圧縮方式・・・保存（圧縮）する度に画質が劣化する方式（JPEG）
紹介したJPG / GIF / PNG 3つの違いの詳細については、こちらの記事も参照してみてください。ちなみにJPEG・PNG・GIFFの3つは、WEB制作で特に利用する機会が多いものです。 【JPEG・GIF・PNG】画像ファイル形式の基礎・特徴と適切な扱い方まとめ
(4)TIFF（ .tif / .tiff ）
TIFF（ Tagged Image File Format ）は、画像に様々なタグをつけて管理するファイル形式で、1つの画像ファイルに、複数のデータを保存できるようになっており、画像を圧縮せずに、解像度を高く保ったまま保存することもできます。
ただし、解像度が高い分、容量もとても大きくなるため、WEB制作で利用されることは少ないです。
(5)BMP（.bmp）
BMP（ Windows bitmap image ）は、Windowsが標準でサポートしているファイル形式です。こちらも基本的に画像を圧縮しない形式のため、容量は大きくなりますが、画像をより綺麗な状態に保ったまま保存することができます（最大でフルカラーの1677万7216色）。
ただし、BMPは、色数を減らしたり、圧縮した状態でファイルを保存することも可能で、白・黒の2色での保存にも対応しています。
しかしこちらも、TIFFと同様に、WEB制作の現場で利用されることは少ないです。
２.画像の様々な圧縮方法について
画像を扱う際のファイル形式を5つ紹介しましたが、画像の圧縮方法についても簡単に紹介します。
(1)フラクタル圧縮
画像の中の最も似ている所を利用して画像を圧縮する方法。似ている情報を符号化し、代わりのデータとして利用することで、データ量を圧縮できるもので、時間はかかりますが、JPEGよりも高品質な画像になるといわれています。
(2)フーリエ変換
画像に含まれている周波数が、どのような割合で含まれているか数値に変換し、それをもとに画像を再構成する方法。フーリエ変換によって得られた値を、対応する波形に掛けて足し合わし、画像として構成していく。
３.WEB制作において、画像を圧縮することの重要性
画像は綺麗な状態のまま保存するほうが当然いいわけですが、そもそも、なぜ画像を圧縮する必要があるのかというと、画像が重いままだと、ページの内容が全て表示されるまでに、より多く時間がかかってしまうからです。
快適なインターネット環境に慣れてしまっていると、表示が遅いページにはストレスを感じてしまう人も多く、あまりにも表示速度が遅いと、途中で閲覧するのを辞めて離脱してしまいます。どんなに充実した内容のコンテンツを用意していても、それを見てもらえなければ意味がありませんから、解像度と並行して「容量の大きさ（表示スピード）」も大事にする必要があるわけです。
加えて、特に最近は、PCからサイトを閲覧する人よりも、スマホからサイトやページを閲覧する人の方が多くなっていますし、全体の約7割がスマホというサイトもあったりします。
総務省のデータ：
人口減少時代のICTによる持続的成長
スマホは、PCよりも機能性が劣るので、容量の大きい画像をたくさん使用すると、ページが表示されるスピードが、より遅くなってしまいます。加えて、スマホは外出先や移動中に利用することが多いデバイスなので、表示スピードに問題があると、ユーザーが途中で離脱してしまう可能性は、より大きくなります。
４.デザインの重要性は今後ますます大きくなる
画像の容量と表示スピードの関係性に関して説明しましたが、このように、ユーザーの視点に立った配慮をすることや、そういった立場でサービスやコンテンツをデザインしていくことなどは、UXデザイン（User Xperience）と呼ばれており、今後ますます重要視されていくはずです。
「スマホという制限の多いデバイスの中で、どのようなコンテンツをどういった形で提供すればいいのか工夫すること」
「ユーザーはどういったニーズを持ってページを閲覧するのか、ユーザーの気持ちや、潜在的なニーズまで見据え、よりよい解決策を提示すること」
など、サービスやコンテンツを提供する際に考えるべきことはたくさんあり、画像の圧縮方法やファイル形式の選択もそのうちのひとつです。
(1)デザインを改善して効果につながった事例や、実際に改善策を考える際のプロセスの紹介
デザインなどをリニューアルし、実際に数字として効果が現れた事例や、改善策につなげるまでの具体的なプロセスについて説明している記事を、3つ紹介します。
ア. 「リフォームコンタクト」というサービスの事例
リフォームコンタクトは、リフォーム会社とリフォームを検討中の人とをつなぐサービスです。WEB上からの申込みまでいかずに、途中でページを離れてしまう割合（離脱率）に着目し、申込みページにいたる前のページなども含めて、
「申込みページの入力項目を最小限に抑えること」
「入力項目に、必須と任意を必ず明記すること」
「入力する際、半角・全角の指定をなくすこと」
など、様々なポイントを改善した結果、申込率が200%もUPしたそうです。
たった3つの改善で売上が200％UP！ リフォームマッチングサイトの分析・改善手法を大公開
イ. 「ANAビジネスクリエイト」というサービスの事例
2つ目は、航空会社として有名な「ANA」が運営する人材派遣サイトの例です。働くスタッフへのインタビューや、ユーザーが利用するマイページの充実、申込みフォームの見直しなどを行うことにより、離脱率の低減に成功しました。リニューアル前と、リニューアルしてからの3ヶ月間を比較した際、登録スタッフが約6倍に増加した事例となっています。
ウ. 「ニジボックス」の改善例
最後の3つ目は、改善事例ではなく、実際にサービスやサイトを設計・リニューアルする際の、具体的なプロセスについて説明した記事の紹介です。メールフォームのリニューアルという具体例をもとに、かなり分かりやすくポイントを説明している記事です。ちなみにニジボックスは、株式会社リクルートから分社独立した会社です。
５.制作力や開発力に課題を感じている場合はM&Aを行って他社の力を借りるのもひとつ
新規サービスの開発を考えていたり、現在のサイトをリニューアルしたいと考えている場合、方法は大きく「外部の専門会社に依頼する方法」と「自社で企画〜運用まで行う方法」の2つに分けられますが、現状、社内に任せられる人が不足している場合や、腰を据えて新規の自社サービスに取り組んでいきたい場合などは、M&Aによって、他社の力を借りるのもひとつです。新たに採用を始めるよりも、メリットが多い可能性があります。
パラダイムシフトは、IT / WEB業界のM&Aを得意とする会社で、これまでに担当してきた事例の数も100件以上と豊富です。M&Aにいたるまでの背景なども事例と共に紹介していますので、社内の制作力や開発力に課題を感じている方は参考にしてみてください。
