はじめに：Slack の画像がいつまでも読み込まれない問題

サークルの Slack で「デザインできたので確認お願いします！」と送られてきた画像。
手元でDLして確認しようとすると、やたらと時間がかかる。やっとDLが終わり、ファイルサイズを確認すると10MB。（結構通信量を使ったな…。）とテンションが下がる。

こんなことに心当たりはないでしょうか？ あるいは、あなたがこれをやってしまっていませんか？
今回は、デザインそのもののクオリティではなく、「相手が見やすいデータを渡す」という、チーム制作における必須スキルとしての「画像サイズ」について書きます。

1. そもそも「画像サイズ」の単位は一つじゃない

「サイズを小さくして」と言われた時、あなたはどの数字を減らしますか？
実は「サイズ」には 4 つの単位があり、これらを混同しているとトラブルの元になります。

① px（ピクセル） 画面上での点（画素）の数

画像を構成する「点（ドット）」の数。縦横にいくつ点が並んでいるか（例：1920×1080px）。

Webやアプリなど、モニターで見るものは、すべてこの「px」が基準。大きすぎると画面からはみ出したり、縮小処理されて画質が下がったりします。

② mm / cm（ミリ・センチ）

実際に印刷された時の物理的な大きさ。フライヤーや冊子など、印刷物を作る際にはこのサイズが基準になります。

またSlackなどデジタルデータで見た目をレビューする際に、「A4サイズで作ったデータ」を何も考えずに書き出すと、px数が巨大になってしまう原因になります。

③ dpi / ppi（解像度）

「1インチ（約2.54cm）の中に、どれだけ点（px）が詰まっているか」という密度。

上記の① px（ピクセル）と② mm / cm（ミリ・センチ）から計算できます。印刷物（基本300dpi～）やモニター（基本72dpi～）など媒体ごとに適切なサイズが決まっています。

dpiが小さすぎると画像が粗くなったり、ぼやけたりすることがある一方、大きすぎると画像の劣化や処理落ちのリスクがあります。

④ MB / KB（ファイルサイズ）

データの容量。PCやスマホのストレージを食う量。また通信量が大きくなり、データの送受信も遅くなります。

PNG, JPEG, PDFなどファイル形式や圧縮率によってもファイルサイズは変化します。
なるべく小さい方が良いと認識しましょう。

高音質な音楽ファイルでも10MB前後のサイズが一般的で、WEB上の画像では1MBを下回ることが一般的です。

2. 適切なサイズを選ばなかった時のトラブル

「大は小を兼ねる」で、とりあえず最高画質で送っておけばいいのでは？と思うかもしれません。しかし、Slack等でのレビューやWEB・アプリでの利用においては百害あって一利なしです。

よくあるトラブル

• 画像が開かない・遅い
  • 特にWEBではGoogleなど検索エンジンからの評価が下がる原因にもなります
• スマホの通信容量を圧迫する

3. 【実践】投稿する前の「ダイエット」手順

ここまでで、画像の「サイズ」が何を指しているのか、またサイズが大きければ良いというわけではないことが分かったと思います。

ここからは具体的に、適切な画像サイズに縮小する方法をガイドします。目指すは「サッと開けて、パッと全体が見える」画像です。

1. px数を「モニターサイズ」に落とす

印刷用のA1ポスターを作っている場合でも、画面で確認してもらう段階なら、実寸のpx数は不要です。

目安： 長辺を1000px 〜 2000px程度に設定しましょう。一般的なノートPCの画面幅は1920px（フルHD）程度です。
これより大きい画像は、縮小表示されるだけなので無意味です。

2. 用途に合わせてファイル形式（コーデック）を選ぶ

前述の通り、ファイル形式によってファイルサイズは大きく変化します。
ファイル形式を変えるだけで、画質そのままで容量が半分以下になることもあります。

例えば、下記のような写真（元は4490x3367pxとかなりpx数が大きい）を
PNGで書き出すと70.2MBとファイルサイズが超巨大になります。
これをJPEG（品質: 92）に変換したところ、ファイルサイズは2.2MBまで縮小できました。¹

• 写真・グラデーションが多い場合（ポスター、バナーなど）
  • 推奨：JPEG (JPG)
    写真の圧縮が得意です。「高画質（画質 80〜90 程度）」の設定にすれば、ノイズも目立たず劇的に軽くなります。
• 色数が少ない・線がはっきりしている場合（ロゴ、UI、図解）
  • 推奨：PNG
    ベタ塗りや文字をきれいに保存できます。ただし、写真メインのデザインを PNG にすると容量が爆増するので注意してください。

近年ではWebPやHEIFといった新たなコーデックも開発されており、特にWebPはWeb上などで見かける機会が増えています。
これら新たな圧縮方式はJPEGやPNGに比べて、同じ画質でも大きくファイルサイズを低減できるので機会があれば試してみてください。

3. 圧縮品質（クオリティ）を調整する

Photoshop などで書き出す際、「画質：最高（100）」にする癖がついていませんか？レビュー用なら、画質は 「高（80）」で十分です。

人間の目ではパッと見違いがわかりませんが、データ容量（MB）は半分以下になることもあります。

【目標数値】Slackに貼る画像は、1枚あたり 500KB 〜 2MB 以下 を目指しましょう。

おわりに：サイズ選びは「思いやり」

デザインの現場では、様々な用途で使う画像を作成します。それぞれの用途で適切な画像サイズは異なります。
WEBやアプリで表示する画像は適度なpxでなるべく小さな容量を目指す。
印刷物では印刷所の示しているdpiを満たすサイズで入稿する。

データ作成の場面でもユーザーフォーカスで考えることが重要です。