・。* ゜ あなたが輝くをお届け ・。* ゜

JPG?PNG?初心者でもわかる画像ファイル形式の選び方&失敗しない使い方

正しいファイル形式

画像アップロードしたいけど、このファイルそのまま使って大丈夫かしら?」
写真の背景を消した、どのファイルで保存すればいいの?」
そう思ったことはありませんか?

うまく使いこなすポイントは、ファイル形式(拡張子)の選び方にあります。
画像データにはJPG・PNGなど形式があります。

この記事では、実際の画像でわかりやすくお見せしながら、ファイル形式について解説しています。
画像をアップロードするとき、ブログ・SNS投稿するとき、どれを選べばいいかわかるようになります。
最適なファイル形式の選び方をマスターしましょう!

目次

ファイル形式とは?

写真・イラスト・動画など、データ保存する形式をファイル形式(拡張子)といいます。
ファイル名の末尾にある .jpg や .txt などの文字列で、ファイルの種類や形式を示します。

拡張子

ファイル形式は、それぞれ画質・サイズなど特徴があります。

使い方を間違えると、送信先でファイルが開けないトラブルの原因になったり、ブログのSEO効果に影響することもあります。

ファイル 正しくアップロードできない

この記事では、正しい使い方を紹介していますので、初心者さんでも安心して送信・投稿できるようになります。
それでは、それぞれのファイル形式について、1つずつ特徴を見ていきましょう!

画像形式の種類・特徴

JPG(JPEG)

最も一般的な画像形式です。
写真などの画像に適しています。PNGよりファイルサイズが軽く、扱いやすいのが特徴です。

JPG

画像を送ってください!」と頼まれたら、形式の指定がなければ JPG形式で送れば、ほぼ問題ないでしょう。
SNS投稿・ブログ画像にもJPGを使うことができます。

JPGは、背景を透明することが出来ないため、透明にしたいときはPNGを使いましょう!

JPG 背景透過できない

JPG (JPEG)の特徴
  ・写真に適している
  ・ファイルサイズがPNGより軽い
  ・透明背景は不可

 PNG

PNGも写真に適したファイル形式。
背景を透明にすることができるのが大きな特徴です。

切り抜いた画像を何枚も重ねてレイアウトするデザインに向いています。

ファイルサイズは、JPGに比べてやや大きいですが、JPGよりきれいに表示されるため、ロゴやアイコン等をホームページに使用するときに向いています。

PNGの特徴
  ・写真に適している
  ・ファイルサイズはやや大きめ
  ・背景を透明にできる

 GIF

動きのあるアニメーション画像が、 GIFの特徴です。
使える色が256色に限定されるため写真には適しませんが、背景を透明にしてダウンロード可能です。

GIF

LINE・SNSで、スタンプ感覚で送信できます。
(写真を送るときと同じようにファイルからGIFファイルを選んで、送信)

プレゼンテーション資料の図解の一部に使うと、見てる人の視線を引きつけます
印象づけたいところで使ってみましょう!

GIFの特徴
  ・動きのあるアニメーション
  ・使える色は256色のみ
  ・背景を透明にできる

画像だけじゃない!他のファイル形式も知っておこう

MP3(音声ファイル)

MP3は、音楽・声などの音声データを保存できるファイル形式です。

MP3

音楽配信やポッドキャスト、ナレーション音声などで広く使われています。

SNSやブログにそのままアップできない場合もあり、ファイルサイズも大きいため、再生プレイヤーを埋め込むファイルとして共有するのをオススメします。

音声ファイルを送信するときは、GoogleドライブDropboxなどにアップしてURLで共有すると安心です。
なお、MP3耳だけで聴くデータで、動画や画像のように見えないため、内容が伝わる「補足の文章」を添えてあげると親切です。

MP3の特徴
  ・音楽やナレーションに使われる
  ・音声のみ

MP4(動画ファイル)

MP4は、動画を保存できるファイル形式です。

MP4

音声・映像・字幕など、たくさんのことを表現できます。
YouTubeやInstagram、Zoom録画など、あらゆるシーンで使われています。動画コンテンツが主流となる今の時代、MP4は注目されているファイル形式です。

ほとんどの環境で再生できるため、動画といえば MP4形式を覚えておきましょう。

