Macで画像のピクセルサイズを変更する：3つの方法

ブログテンプレートは960 pxのCSS幅でヒーロー画像を表示しますが、デザイン書き出しは2880 pxで届くことがよくあります。読者は余分なピクセルを目にすることはありませんが、ページ読み込みのたびにダウンロードします。圧縮やフォーマット変換の前に、実際の表示サイズに合わせて変更します。

ディスプレイサイズのルール

高DPIスクリーンには、モニターやカメラの生データサイズではなく、CSS幅の約2倍で書き出します。ピクセル寸法とDPIメタデータは異なります。72または300 DPIでタグ付けされた幅1920 pxの画像でも、レイアウトがピクセル幅を使用する場合、1920 pxを占有します。

バッチ処理の前に、Figmaのフレーム、CMSテンプレート、またはメールビルダーでフレームを確認します。サイズ決定後のフォーマット選択については、 Macで画像を圧縮する方法 をご覧ください。

方法1: GetCompress

最適な用途: 混合フォルダ、再利用可能な幅、1回のパスでの変換とサイズ変更。

1. GetCompress に画像1つまたはフォルダをドロップします。
2. 最大幅または最大高さを設定します（例：ブログヒーローの場合は1920 px）。
3. CMSがJPEGまたはWebPを期待している場合、出力フォーマットを選択します。
4. 新しい幅でUIスクリーンショットをプレビューし、元のファイルの横に書き出します。
5. 「blog 1920px」などのプリセットを保存し、次回再利用できるようにします。

処理はMac上で行われます。フォルダのバルクワークフローについては、 Macで画像をバッチリサイズする方法 をご覧ください。

方法2: プレビューでサイズ変更

最適な用途: 組み込みツールを使用した1つまたは数個のファイル。

1. プレビューで画像を開きます。
2. ツール → サイズ調整…
3. 幅または高さをピクセル単位で設定します。意図的に切り抜かない限り、縦横比を維持にチェックを入れたままにします。
4. **ファイル → エクスポート…**を選択し、JPEG、PNG、または現在のフォーマットを維持します。
5. 新しいファイルとして保存し、ツール → インスペクタを表示で寸法を確認します。

サイズ変更後にテキストや細い線にズームして確認します。スクリーンショットを表示幅より小さくすると、文字が読めなくなります。

制限: 数十個のファイル間でプリセットが保存されません。

方法3: sipsでバッチ処理

最適な用途: JPEGまたはPNGのフォルダに対するターミナルループ。

mkdir out
for f in *.jpg; do sips -Z 1920 "$f" --out "out/$f"; done

正確な幅（高さはスケール）：

sips --resampleWidth 1920 input.jpg --out output.jpg

制限: PNG、JPEG、HEICが混在するフォルダには、個別のコマンドまたは専用アプリが必要です。オンラインのサイズ変更ツールはアセットをアップロードします。未公開のモックアップの場合は、処理をローカルに保ってください。 オンラインファイル圧縮ツールは安全か をご覧ください。

アスペクト比とアップスケール

JPEGをアップスケールして再圧縮し、より鮮明なディテールを期待しないでください。ファイルに含まれていなかった情報を回復せずに、アーティファクトのみが増加します。

プレビューで十分な場合

新しい幅がレイアウトと既に一致している場合、プレビューは単一アセットの処理を完了できます。

同じ幅が数十個のファイルで返される場合や、同じパスでフォーマット変換も行う場合、GetCompressも役立ちます。プロジェクトのREADMEに選択したピクセル幅を記録し、次の担当者が4000 pxの書き出しを再導入しないようにします。サイズ変更後のWebP納品については、 MacでPNGをWebPに変換 をご覧ください。