サイトやブログに載せる画像を、軽くて綺麗に整える
大きさ・形式・容量の3つを決めれば、表示が速くなり見た目も崩れません
更新日：
撮ったままの写真は、Webには大きすぎる
いまのスマートフォンの写真は、横6,000ピクセルを超えることがあります。画面に表示されるのはせいぜい1,200ピクセル程度なので、残りは読み込みを遅くするだけです。
表示が遅いページは、読む前に閉じられます。見た目を保ったまま小さくするのが、いちばん効く手当てです。
横幅を決める
本文の中に置く写真なら横1,200ピクセル、画面いっぱいに広げる写真なら1,920ピクセルが目安です。画像をリサイズで長辺を指定して縮めてください。
表示される幅の2倍まで用意しておくと、画面の細かい端末でもぼやけません。それ以上は、容量が増えるだけで見た目は変わりません。
容量を落とす
縮めたあと、画像を圧縮で画質を少し落とすと、さらに半分ほどになります。写真なら1枚200KB以下、図やイラストなら100KB以下を目安にしてください。
下見を見ながら決められるので、顔の肌や細かい文字が荒れていないかを確かめてから保存できます。
形式を選ぶ
写真はJPG、透明な部分のある図はPNGが基本です。より軽くしたいときはJPGをWebPに変換でWebPにすると、同じ見た目で2〜3割小さくなります。
WebPはいまの主要な閲覧ソフトで表示できます。ごく古い環境向けに、元のJPGも残しておくと安全です。
SNSに出す画像は、別に用意する
記事のリンクを共有したときに出る画像は、縦横の比が決まっています。投稿サイズに合わせるで投稿先に合わせた大きさに整えると、端が切れません。
文字を入れる場合は、中央寄りに置いてください。表示のされ方によって、周囲が切り取られることがあります。
ファイル名と説明文も整える
ファイル名は英数字で、内容が分かる言葉にしてください。「IMG_1234.jpg」より「white-ceramic-mug.jpg」のほうが、探すときにも検索にも役立ちます。
載せるときは、画像の説明文（代替テキスト）を必ず書いてください。読み上げで使われ、画像が表示できない環境でも内容が伝わります。
撮影情報を落としておく
写真には、撮影した日時や場所が記録されていることがあります。自宅で撮った商品写真をそのまま載せると、場所が分かってしまう場合があります。
当サイトの加工を通すと、これらの情報は引き継がれません。元の写真をそのまま載せる場合は、先に情報を取り除いてください。
差し替えたあとに、実際のページで見直す
軽くした画像は、置き換えたページを開いて、普段使う画面と携帯の画面の両方で確かめてください。縮めすぎた文字や、潰れた細い線は、並べて見て初めて気づきます。
写真の多いページでは、1枚ずつではなく合計の重さで考えます。1枚200KBでも10枚で2MBになります。画質を削る前に、枚数を減らせないかを見るほうが効きます。
よくある質問
- 縮めた画像を、あとから大きく戻せますか？
- 戻せません。縮めた時点で細かい部分が失われます。元の写真は別に残しておいてください。
- WebPとJPG、どちらを選ぶべきですか？
- 軽さを優先するならWebPです。やり取りする相手の環境が分からない場合や、印刷に回す可能性があるならJPGが無難です。
- 何枚もまとめて処理できますか？
- できます。複数の画像を一度に選べば、同じ設定で処理してZIPで受け取れます。
- 画像はどこかへ送られますか？
- 送られません。縮小も圧縮も変換も、お使いのブラウザの中で行います。
この記事で使う道具
記事で紹介しているツールは、すべて登録不要・ブラウザ内で動きます。