広告 Photoshopの知識・テクニック

webpとは何か?JPG・PNGとの違いと画像拡張子の基礎

luminar ai
webpとは何か

どうもこんにちは!!AIに仕事取られてブロガーに転向を考えているプロカメラマンひげおです。20年以上、写真撮影の業界で働いてきました。このシリーズは写真を始めてみたい!写真に興味を持ち始めた!撮影からレタッチまでやってみたい!そんな初心者さん向け、または写真に馴染みはないけどブログ運営で必要!と言う方に、ひげおが働きながら獲得した知識を紹介しています。

今日のテーマは「画像の拡張子は何がいい?」です。

そもそも拡張子とは?

画像フォーマットとも言います。

ファイル名の最後についている「.(ドット)以降の文字」のことです。

例えば…

  • DSC0001.jpg
  • アイキャッチ.png
  • 作業データ.psd

この太字部分が拡張子です。

パソコンやスマホに「このファイルはこういう種類のデータですよ」と教えてあげるための名札のようなもの、と思ってもらえればOKです。名札がないとパソコンはそのファイルをどうやって開けばいいかわからなくなります。

画像に限らず、世の中のすべてのデータに拡張子があります。テキストなら.txt、動画なら.mp4、音楽なら.mp3、PDFなら.pdfといった感じです。

今回はこの中でも画像の拡張子に絞って、それぞれ何が違うのかを解説していきます。

世の中にはどんな拡張子があるのか

先ほど少し触れましたが、パソコンやスマホの中にあるデータは、ほぼ全てこの「拡張子」を持っています。普段意識していなくても、皆さんも絶対にお世話になっているはずです。

例えば、仕事や日常でよく使うファイルだとこんな感じ。

  • 文章データ:.docx(Word)、.txt(メモ帳)
  • 表計算データ:.xlsx(Excel)、.csv
  • 文書データ:.pdf(ピーディーエフ)
  • 動画データ:.mp4、.mov
  • 音声データ:.mp3、.wav

こんなふうに、「これはExcelで開く表計算ですよー!」「これは動画再生アプリで開いてねー!」と、ファイル自身がパソコンやスマホに対して自分の正体を主張してくれているわけです。

そして、ここからがいよいよ本題。我らカメラマンやブロガーが一番よく触れる「画像の拡張子」についてです。画像と一口に言っても、実は用途に合わせていろんな種類が用意されています。

画像の拡張子には何があるか

ここからは代表的な画像の拡張子について、それぞれの特徴とメリット・デメリットを解説します。

JPG(ジェイペグ)

古代より受け継がれる定番の写真フォーマット。スマホやデジカメで写真を撮ると、大体最初はこれになります。困ったときもコレ!

  • メリット:フルカラー(約1677万色)に対応していて写真など色数が多いものに強い。データ容量をギュッと圧縮して軽くできる。世界中どの端末でも絶対に見れる。
  • デメリット:背景の透過(透明化)ができない。「非可逆圧縮」といって、保存を繰り返すたびに少しずつ画質が劣化していく(ガビガビになる)。

PNG(ピング)

Web上の画像やイラスト、図解などで大活躍するフォーマットです。

  • メリット:最大の武器は「背景を透明にできる」こと。ロゴやアイキャッチ画像の作成に必須。「可逆圧縮」なので何度保存し直しても画質が劣化しない。
  • デメリット:写真など色数が多い複雑な画像をPNGで保存すると、データ容量がJPGと比べてとんでもなく重くなる。

WebP(ウェッピー)

Googleが開発した、現在のWebサイトにおける最強のエリートフォーマットです。

  • メリット:JPG(軽さ・写真に強い)とPNG(背景透過・劣化しない)のいいとこ取り。画質を保ったまま、JPGやPNGよりもさらにデータ容量を劇的に軽くできる。
  • デメリット:比較的新しい形式なので、古すぎるOSやブラウザだと表示されないことがある(今はほぼ解決済み)。PCに保存した時に、標準の画像ビューワーでパッと開けないことがある。

PSD(ピーエスディ)

Photoshop専用の作業データです。PhotoShopDataでpsd。

  • メリット:レイヤー(画像の層)や文字情報、色調補正の履歴を全てそのまま残せる。後日「やっぱりあの文字直そう」と思ったら何度でも再編集が可能。
  • デメリット:データがとにかく重い。Photoshop(または互換ソフト)を持っていないと開けない。そのままではブログやSNSには貼れない。

TIFF(ティフ)

印刷・写真業界の標準フォーマットです。

  • メリット:超高画質。圧縮による劣化がなく、印刷所にポスターなどのデータを入稿する際によく使われる。
  • デメリット:データ容量が目ん玉飛び出るほど重い。Webサイトやブログで使うには全く向いていない。

RAW(ロウ)

カメラのセンサーが捉えた光の情報をそのまま記録した「現像前」の生データです。

  • メリット:圧倒的な情報量を持っているため、撮影後に明るさや色味を大きく変更(レタッチ)しても画質が破綻しない。
  • デメリット:そのままでは画像として見られず、専用ソフト(Lightroomなど)で「現像(JPGなどに変換)」する必要がある。データ容量が非常に大きい。