SNSやブログにアップすることが可能ですが、ファイルサイズが非常に大きいため、データ容量に注意が必要です
誰かに送るときは、GoogleドライブやDropboxなどにアップしてURLで共有するといいでしょう。

MP4の特徴
  ・映像・音声・テキスト等、全部まとめた形式
  ・YouTube・Instagram等で使われている
  ・ファイルサイズが非常に大きい

PDF

PDFは、文書の保存形式です。
画像も埋め込めるため、パンフレットを作って印刷会社にお願いするときや、フォトグラファーが撮った美しい写真を出版社に渡すときのデータとして使われています。(他のデータ形式で提出する方法もあります)

PDF

Word形式でデータを渡すと、提出先の環境によってレイアウトが崩れることがありますが、PDFであれば、作ったときの見た目そのまま表示されます
その点は安心なのですが、スマホやSNSで開けなかったり、ダウンロードを促されることがあるため、気軽にすぐに見ていただきたいときは不向き。そんなときは、JPGやPNGで送るのがいいでしょう。

資料用・印刷用として使うのをおすすめします。

PDFの特徴
  ・複数画像を1つのファイルにまとめられる
  ・印刷会社への提出や資料の送付に便利
  ・編集には専用ソフトが必要

Microsoft ファイル (Excel, Word, PowerPoint)

Microsoft社は、Excel・Word・PowerPointといった文書作成ツールがあります。
データ保存形式は、Excel【.xls .xlsx】Word【.doc .docx】PowerPoint【.ppt .pptx】の拡張子になります。

Microsoft社 文書作成ツール

Microsoft Office ファイルは、文字だけでなく、書式・画像・グラフなど、さまざまな機能があるため、複雑な資料に適しており、ビジネス教育の現場で広く利用されています

ファイルを開くには、Microsoft Officeソフトウェアが必要です。
そのため、SNS等でそのまま送信してしまうと、受けとった人が開けないことがあります。すぐに見ていただきたい画像やプロフィールデータ等は、JPGやPNGを使いましょう。


ファイルを編集できる状態で共有したいときは、Googleファイルに変換して共有リンクを使うのがおすすめ。使いやすさに合わせて形式を選びましょう!

Microsoft Officeの特徴
  ・ビジネス・教育で広く利用されている
  ・受けとる側の環境によって開けないことがある
  ・Googleファイルに変換することができる

Google ファイル (スプレッドシート, ドキュメント, スライド)

Google社は、スプレッドシート・ドキュメント・スライドといった文書作成ツールがあります。
データ保存形式は、スプレッドシート【.gsheet】ドキュメント【.gdoc】スライド【.gslides】です。パソコン上で拡張子が表示されませんが、これは特殊なデータ構造として管理されているためです。

Google社 文書作成ツール

Googleアカウントがあれば無料でつかえて、場所やデバイスを選ばず編集できます。
Webブラウザで使うことができるので、ソフトウェアのインストールは不要。(スマホではアプリが便利)

共同編集することができて、フリーランスやチーム作業と相性がいいです。
みんなで1つのファイル同時に開いて、同時に書き込むことが出来ます。誰がどこを編集しているかわかり、リアルタイムで反映されるため、何度もメールで連絡したりする時間が削減され、時間効率がアップします。
1つのリンク共有するので、内容変更のたびに新しいファイルを送り直す必要がありません

画像だと編集ができませんが、Google文書の共同編集を使えば、1つのファイルで双方向のやりとりができて、情報の流れがはやい現代のコミュニケーションスタイルにマッチしています。またSNSより多くの情報量を扱うことができ、セキュリティも安心なのが大きな魅力です。

Microsoft (Word, Excel, PowerPoint) 形式でダウンロードすることができます。

Google文書の特徴
  ・環境を選ばず開くことができる
  ・リンクを共有して共同編集できる
  ・Microsoft 形式でダウンロード可

拡張子はどこ? ファイル形式の確認

ファイルの種類は「拡張子」で見分けます。
拡張子は、ファイル名の末尾 .jpg .pdf などの「. 〜」の部分のこと。

パソコンの初期設定で表示されないことがあるため、設定について解説します。

拡張子を表示 (Windows)

Windowsでは、エクスプローラー (フォルダ)で拡張子を表示できます。

  1. エクスプローラーを開く
  2. 上部メニュー「表示」タブをクリック
  3. ファイル名拡張子」にチェックを入れる

