taccuma note

スクリーンショットのpng画像のサイズを縮小するには

ブログなどを書いたりするとき用にスマホなりパソコンなりでたくさんのスクリーンキャプチャー(スクリーンショット)をとって画面を画像として保存すると思うのですが、そのpng画像そのままブログに載せるとサイズが大きすぎて画像の読み込みに時間がかかります。画像サイズはなるべく小さい方が記事の読み込みが早くなるので閲覧者には優しいはずです。

この記事ではスクリーンキャプチャー(スクリーンショット)のpng画像を小さくする方法をご紹介します。

pngの縦横の長さをリサイズして小さくする

パソコン画面全体のスクリーンキャプチャーを撮るとフルHDサイズのモニタだったら1920×1080ピクセル、高解像度のモニタ例えばRetinaディスプレイなんかだと13インチのMacBook Proで2560 x 1600ピクセル、4K/5Kのモニタならもっと巨大なサイズなので必然的にスクリーンショットを撮影したときのpngサイズも大きくなります。

これをそのままブログに載せると大変なことになるので普通は必要な部分だけ切り抜いて使ったり、png画像全体の縦横比を維持したままリサイズして小さくする方法をとります。

Windowsならキーボードのスクリーンショットキーを押してクリップボードにスクリーンショットを保存した後、ペイントを立ち上げて貼り付け&サイズ変更で簡単に出来ます。

ただこういった実際の縦横の長さを小さくする場合元が巨大なものを極端に小さくすると、画像が潰れてしまって画像上のテキストなどが判別不可能になったり、極端に小さくした画像を高解像度のモニタ、たとえばRetinaディスプレイなどで見てみると画像がぼやけて表示されたりします。

お使いのブログのテンプレートがレスポンシブデザイン対応であるならば、ブログに載せる画像の縦横サイズは極端に小さくする必要は無いと思います。

実際の縦横サイズではなくpngを減色&圧縮してサイズを削減する方法

一概にpng画像といってもpng-8, png-24, png-32と3種類ありまして、それぞれ使える色数などが違います。png-8は256色しか使えませんが、ファイルサイズが一番小さくなります。iPhoneなどのモバイル端末のスクリーンショットを撮ったときのpngはpng-24で1677万色の色が扱えますがそのぶんファイルサイズが大きくなります。

見た目がきれいだがファイルサイズが大きいpng-24のスクリーンキャプチャー画像を減色してpng-8相当にまで落とすとファイルサイズが大幅に縮小されるのでブログに最適な画像が出来ます。いくらサイズが小さくなるからといってそんなに減色して見た目がおかしくならないのか?と疑問を持たれるかもしれませんが、スクリーンショットをブログに掲載するという目的であればガッツリ減色ツールを使って減色しても見た目はそんなに変わりません。もし見た目がちょっとおかしくなったと思うのであれば、微調整も可能なのでやる前からそんなに神経質になる事もありませんよ。

この減色&圧縮ツールですが、専用Webサイト上に画像をアップロードしてから減色&圧縮するタイプのものと、ツールをダウンロードしてローカルで実行できるタイプの2種類あり、ググってもらえばいろいろ見つかるのでお好きなものを使えば良いと思います。Webサイト上で画像を圧縮(減色)してくれるサイトで有名なのはTinyPNGですね。Webサービスを利用すればWindowsやMac問わずブラウザさえあれば圧縮(減色)可能なので便利なのは間違いないです。個人的にはローカルで全て済んでしまうツールをDL&インストールして使うことが多いです。

Windowsでは


WindowsではPngyuというソフトを使ってます。公式サイトからzipファイルをダウンロードしてきて解凍したらフォルダが出来ると思います、その中に実行ファイルがあるので使う度にその実行ファイルをダブルクリックで実行してください。パソコンにインストールするタイプのものではないので・・・不要になればそのフォルダごとゴミ箱に捨てればOKです。

普段使う時は解凍したフォルダの実行ファイルだけダブルクリックして起動してからつかいますので、解凍したフォルダがデスクトップなど目の着く場所にあると少し邪魔に感じます。頻繁に使う人は解凍したフォルダをどっか別の場所、例えばドキュメントフォルダとか目立たない場所に移動させておいて、フォルダの中の実行ファイルのショートカットをデスクトップやらスタートメニューやらタスクバーに置いておけば便利かもしれません。

