【お役立ち情報】png形式の画像で画質を落とさずに容量を大幅に削減する方法
・ png画像のサイズ圧縮方法
・ 圧縮のためのサービスとアプリ
png形式の画像について
画像の形式にはjpeg（jpg）、bmp、gif、svgなど色々ありますが、ブログなどで画像を使用するときは、比較的画質もよく簡単に使えるpng形式の画像が多いと思います。
png形式の画像の特徴としては、
・フルカラー（約1670万色）を扱える
・写真など、色数が多いものをJPEG以上に綺麗に表示できる
・画像の背景を透過できるのでロゴ等に使用できる
のような特徴があります。
一点、欠点を上げるとすればjpgなどに比べて、ファイルのサイズが大きくなるということでしょうか。
サイズの大きい画像は、ページを開くときにそれだけ時間がかかります。
現代においてはページの表示に時間がかかるだけで、もう読む気がなくなってページが閉じられてしまうというケースが増えているようです。（もっとのんびりとした気持ちを持とうよ＾＾；）
ページの表示速度はSEOの評価にも影響するため、少しでも速く表示されるようにするためには、画像のサイズを小さくする必要がでてきます。
※画質にこだわらなければjpgを使うという選択肢もアリです。
画像の解像度も重要
また、その際には画像の解像度（画像の大きさ）にも注意する必要があります。
画像の解像度というのは1,920px × 1,080pxといった画像のサイズのことをいいます。
この数字が高ければ高いほど、解像度が大きいということになります。
高画質の素材などをダウンロードしてきて、そのまま使おうとすると横幅が4000px以上あるものなど、かなり大きいサイズだったりします。
その場合、限界まで圧縮をしても大してサイズが小さくならない場合があるため、画像の解像度を小さくする、「リサイズ」という作業も必要になります。
一般的なデスクトップ環境では、最大でも上記でも書いた1,920px × 1,080px（フルHD）で作成しておけば大丈夫です。
これは現代の標準的なディスプレイ解像度に対応しており、多くのユーザーに適切な表示品質を提供できます。
ただし、すべてをこのサイズにする必要はなく画面いっぱいに表示する画像でなければ、さらに小さくしても大丈夫です。
画像の圧縮手順
ということで、png形式の画像を画質はほぼそのままに、サイズだけを小さくするための方法についてご紹介しますが、流れとしては以下のようになります。
１．画像をリサイズする（解像度が大きすぎる場合）
２．画像を圧縮する
リサイズが必要ない場合は、「２．画像を圧縮する」まで進んでください。
１．画像をリサイズする
PhotoshopやIllustratorのようなデザインソフトを使えばリサイズはできますが、ソフトを持っていなかったり、やり方がわからない人も多いと思いますので、もっとカンタンな方法をご紹介します。
それは、オンラインツール「サルワカ道具箱 – 画像リサイズツール」を使う方法です。
こちらはpngでもjpegでも同じページからリサイズできるため、非常に使い勝手が良いです。
では、やり方です。
１．「サルワカ道具箱 – 画像リサイズツール」を開きます。
２．「① サイズ変更する画像を選択」で［＋ファイルを追加］をクリックするか、ドロップ領域に画像をドロップします。
３．この時点で初期値の横幅1200pxで画像がリサイズされるため、それで問題ない場合は画像の［ダウンロード］をクリックします。
４．最大幅を指定してリサイズしたい場合は、「② 指定したサイズに縮小」の「画像の最大幅」に希望する数値を入力して、［リサイズする］をクリックします。
※高さで指定する場合は、「画像の最大高」の方に数値を入れます。
５．指定したサイズでリサイズがされるので画像の［ダウンロード］をクリックします。
カンタン設定動画
設定方法を１分のショート動画にまとめました。
文章だけでは分かりづらかった部分を動画でご確認ください。
画像をリサイズしたら圧縮に進みます。
２．画像を圧縮する
※Wordpressで管理しているブログなどでは、プラグインを使用することで自動的に画像の最適化が行なえます。１つ１つ手動で行う手間を省けますので興味がある方は以下の記事もご参照ください。
https://blog.astha.jp/image-optimization/使いやすい「Optimizilla」
まずは使いやすいWebツールからです。
Webで開いた画面に画像をドラッグ＆ドロップするだけで、画像最適化とファイル圧縮アルゴリズムを組み合わせて、画質を保ったままに、png形式の画像を最小サイズに圧縮してくれる優秀なサービスです。
しかも、jpge画像（.jpg、.jpeg）でも同じように画質を劣化させずに圧縮してくれます。
正直こちらが無料で使えるのは大変ありがたいです。重宝しております。
では、その使い方を解説していきます。
１．「Optimizilla」を開きます。
２．以下の画面が表示されますので、ドロップスペースにファイルをドラッグ＆ドロップするか、［アップロード］ボタンから画像ファイルをアップロードします。
※もし、画面が日本語になっていない場合は、右上の言語設定から変更ができます。
３．アップロードと変換作業に数秒〜数分かかります。
４．作業が完了するとファイルのダウンロードが行なえます。
ファイルのサムネイルに表示されている［ダウンロード］をクリックすると、ファイルを１つずつダウンロードできます。
［全てダウンロード］をクリックすると、処理を行ったファイルをまとめてダウンロードができます。
ただし、ファイルがzip圧縮された状態になりますので、その後解凍が必要になります。
ファイルのサムネイルや画面下部では圧縮結果が表示され、サイズの変化を確認することができます。
今回のファイルでは10.6MBあったファイルが3.1MB<と70％も圧縮することができました。
なお、結果画面の右にある「カラー」というバーで圧縮度を変更することもできます。
ただし、初期値の「226」から下げても圧縮度合いは大きく変わらず、それでいて画質は確実に悪くなっていくため、そこまで下げる必要はないと感じました。
オフラインでも使える「Pngyu」
あらかじめパソコンにアプリをインストールしておき、オフライン環境でも使えるようにしておきたい場合は、「Pngyu」というアプリをオススメします。
これはWindows用、Mac用の両方があります。
私はMacを使っていますので画面はMacで撮ったものです。
それではインストール方法から使い方まで解説します。
インストール方法
１．「Pngyu」の公式サイトを開きます。
２．ページ中央の「Download」からお使いのOSに合わせてボタンをクリックします。
３．ダウンロードしたファイルはzip圧縮されていますので解凍します。
４．Windows版の人は解凍された「Pngyu.exe」を実行します。
Mac版の人は解凍された「Pngyu.app」を「アプリケーション」に移します。
※もし、アプリの実行時に「"Pngyu.app"は、開発元を検証できないため開けません。」と表示された場合は、［キャンセル］をクリックして、引き続き以下の操作を行ってください。
（ア）画面左上のアップルマークをクリックして、「システム環境設定」をクリックします。
（イ）「セキュリティとプライバシー」-「一般」に表示されている「”Pngyu”は開発元を確認できないため、使用がブロックされました。」の［このまま開く］をクリックします。
（ウ）再度、「"Pngyu.app"は、開発元を検証できないため開けません。」というメッセージが表示されますが、今度は［開く］というボタンがあるので、こちらをクリックします。
使い方
１．「Pingyu」を起動します。
２．画面中央の枠内に画像ファイルをドラッグ＆ドロップします。
３．ファイルが指定されたら、［Compress Start］をクリックします。
４．ファイルが圧縮され結果が表示されます。
※初期値ではファイルがそのまま上書きで圧縮されます。
上書きされたくない場合は、画面左下で［Custom］をクリックし、
・同じディレクトリに保存するか、違うディレクトリに保存するか
・同じ名前で保存するか、別の名前で保存するか
を変更してください。
オフライン用の「Pingyu」ですが開発が2013年と古いせいか、ファイルのサイズが大きい場合に圧縮に失敗することがありました。
もし、圧縮がうまくいかない場合は、オンラインサービスの「Optimizilla」を試してみてください。
１０分調べてわからないことは人に聞いちゃおう！
もし、記事を読んでいて「見ながら作業をする時間がもったいない！」と感じた方は、ぜひご相談ください。
そんなあなたの作業時間を短縮するために「オンラインITサポート」を行っております。
自分で調べながらやったら１時間かかったことがサポートに聞いたら１０分で終わったなんてことはよくあることです。
まずはお気軽に相談ください＾＾
詳しくは以下のバナーをクリック！