拡張子を表示 (Mac)

Macでは、Finderから拡張子を表示できます。

  1. Finderを開き、上部メニュー「Finder → 設定」をクリック
  2. 詳細」タブ →「すべてのファイル名拡張子を表示」にチェックを入れる

ブログで使うなら、どのファイル形式?

ホームページ・ブログで最適な画像形式は?

ホームページ・ブログでは、基本的にJPGかPNGを使えば安心です。
写真ならJPG、ロゴやイラストにはPNGがおすすめです。

SEO対策として、画像のファイルサイズを軽くすることが大切です。
Google社はページの表示スピードを重視していて、速いサイトは検索結果で優遇されやすくなります。サクサク動くWebサイトはユーザビリティがアップして、訪れた人に喜ばれます。

WebP

WebP (ウェッピー) は、あたらしい画像形式で、JPG・PNGよりファイルサイズがとても軽いのが特徴です。
画質がきれいで、背景透過やアニメーションも可能。Webサイトの表示スピードを速くしたいときに有利です。

WEBP

WebPは、古いブラウザで表示されないことがあるため、使いたい環境で表示されるか確認してから使いましょう。

WebPへの変換ツール

JPG・PNG の画像をWebPへ変換できるサイトをご紹介します。
筆者のオススメは、画像をたくさんまとめて1回で変換できる「サルワカ道具箱」。

サルワカ道具箱 URL:https://saruwakakun.com/tools/png-jpeg-to-webp/

サルワカ道具箱

画像ドラッグ&ドロップすると、WebPに変換された画像をダウンロードできます。

ファイルサイズ削減

実際に筆者がPNG → WebP へ変換すると、なんと-77% も大幅にファイルサイズを削減できました!
これを使えば、サイトの表示スピードアップが期待できますね。筆者のブログでは、WebP画像が使われています。

WebPの特徴
  ・新しいファイル形式
  ・ファイルサイズがとても軽い
  ・古いブラウザでは開けない → 使用環境を確認すること

JPG/ PNG 画像を軽くしよう!

JPG・PNG画像は、ファイル形式をそのまま変えずにデータ容量を軽くすることができます。
画像サイズを軽くできるサイト「TinyJPG」が有名ですね。

TinyJPG URL:https://tinyjpg.com/

TInyJPG

画像ドラッグ&ドロップすると、ファイルサイズが軽くなって、ダウンロードできます。
さきほどご紹介したWebPも圧縮できるため、他のツールでWebPに変換した後、「TinyJPG」でさらに圧縮することができます。

JPG・PNG・WebPのどの形式を使うかは、画像がきれいなまま保たれるか使用できる環境かで判断しましょう!

利用シーン別 ファイル形式

利用シーンにあわせて、オススメをまとめました。

スクロールできます
利用シーンおすすめ形式ポイント
LINE・SNSJPG, PNG気軽に見てもらいたいとき
Webサイト・ブログJPG, PNG, WEBPサイズと表示環境にあわせて選ぶ
写真JPG高画質で軽い
ロゴ・イラスト・アイコンPNG背景透過が可能
音声・音楽MP3音で伝えたいときに
アニメーション・動画GIF, MP4GIFは短いとき
MP4は長い動画に
共同編集Google文書複数人で同時に編集可能
常に最新版を共有できる

チェックしておきたいこと

  • 画像サイズが大きすぎないか(例:3000px以上はリサイズ)
  • ファイル名に日本語・記号が含まれていないか(文字化けやエラーの原因になることも)
  • カラー/モノクロの指示がないか確認

迷ったら、JPG・PNGが安心です。
アップロードが必要な写真や証明書などの提出には、JPGが軽くて扱いやすいため、多くのサイトで推奨されています。

まとめ

今回は、さまざまなファイルの種類をご紹介させていただきました。

ちゃんと送ったつもりでも「相手が開けなかった」「ファイルが文字化けした」なんてことがあります。
原因は、送った画像のファイル形式が相手の環境にあっていないこと。
ファイルの特徴を知ってるだけで、投稿ミスや画像が開けないトラブルを防ぐことができます。

ポイントは『誰に・どのシーンで』使うか考えて、それにあわせて形式を選ぶこと。

シーンにあわせたファイルで、素敵な写真・作品をどんどん世界に届けていきましょう!

目次