PNGファイルを圧縮して、ストレスのないサイト作成をしよう
目次[閉じる]
インターネット上で調べ物をしたり、記事を読んだり、趣味のページを見て楽しんだりしている人は多いと思います。時には、ページが表示されるのに時間がかかることもあるのではないでしょうか。通信環境やパソコンやタブレットなどのデバイスの状態も影響しますが、原因の一つとして考えられるのは、ページに添付されている画像データのサイズが大きすぎることです。ページが表示されるのに時間がかかると、急いでいるときは特にイライラするなどストレスを感じてしまいます。
サイト運営者、作成者は、閲覧者側の立場にたってストレスを感じないWebページの作成に努めることが必要になります。グーグルなどの検索エンジンでの上位表示を目指すのならば、重すぎるページは評価に悪影響を及ぼす可能性があります。
ブログなどでは、サーバー容量の問題も出てきます。
そこで必要となるのが画像ファイルを適切に圧縮する作業です。
この記事では、代表的な画像ファイルのひとつであるPNGファイルとその圧縮方法についてご紹介します。
PNGファイルとは？
「PNG」とは、ブラウザが表示できる画像ファイル形式の一つで、「Portable Network Graphics」の略です。拡張子は「png」となります。ブラウザで表示できる画像ファイル形式は他に「JPEG」と「GIF」があります。
PNGではフルカラーの1670万色を表示でき、背景の透過をすることができます。フルカラー表示ができるけれど透過のできないJPEGとフルカラー表示ができないけれど透過のできるGIFの良いとこどりのファイル形式といえます。さらに、どちらの方式にもできない半透明の使用ができます。
ロスレス圧縮（可逆圧縮）の画像方式なので、低画質で保存した場合も元の画質に戻すことができます。同じフルカラーでも保存を繰り返すとJPEGでは画質が劣化してしまうのに対して、PNGは劣化しないので、画像加工をしたい場合におすすめです。
ただし、ファイルサイズが大きくなりがちなのが難点です。
PNGファイルのサイズを小さくする方法
PNGファイルのサイズを小さくしたい場合の方法には次の4つがあります。
① PNG8で保存・変換する
PNGには1670万色のフルカラー表示ができるPNG24と256色のインデックスカラーしか表示できないPNG8があります。表示できる色数を見ると画質に大きな差が出るように感じますが、ほとんどの場合、人間の目ではそれほど差を感じることはありません。ただし、拡大したときやグラデーションカラーなどではザラザラした感じが目立ってしまい、画質を損なうケースもあります。
② ロスレス圧縮をする
画質を落とさずに圧縮データの最適化でファイルのサイズを小さくする方法ですが、圧縮率は高くはありません。
③ メタデータ削除する
PNGファイルにはアプリケーションによって、独自のメタデータが埋め込まれていることがあり、このサイズが大きいケースがあります。アプリケーションからファイルを書き出すときに、「保存」ではなく、「エクスポート」を使うことで、メタデータを最小限とすることができます。
④ 解像度の最適化
画面に表示される必要最低限のサイズで画像を用意することが大切です。大きすぎる画像はWebページを重たくする要因となります。これは、PNGファイルに限らずすべての画像に共通しています。
PNGファイルを圧縮する方法のご紹介
PNGファイルの圧縮方法として、オンラインツールとソフトウェアがあります。いずれも無料で利用できるものがたくさんあります。オンラインツールは、情報量やファイル数、通信環境によって、アップロードやダウンロード、処理などに時間のかかることも考えられます。ソフトウェアは通信環境などを気にする必要はありませんが、インストールの必要があり、OSなどの使用環境が限定されることがあります。自分の利用したい方法や利用環境に合ったツールを見つけましょう。
一部の使い方も合わせていくつかご紹介します。
●オンラインツール
① TinyPNG
https://tinypng.com/
とても人気の高い画像圧縮のオンラインツールです。パンダのキャラクターが使われていることから、「パンダ」の愛称で呼ばれています。英語表記となります。PNGの圧縮はもちろん、JPEG/JPG、WebPの圧縮もできます。画像の大きさはそのままで、透過性を維持しつつ画像を圧縮します。非可逆の圧縮で24bitカラーから8bitカラーになる点に注意してください。
1回につきに圧縮できる最大ファイル数は20、一枚ごとの最大ファイル容量は5MBとなります。5MB以上のファイルをドラッグ＆ドロップした場合は、エラーの表示が出ます。
【使い方】
1.サイトへアクセスする。
2.パンダのイラストの横に「Drop your WebP, .png or .jpg files here!」と書かれた点線の枠があるので、そこへ圧縮したいファイルをドラッグ＆ドロップすると、圧縮開始。
クリックして、画像ファイルを選択することもできます。
3.圧縮されたファイルを保存します。次の3つの方法を選べます。
・圧縮完了したファイル名横の「Download」で1枚ずつ通常の保存。
・「Save to Dropbox」ボタンで、Dropboxへ保存。保存するファイルを選ぶ場合は、Dropboxの画面が開いたら、ファイル名横の「×」で保存しないファイルを削除します。
・「Download all」ボタンで、zip形式で一括保存。
② COMPRESS PNG
https://compresspng.com/ja/
日本語対応している画像ファイル圧縮ツールです。PNGの他、JPEG、GIF、PDFにも対応しています。
1回につきに圧縮できる最大ファイル数は20個となります。サムネイルをクリックしてマニュアルモードに切り替えれば、PNG圧縮クオリティを調節することもできます。アップロードされたデータは全て1時間後に削除されるようになっています。
③ I Love IMG
https://www.iloveimg.com/ja/compress-image/compress-png
日本語対応の画像ファイル圧縮ツールです。PNGの他にJPG、SGV、GIF画像の圧縮ができます。圧縮サイズなどの調整はできません。GoogleDrive、Dropboxのファイルをアップロード、処理後のデータの保存が可能です。
④ WEBSITE PLANET
https://www.websiteplanet.com/ja/webtools/imagecompressor/
日本語対応の画像ファイル圧縮ツールです。PNGの圧縮の他、JPGの圧縮もできます。画像の透明度はそのままで、最大80％圧縮できます。「追加設定」で圧縮モードを低・中・高の3つから選ぶことができます。デフォルトでは中になっています。
⑤ Optimisilla
https://imagecompressor.com/ja/
日本語対応の画像最適化とファイル圧縮アルゴリズムを組み合わせた、画質を保ったまま最小サイズに圧縮できるツールです。1回につき最大20個までのファイルをアップロードできます。プレビューでオリジナル画像と見比べながら圧縮率を手動で調整できることが大きな特徴となります。
⑥ COMPRESSOR
https://compressor.io/
英語表記の画像ファイル圧縮ツールです。圧縮方法を「Lossless（可逆圧縮）」と「Lossy（非可逆圧縮）」の2種類から選べます。最大90％の圧縮が可能となります。PNGの他にJPEG、GIF、SVGの圧縮もできます。１つのファイルサイズの上限が10MBとなっています。圧縮後にオリジナルと処理後の画像を見比べることができます。保存先としてGoogleDrive、Dropboxを選ぶことができます。
⑦ ラッコツールズ
https://rakko.tools/tools/123/
日本語の画像ファイル圧縮ツールです。PNGの他にJPG、JPEGの画像の圧縮ができます。圧縮後の画質を低・中・高の3つ以外に0～1の値の間で選択することができます。
無料ソフトウェア
① Image Optim
https://imageoptim.com/mac
Mac用アプリで、Webサイトもあります。必要のないメタデータやカラープロファイルを削除することで、サイズを小さくします。PNGの他にJPEG、GIFに対応しています。
② Image Alpha
https://pngmini.com/
Mac用のアプリです。透過を保ちながら、PNG画像を非可逆圧縮します。設定で色数をインデックスカラーの256色以下にすることもできます。①Image Optimと連携することもできます。
③ Caesium
https://saerasoft.com/caesium/
Windows用のアプリです。日本語に対応しています。画質をほとんど損なうことなく圧縮することができます。最大90％圧縮することが可能です。画像圧縮前と圧縮後のプレビュー確認ができます。
④ PNG Gaumtlet
https://pnggauntlet.com/
Windows用アプリです。日本語には対応していません。画像と関係のないデータを取り除くことで、画質を劣化させることなくファイルサイズを小さくします。
⑤ PNGoo
https://saerasoft.com/caesium/
Windows用アプリです。日本語対応はしていません。PNG画像の透明度を維持したまま非可逆圧縮します。平均40～70％圧縮します。
⑥ ペイント（Windows10）
圧縮とは少し異なりますが、Windows10の「ペイント」を使用してPNG画像のサイズを変更してファイルサイズを小さくすることができます。
まとめ
以前はハードルが高めだったホームページ作成ですが、最近は無料ツールなども普及してきて、小規模事業主の方や個人などでブログやホームページを開設するようになっています。せっかく作るのですから、訪問者も増やしたいですよね。そのためには内容の充実はもちろんのこと、サクサクと表示されるページ閲覧の快適さも必要になります。
文字ばかりでは表示がスムーズだったとしても窮屈な印象のサイトとなってしまいます。
PNGファイルの圧縮を活用して、たくさんの人に愛されるサイトを作りましょう。
また、PNGファイルの圧縮はサイト掲載のためだけでなく、パソコンやスマートフォン、タブレットなどの容量の負荷を減らしたいとき、クラウドサービスでのサーバー空き容量を確保したいとき、誰かと画像共有をしたいときなどにも活用できます。
