Macで画面スクリーンショットを撮る方法&画像を圧縮する方法

ブログを書く時などに

解説記事を書いたりする時に、画面のスクリーンショットを撮りたくなることがよくあります。

Windowsであればprint screenキーという、まさにそのままの名前のキーを一発押すだけですが、Macのキーボードにはありません。

そこで今回は1分でわかる、Macでスクリーンショットを撮る方法です。

 

ただし、それだけど尺が足りないので、保存したスクリーンショットを圧縮する方法もご紹介します。

なぜ圧縮するかというと、特にWebページの場合は画像サイズは小さければ小さいほど良いからです。

サイズが小さければページの表示速度があがります。

表示速度の重要性はSEO的にも重要ですし、そもそも見に来てくれた人を待たせたくないですよね。

 

 

スクリーンショットを撮る

Macの場合は、「shift + command + 3」の同時押しで画面全体のスクリーンショットを保存することが出来ます。

押した時に特になんの反応もありませんが、デスクトップに「スクリーンショット 2016-03-16 21.59.20.png」というような形式の名前で保存されています。

スクリーンショット 2016-03-16 22.06.49 (1)

 

画面の一部分だけどを保存したい時もあるでしょう。

全体を保存してトリミングしても良いですが、面倒です。

その場合は、「shift + command + 4」を同時押しします。

するとマウスカーソルが銃の照準のようになるので、左クリックしたまま、保存したい範囲を選択すればOKです。

試しに画面真ん中のイラスト部分だけを保存してみました。

スクリーンショット 2016-03-16 22.04.39

pngを圧縮する

jpegを圧縮してくれるWebサービスは結構たくさんあるのですが、pngに対応しているものはなかなか良い物が見つかりませんでした。

そして今愛用しているのがこのサイトです。

 
TinyPNG – Compress PNG images while preserving transparency

 

同時に複数のファイルを圧縮できますし、圧縮率もかなり高いです。

もちろん画像にもよりますが、今回は60%超も圧縮できました。

スクリーンショット 2016-03-16 22.10.14 (1)

なぜパンダなのかが全くわかりませんが、問題といえばそれくらいです。

 

ここで圧縮前と後の画像を見比べてみましょう。

▼圧縮前 1440 ☓ 900 px    1.4MB

スクリーンショット 2016-03-16 22.06.49

▼圧縮後 1440 ☓ 900px  550KB

スクリーンショット 2016-03-16 22.06.49 (1)

さて、違いがわかるでしょうか?

僕にはわかりません!

であれば、当然圧縮してページ読み込みを早くしたほうが得というものです。

pngに限らず、Webページに載せるデータはなるべく小さくするように心がけましょう。

 

というわけで今回は以上!

 
photo credit: Plugged in | 1/365 via photopin (license)