デザイン PR

pngとは?画像の違いや特徴、メリットについて

記事内に商品プロモーションを含む場合があります

pngというファイル形式の特徴メリット・デメリット圧縮変換について解説します。

欲しい情報が一つでもある方、よろしければ参考にしてください。

pngとは?

画像アイコン

pngとは、画像のファイル形式の一つです。

呼び方は「ピング」。

拡張子は「.png」です。

pngの特徴

PNGの主な特徴は次の3点です。

◎可逆圧性

可逆性と非可逆性のイメージ 画像がどんどん劣化する
  • pngファイルは可逆圧縮を行うことで、圧縮によって省かれる情報を保持する性質があります。
  • そのため、保存を繰り返しても劣化しません

※Jpgなどは非可逆圧縮なので、保存するたびに画質が劣化していきます。

◎透過情報

png 透過と非透過の画像比較 図解
  • PNGは透明度情報を記録できるため、背景が透ける画像として保存できます。

※8bit・24bitでも透過データになります。

◎色数

カラーパレット

PNGは、bit数によって3つの種類があります。

bit数が大きくなるほど扱える色情報も増えます。

  • PNG-8(8bit):256色
  • PNG-24(24bit):1677万色
  • PNG-32(32bit):1677万色+256段階の透過情報

PNGを端的に言うと、劣化しない×高画質×透過性のある画像データです。

イイコトばかりに思えますが、データ容量が大きくなるというデメリットがあります。

【pngファイルのデータ量が大きくなる理由】

  • 圧縮時に省略されるデータをも保持している。
  • 色数が多い。
  • 透明度情報を保持(32bit)する。

png・jpg・gifの違い

イラスト パソコンの前でコーヒーを飲む男性

pngと比較されやすいファイルといえば、jpg、gifでしょう。

それぞれの違いは次の通りです。

png・jpg・gifの違い

png・jpg・gifはいずれも画像データのファイル形式です。

それぞれのファイル形式で押さえておきたいポイントは、画質・データ量・透過性です。

【png・jpg・gifファイル形式の比較表】

比較項目 png jpg(jpeg) gif 
拡張子 .png .jpg .gif
色数 256~1677万 1677万 256
画質
透過性 ×
逆性 可逆 非可逆 可逆
データ量 重い 軽い 軽い

png・jpg・gifの使い分け

3つのファイル形式の違いをざっくりまとめると以下の通りです。

  • png画質が綺麗で劣化しないけどデータが重い
  • jpg画質が綺麗でデータも軽いけど、保存を繰り返すと劣化する。
  • gif画質が悪いけど軽く透過データも扱える。

上記特性を踏まえると、おすすめの使用シーンも決まってきます。

  • webにおすすめ:jpg
  • シンプルなアニメーションにおすすめ:gif
  • 高画質な媒体におすすめ:png

pngの圧縮

イラスト パソコン操作が上手くいかないとき うなだれる男性

pngのサイズ変更

pngのサイズを変更する方法は幾つかありますが、おすすめなのは次の2つです。

◎bit数を落とす

png 圧縮方法 ビット下げるやり方
  • bit数を落とし、「png8」か「png24」で保存します。
  • bit数が減ると色数も減るため、画質優先の媒体に掲載するときは要注意です。
  • とはいえ、体感的に普通のwebサイト程度では見え方に大きな違いが出ることはまずないかなーとは思います。

※ファイル形式の変更は、手持ちのアプリケーションの機能に依存します。

◎クラウドの圧縮ツールを利用する

  • 特別なアプリは不要で、誰でもカンタン&確実にできるのが無料のクラウドサービスです。
  • 無料でサービス提供しているサイトは幾つかありますが、ワタシがよく使うのは「I♡IMG」です。
  • 画面に画像をドロップするだけの簡単操作で、数秒もすれば圧縮完了します。

\圧縮は僅か数秒!圧縮率もカナリ高い!/

iimg 圧縮成功
  • 画質はpng8より劣る感じですが、圧縮率が高く、煩わしい広告もなくて使いやすいです。

png圧縮で、誰でも出来て圧縮率が最も良いのはクラウドツールを使うやり方です。

画質の比較は以下を参考にしてください。

pngサイズ変更 やり方と結果の画像比較
  • 圧縮率はクラウドの圧縮ツールが最も優秀
  • 画質はクラウドの圧縮ツールが最も荒い

よっぽど高画質を扱うシーンでなければ、無料のクラウドツールを使うのがおすすめです。

I♡IMG

pngの変換

pngは他ファイルに変換したくなるときがときどきあります。

代表的な3パターンを紹介します。

pngをjpegに変換

ファイルサイズを小さくしたいときや透過属性を無くしたいときに使います。

やり方は簡単です。

【pngをjpgに変換する方法】

  1. pngファイルを開く(プログラムは何でも良い)。
  2. 別名で保存から、jpgを選択。