gif(ジフ)

こちらもjpgと並ぶ古のフォーマット。読み方は『ギフか、ジフか』論争が有名。開発者は「ジフだ」と言っているのになぜか決着がついていない。
特徴: 最大256色しか使えないので、写真には絶望的に向いていない!(ガビガビになる)。
長所: パラパラ漫画のような「アニメーション(動く画像)」が作れる。当ブログでも使っています。
実はWebPもアニメーションを作れるので、わざわざ画質の悪いGIFを使う理由は減ってきている。やっぱりWebP最強かもしれない。

ひげおは腐ってもプロカメラマンなのでPSD、TIFF、RAWデータは毎日扱ってて画像と言えばその3つなんだけど、ブログ運営してたらほぼ使わないwwwちょっとレイヤー残しときたいなでpsdで保存するくらいかなぁ。

RAWデータ

拡張子としてrawと言うのもあるんですが、カメラメーカーによって違います。ニコンはnef、キヤノンはcr2とか3、sonyはARW。そう言うのをまとめてRAWデータと言います。一応、統一規格でDNGってのがありますがライカくらいしか使ってないような・・・統一規格とは・・・・

このRAWデータというのは基本的には厄介者で、それぞれ専用のアプリが必要です。メーカーの純正アプリもありますが、プロはCaptureOneが主流かなと思います。Lightroomを使ってるプロカメラマンも多いです。

発売されたカメラを買うとデータを開けないという事態が発生して色々アプリをアップデートするまでが"プロの開封の儀"であります。最近も【実写レビュー】SONY α7Vは約42万円の価値がある?α7IVとの違いと買い替えの是非をプロが解説でやらかしました。

結論、ブログで使うならどれ?

基本はWebP一択

高画質・軽量・透過対応の三拍子が揃っています。

JPGとPNGはWebP非対応の環境向けの保険として覚えておく程度でOK。WebPが圧倒的に軽くなり、画質の劣化も感じません。実は凄まじい技術なのではないかと思っています。知らんけどですがw

ブログ運営において軽さは正義。表示速度が速いと読者の離脱の減少にもつながるし、サーバーのストレージも圧迫しません。軽さを追求しすぎてガビガビに劣化した画像を使うのは論外ですが、WebPはこれまで劣化と軽さをギリギリまで攻めてた境界線を軽く突破します。見た目ほとんど劣化してないのに40KB(キロバイト)とかだったりします。

例えば下の画像なんか165 KBです。わかる人にはわかるはず。

webp画像サイズ
Unauthorized copying and replication of the contents of this site, text and images are strictly prohibited.
当サイトのテキスト・画像の転載・複製は固く禁じます。

実際にひげおも最近は全部WebP

用途おすすめ
ブログ写真WebP
ロゴ・透過画像PNG or WebP
写真保存JPG
印刷TIFF
作業データPSD
撮影データRAW

ブログを始めた当初はWebPの存在をまだ知らなかった(それほど新しい形式)し、何よりPhotoshopが標準で対応していなかったのもあって、当ブログの過去記事の画像が全てWebPというわけではありません。

ここ数年でPhotoshopが標準でサクッとWebPで書き出せるようになり、WordPress側もプラグインなしでそのまま画像をアップロードできる環境が整いました。

また、ブログ運営において、WebPに切り替えるメリットはひげおが実感している「軽さ」だけではありません。画像が軽くなるとページの表示速度が上がります。そしてGoogleはページの表示速度をSEOの評価基準のひとつにしています。つまり画像を軽くするだけで、検索順位にも良い影響が出る可能性があるということです。

表示が速いと読者がページを開いてすぐ離脱する確率も下がります。「読み込みが遅いな…」と思って戻るボタンを押した経験、皆さんもありますよね。WebPはそういった機会損失も減らしてくれます。

こんなに軽くて画質も良くて透過もできる最強フォーマット、使わない手はありません。なので最近更新している記事に使っている画像は、ほぼ全てWebPに切り替えています。

画像フォーマット・拡張子の違いのまとめ

今回は知っているようで実はよくわかっていない「画像の拡張子」について解説しました。最後にざっくりと要点をおさらいします!

拡張子のポイント

  • 拡張子とは:パソコンに「このファイルはこういう種類ですよ」と教える名札のこと。
  • JPG(ジェイペグ):写真に強いが、背景は透過できないし繰り返しの保存で劣化する。
  • PNG(ピング):背景透過ができるが、写真に使うとデータが超重くなる。
  • WebP(ウェッピー):JPGとPNGのいいとこ取り。ブログで使うならコレ一択!
  • PSD / TIFF / RAW:プロが使う作業用・印刷用の重たいデータ。そのままではブログに貼れないのでWebPなどに書き出す必要がある。

少し前までは「写真はJPG、イラストはPNG」というのがWebの世界の常識でしたが、今はもう「基本はWebP」の時代になりました。

これからブログを始める方や、画像の重さに悩んでいた方は、ぜひWebPを活用してサクサク快適なブログを作っていってくださいね!それでは、良いブログ運営&写真ライフを!ひげおでした!

-Photoshopの知識・テクニック