kakiro-webカキローウェブ

システム開発情報の紹介サイト

Macのスクリーンショットで取得した画像ファイルのサイズをWebページ用に変更

Macのスクリーンショットで取得した画像ファイルをそのままWebページに使用すると、以下のように実際のサイズより大きくなってしまいます。

これはRetinaディスプレイの解像度が通常の2倍になっていることによるものとなります。

ここでは、Macに付属のプレビューのアプリケーションを使用して、画像ファイルのサイズをWebページ用に実際のサイズに変更する手順を以下に示します。

(1)

プレビューで対象の画像ファイルを開きます。

通常はFinderで画像ファイルをダブルクリックすると、プレビューで開かれるようになっています。

プレビューでは実際のサイズで表示されるようになっています。

(2)

「ツール」メニューから「サイズを調整」を開きます。

(3)

サイズ調整の画面で、以下の設定を行います。

  • サイズを合わせる:「カスタム」を選択します。
  • 幅、高さ:指定方法に「パーセント」を選択します。幅、高さには「100」が設定されている状態になります。
  • 解像度:解像度は変更しません。
  • 縦横比を固定:チェックを入れます。
  • イメージを再サンプル:チェックを入れます。
(4)

幅、高さに「50」を指定して、元の半分のサイズになるようにします。

幅、高さのどちらかを指定すると、もう一方も自動的に同じ値が指定されるようになります。

指定したら「OK」ボタンをクリックします。

(5)

サイズの変更後はプレビューでの表示が小さくなりますが、この画像ファイルをWebページで使用するようにします。

サイズを変更した画像ファイルは、Webページで以下のように実際のサイズで表示されるようになります。

Macのスクリーンショットで取得した画像ファイルのサイズをWebページ用に変更については、以上です。