png jpg変換 やり方

pngをpdfに変換

pngをpdfとして保存する方法は2つあります。

❶wordを使ってpdfに変換する方法

一つ目は、wordのpdf保存機能を使う方法です。

word文書として保存することになるので、用紙のサイズに気を付けます。

【やり方】

  1. 新規でwordを開く。
  2. wordにpng画像をドロップするか、「挿入>画像」で文書内に画像を表示させる。
  3. 「ファイル>名前をつけて保存」(バージョンによっては「Adobe PDFで保存」を選択)を選び、ファイルの種類からPDFを選択。
png pdf変換 wordやり方

❷フリーの変換サービスで変換する方法

wordアプリを持ってない人は、無料のweb変換ツールを使うのがおすすめです。

無料のサイトは幾つかありますが、ワタシのおすすめはadobeです。

adobe PDF変換ツール(無料)

ジーナ
ジーナ
変な広告バナーがなくて操作に迷わない。

adobe以外にもいくつかサイトはありますが、どのサイトも基本的な操作方法は同じです。

【やり方】

  1. ウェブサイトにアクセスする。
  2. ページ内にファイルをドロップする。
  3. 変換完了後、ダウンロードする。

pngをsvgに変換

pngからsvgに変換したいときは、無料の変換ツールを使います。

ただし、svg変換は失敗しやすいので、いくつかのフリーソフトで試してみるのがおすすめです。

使いやすく、比較的成功しやすいと感じるのは以下の2つです。

SVG to PNG

Imagetostil

ジーナ
ジーナ
svg変換は上手くいくことがほとんどないカナ…。

png まとめ

画像アイコン

高画質×透過性のある画像を使いたいときは、png形式で保存するのがおすすめです。

pngのデメリットは画像データが大きくなることです。

データ量を抑えたいwebでの利用にはjpgの方が適していますし、大量の画像を使うアニメーションならgifが適しています。

使いたいシーンに合わせて、最適なファイル形式を上手に使ってくいきましょう。

adobe cc セール
adobeのセールや割引はいつ?価格や時期についてadobe ccをセールはいつ?ストアやプラン別の価格やお得なサービスをご紹介。普通に買うとけっこうなお値段がしますが、セール・割引を使えば30%~OFFも当たり前。コンプリートプランに至っては55%~OFFで購入できることも。....詳しくはコチラ。...
フォトショップ 価格
フォトショップの価格・値段・買い切りとの比較!安く買うには?フォトショップの価格・値段・買い切りとの比較?フォトショップを安く買うとき、まずはっきりさせておきたいのが 必要なadobeアプリの数。フォトショップだけでいい人なら「フォトプラン」が最安値。2つ以上のadobeアプリを使いたい人なら「adobe付き通信講座」が最安値です。キャンペーン・セールも、フォトショに限っては無意味....詳細はコチラ。...
イラストレーター 値段
イラストレーターの値段と価格・安く購入する方法を解説!イラストレーターを安く購入するとき、はっきりさせておきたいのが必要なadobeアプリの数。イラレだけでいい人なら「単体プラン×セール」が最安値。2つ以上のadobeアプリを使いたい人なら「adobe付き通信講座」が最安値です。価格比較と賢い買い方のポイント...詳細はコチラ。...
プレミアプロ 値段
プレミアプロ 値段は?安く買う方法と買い切りとの違いプレミアプロの値段と安く買う方法を紹介。買い切り版とは旧バージョンのことで、今買ってもリスクしかないので購入は辞めるのがベター。で、まずはっきりさせておきたいのは 必要なadobeアプリの数 。◎プレミアプロだけでいい人:単体プランがおすすめ。◎2つ以上のadobeアプリを使いたい人:adobe付き通信講座 or 学生・教職員向けがおすすめ。....詳細・違いはコチラ。...
デジハリ adobe
デジハリadobeマスター講座は2年目も継続できる!?講座更新のデメリットは?デジハリadobeマスター講座は、フリーランス・社会人でも利用可能な学割価格が適用されるので、正規版より3万円も安く利用できる。しかも1年中安い・ライセンスコードの発行が早い・2年目も継続できる・受講はしなくても大丈夫…およそデメリットらしいものもなし。…デジタルハリウッドの詳細はコチラ。...
adobe 学割
adobeの学割とは?学生の購入割引・条件で社会人も安く!?学生ならadobeの学割を使わない理由はありません。学割なら、初年度65%OFF。2年目以降も50%OFF以上安く購入できます。割引率を最大化するポイントは、初年と2年目以降で購入サイトを変える事。購入方法や条件などを詳しく解説していきます。....詳細はコチラ。...
adobe cc クラック
adobe cc クラックadobe ccのクラック版を使用する前に、知っておきたいメリットとデメリット&安全に無料・格安でadobe ccを購入する方法を紹介します。詳細はコチラ...