FAEVIA · COLUMN
写真をページ上で小さく表示しても、読み込みが軽くなるとは限りません。画面に見える大きさと、写真ファイルのデータ量は別だからです。ホームページ用の写真は、載せる場所に合う縦横の大きさと、十分にきれいに見える画質に整えて使います。
作成：株式会社P&Me／FAEVIA · 公開：
「横4000px・縦3000px」は、写真を構成する点の数で表した縦横の大きさです。pxは「ピクセル」と読みます。一方、「3MB」「250KB」などはデータの量を表します。こちらがファイルの容量です。
たとえば、横4000pxの写真をページ上で小さく表示しても、元の写真ファイルがそのまま使われていれば、容量は変わりません。写真の読み込みを軽くするには、画面上の大きさだけでなく、写真ファイル自体を小さくする作業が必要になります。
元の写真は残し、編集用のコピーを作ります。元を残しておけば、加工でぼやけたり、必要な部分を切ってしまったりしても、やり直せます。
写真の一部分だけを残す操作を「切り抜き」といいます。縦長の店内写真を横長の枠へ入れるなら、店の雰囲気が分かる範囲を選んで切り抜きます。縦横を別々に引き伸ばして横長にすると、テーブルや人の形がゆがむので避けましょう。
まず元画像をコピーし、必要な被写体を残して3000×3000pxに切り抜きます。元が横4000pxなので、左右で合計1000px分が切れます。中央にそろえる必要はなく、被写体の位置に合わせて残す範囲を選びます。
次に、登録先が1500×1500pxを指定している場合は、その寸法へ縮小します。この1500pxは例であり、すべてのサイトの推奨値ではありません。指定がなければ、表示枠に必要な寸法を制作者へ聞きます。
保存後に画像情報を開き、縦横が1500×1500pxになったか、容量が何KBかを記録します。画像の寸法とファイル容量をそれぞれ確認し、最後にページ上で元の画像と見比べます。
切り抜いた後は、必要に応じて縦横を小さくします。この操作が「縮小」です。画像の登録画面に推奨サイズがあれば、その案内を目安にします。縦横の比率を保ったまま縮小し、別の名前で保存してください。
保存時に選ぶJPEGやPNGなどは、画像の保存形式です。ファイル名の末尾にある.jpgや.pngは「拡張子」と呼ばれ、形式を見分ける手がかりになります。
| 形式 | どんなときに使うか |
|---|---|
| JPEG | 料理や店内などの写真によく使います。容量を減らしすぎると、輪郭や細かな模様が粗くなることがあります。背景を透明にはできません。 |
| PNG | 背景を透明にしたい画像や、文字を含む図などに使います。写真を保存すると容量が大きくなる場合があります。 |
| WebP・AVIF | 写真などの容量を抑えやすい形式です。画像編集アプリで保存できるか、使っているホームページへ登録できるかを先に見ます。 |
| SVG | 線や図形で描いたロゴやマークなどに使います。写真は、保存形式をSVGに変えるだけで、画質を保ちながら容量を減らせるわけではありません。 |
保存時に品質を選べるアプリなら、少し品質を下げた画像を別名で作り、元の画像と見比べられます。使うホームページに登録できる形式の中で、見た目と容量の両方を調整します。
店内写真なら雰囲気、料理の写真なら表面の質感、案内図なら文字。その画像で伝えたいものが見えるかどうかが、加工の目安になります。公開前のページに画像を入れ、パソコンとスマートフォンで実際の表示を比べます。
ぼやけていたり文字が読めなかったりしたら、元画像からもう少し大きな寸法や高い品質で保存し直します。同じ場所に表示した候補を比べ、必要な情報が見える画像の中から、容量の小さいものを選びます。小さな顔写真と画面いっぱいの店内写真では必要な大きさが違うため、すべてを同じ容量にそろえる必要はありません。