使い方は簡単で、「Drop here」と書かれた枠内に圧縮したい(減色したい)png画像をドラッグアンドドロップしてCompress Startを押せばOK。初期設定では減色して圧縮された画像ファイルで元ファイルが上書きされるのでその辺は注意しよう。

Macでは

MacではImageAlphaというpng画像を減色して圧縮する無料アプリを使っています。ImageAlphaを使うなら一緒にImageOptimもインストールして使うことをオススメします。ImageOptimは画像の余分なメタデータ(たとえば位置情報など)を削除してくれるアプリで、作者はImageAlphaと同じ人です。

ImageAlphaとImageOptim両方をインストールしたら、サイズを小さくしたいpng画像上で右クリックしてImageAlphaを選びます。


減色後のプレビューが表示されます。極端に画像が劣化してるようなら設定を微調整すれば良いですがほとんどの場合設定を弄る必要は無くデフォルトのままでOKです。左下にどれくらい縮小出来るか目安が表示されてます。元画像の69%小さく出来るので・・・かなりの効果ですよね?「Commandキー + Shiftキー + Sキー」で処理を開始します。


元画像に圧縮後の画像を上書き保存したくない場合は、名前を別名に変更しておきます。ImageOptimをインストールしていれば「Optimize with ImageOptim」にデフォルトでチェックが入ってます。ImageAlphaで処理が完了後に自動的にImageOptimで処理が開始されるのでそのままチェックを入れた状態で「保存」を押しましょう。


1つ前のステップで名前を変更してない場合は上書き保存しますよと言う警告が出ますが、元画像が無くなっても問題ない場合はそのまま「置き換え」を押します。


ImageAlphaでの処理が終わったらImageOptimの処理が開始します。メタデータの削除が終わったら緑色のチェックマークがつくので、そしたら全ての処理が完了です。あとは出来上がった縮小後の画像をブログに利用すればOKです♪

Google謹製のWebアプリ「Squoosh」で画像の容量を削減する

2018年11月にGoogleがブラウザ上で手軽に画像の圧縮が行えるSquooshというWebアプリを発表した。サーバーに画像を送らずローカルで圧縮処理をしていてGoogle製のWebアプリということで、簡単に安心して使えそうです。オプションを選べばリアルタイムで画像の劣化具合が確認できるところが素晴らしいです。今のところ欠点と言えば複数画像をまとめて処理できないところだけでしょうか?スマホからでも使えるので、文章はスマホで書けるけど画像の軽量化処理はパソコン開かないとなぁという悩みが一つ減りそうです。

使い方は簡単でSquooshのWebサイトを開いて、圧縮したい画像ファイルをドラッグアンドドロップすれば処理が開始します。


「Resize」で画像自体の縦横の長さをリサイズ出来ます。ただリサイズを行うとそれに伴い画像が非可逆的に劣化するので、とくに高解像度のモニター(Retinaディスプレイなど)では画像がぼやけることに注意してください。リアルタイムで画像の劣化具合を確認しながらリサイズは程々に。

「Reduce palette」で減色処理が出来ます。デフォルトでは256ですが、これを減らせば画像サイズは縮小しますがそれに伴い画像が劣化します。リアルタイムで画像の劣化具合を確認しながらほどほどに。減色処理をしても思いのほか画像サイズは小さくならないので無理に減色する必要はないかも。

画像の圧縮技術、保存形式のデフォルトはMozJPEGです。難しいこと考えずに、ふだん使いならこのままでいいでしょう。pngの容量を削減するためにSquooshをMozJPEGで使えば圧縮後の画像はjpgで出来上がります。

画像のサイズが一番小さくなるのはWebPという圧縮技術&保存形式ですが、これはSafariに未対応だったりするのでまだ使いどころが難しいです。圧縮後の画像がjpgになるのが嫌という場合にはOptiPNGを選んで多少減色処理を施せばまぁまぁのpngが出来上がります。(MozJPEGほど画像サイズ縮小効果は低いですが)

WebP画像対応、未対応ブラウザで画像を出し分けるには

WebP画像についてもっと知りたい人は以下の記事参照

-今話題の記事を読んで気になった- 「WebP画像形式」とは?? – Qiita

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近の投稿

おすすめ

タグクラウド

カテゴリー