スマートフォンやカメラで撮った写真を、そのままホームページにアップロードしていないでしょうか。実は、撮影したままの写真はホームページに載せるには大きすぎることがほとんどです。この記事では、画像の「サイズ」と「容量」の基本と、掲載前に整える方法を解説します。
そのまま載せると何が起きるのか
最近のスマートフォンで撮影した写真は、1枚で数MB(メガバイト)になります。これをそのまま何枚も載せると、ページを開くたびに大量のデータを読み込むことになり、表示が目に見えて遅くなります。
表示の遅さは、見た目以上に影響が大きい問題です。開くのに時間がかかるページは、内容を読む前に離脱されやすくなります。また、検索エンジンもページの表示速度を評価の要素としているため、検索結果での不利にもつながりかねません。さらに、大きな画像を積み重ねていくと、サーバーの容量を圧迫していきます。
スマートフォンで見ている人への影響も見逃せません。容量の大きなページは、閲覧する側の通信量を消費させます。通信量に上限のある契約で見ている人にとって、重いホームページは負担をかける存在になってしまいます。せっかく良い写真を用意しても、表示される前に閉じられてしまっては意味がありません。「軽さ」は、写真の質と同じくらい大切な要素なのです。
「サイズ」と「容量」は別のものです
画像を整えるうえで、まず区別したいのが「サイズ」と「容量」です。サイズとは、画像の縦横の大きさのことで、ピクセルという単位で表します。撮影したままの写真は、横4,000ピクセルといった大きさがあります。一方、一般的なホームページで表示に使われる幅は、大きくてもその半分以下で足りることがほとんどです。
容量とは、画像データそのものの重さのことで、KB(キロバイト)やMBで表します。サイズを小さくすれば容量も減りますが、それに加えて、画質を保ちながらデータを軽くする「圧縮」という処理でも容量を減らせます。この2つを組み合わせるのが、画像を整える基本です。
あわせて知っておきたいのが画像の形式です。写真はJPEG(ジェイペグ)、ロゴや図はPNG(ピング)が定番で、近年はどちらの用途でもより軽くできるWebP(ウェッピー)という形式も広く使われています。まずは「写真はJPEG」と覚えておけば十分です。
整え方の基本手順
手順は2段階です。まず、縦横のサイズを掲載する場所に合わせて縮小します(リサイズと呼びます)。記事内に載せる写真なら、横1,200ピクセル程度まで縮めれば十分な場合が多いです。パソコンに入っている標準の画像編集機能や、スマートフォンの写真アプリでも縮小はできます。
次に、圧縮を行います。ブラウザ上で使える無料の画像圧縮サービスに画像を載せるだけで、見た目をほとんど変えずに容量を大きく減らせます。目安として、記事内の写真は1枚あたり200〜300KB程度まで軽くできると理想的です。枚数が多い場合は、複数の画像をまとめて圧縮できるサービスを使えば、1枚ずつ処理する手間を省けます。なお、WordPressなど一部の仕組みには、アップロード時に自動で縮小・変換してくれるものもあります。自社のホームページがどうなっているかは、一度確認しておくとよいでしょう。
細かなことですが、ファイル名を内容の分かる英数字(例として shop-gaikan.jpg のような形)にしておくと、あとから画像を探しやすく、管理も楽になります。
動画の場合の考え方
動画は写真よりさらに容量が大きく、数分の動画が数百MBになることも珍しくありません。動画ファイルをサーバーに直接アップロードするのは、短い演出用の動画にとどめるのが基本です。
内容を見てもらうための動画は、YouTubeなどの動画サービスにアップロードし、ホームページには埋め込みで表示する方法が適しています。この使い分けについては、別の記事で詳しく解説しています。
また、撮影したままの動画データは容量が非常に大きいため、サーバーではなく、手元のパソコンや外付けの記録装置、クラウドの保管サービスなどに保存しておきましょう。サーバーは「公開する場所」であって「保管する場所」ではない、と分けて考えるのがコツです。
まとめ
撮影したままの写真は、ホームページには大きすぎます。掲載前に、サイズの縮小と圧縮という2つの手順で整える習慣をつけるだけで、表示速度とサーバー容量の両方を守れます。まずは、今のホームページで大きな画像をそのまま載せているページがないか、点検するところから始めてみてください。表示が遅いと感じているなら、画像の整理が改善の近道になることも多いはずです。小さな習慣の積み重ねが、快適に見られるホームページを支えてくれます。
