画像サイズを小さくする方法

Wordpress
この記事は約5分で読めます。

ブログなどを書いたりするとき用にスマホなりパソコンなりでたくさんのスクリーンキャプチャー(スクリーンショット)をとって画面を画像として保存すると思うのですが、その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です♪

コメント