ホームページに載せる画像を軽くしよう！画像サイズを小さくする方法とWebP変換のすすめ

ホームページに写真を掲載するとき、スマートフォンやデジタルカメラで撮影した画像を、そのままWordPressへアップロードしていませんか？

最近のスマートフォンで撮影した写真はとても高画質ですが、その分、画像のサイズやデータ容量も大きくなっています。

大きな画像を何枚も掲載すると、ページの表示に時間がかかり、ホームページを訪れた方が「なかなか表示されない」と感じてしまうことがあります。

今回は、WordPressへ画像をアップロードする前にできる、簡単な画像軽量化の方法をご紹介します。

画像が大きいと、ホームページの表示が遅くなることも

スマートフォンで撮影した写真は、横幅が4,000pxを超え、1枚あたりの容量が数MBになることもあります。

しかし、ホームページ上で画像が実際に表示される大きさは、そこまで大きくない場合がほとんどです。

たとえば、ホームページ上では横幅1,200px程度で表示される画像に、横幅4,000pxの写真を使用しても、見た目に大きな違いが出ないことがあります。

必要以上に大きな画像を使用すると、次のような影響が出る可能性があります。

・ページの読み込みに時間がかかる
・スマートフォンの通信量が増える
・画像が表示される前にページを閉じられてしまう
・ホームページ全体の表示速度に影響する

また、大きな画像をアップし続けると、サーバーの保存容量も圧迫します。

容量がいっぱいになると、新しい画像をアップロードできなくなったり、ホームページの更新やバックアップが正常に行えなくなったりすることもあります。場合によっては、サイトの表示に不具合が起こる可能性もあります。

Googleでは、ページの読み込み速度や操作のしやすさなどを含む「Core Web Vitals」を、ユーザー体験を測るための指標として案内しています。

表示速度だけで検索順位が決まるわけではありませんが、訪問者が快適に閲覧できるホームページをつくるうえで、画像の軽量化は大切なポイントです。

画像はWordPressへアップロードする前に、ホームページ上で使用する大きさに合わせて縮小し、容量を軽くしておきましょう。

WordPressへアップロードする前に行いたい2つのこと

画像をホームページへ掲載するときは、次の2つを行うだけでも、データ容量を小さくできる場合があります。

1．画像の縦横サイズを小さくする

まずは、画像の横幅や縦幅を、ホームページで使用する大きさに合わせて縮小します。

たとえば、スマートフォンで撮影した写真が次のようなサイズだったとします。

横幅：4,000px
縦幅：3,000px
容量：5MB

この画像をホームページ上で横幅1,200px程度しか表示しないのであれば、アップロード前に横幅を1,200px程度まで縮小します。

画像の縦横サイズを小さくするだけでも、容量を大きく減らせることがあります。

画像サイズの目安

ホームページの仕様によって適切なサイズは異なりますが、一般的な目安は次のとおりです。

メインビジュアルなどの大きな画像
横幅1,920px程度

ページ内に掲載する大きめの写真
横幅1,200pxから1,600px程度

ブログ記事内の写真
横幅800pxから1,200px程度

サムネイルや一覧用の小さな画像
横幅600pxから800px程度

ただし、画像が表示される場所やホームページのデザインによって必要なサイズは変わります。

大きく表示する画像を小さくしすぎると、ぼやけて見えることもあるため、実際の表示サイズに合わせて調整することが大切です。

Windowsで画像サイズを変更する方法

Windowsの場合は、標準で入っている「ペイント」を使って画像サイズを変更できます。

1．サイズを変更したい画像を右クリックします。
2．「プログラムから開く」から「ペイント」を選びます。
3．上部にある「サイズ変更」をクリックします。
4．「ピクセル」を選択します。
5．横幅に変更したい数値を入力します。
6．「縦横比を維持する」にチェックが入っていることを確認します。
7．「名前を付けて保存」で別の画像として保存します。

元の画像を残しておきたい場合は、上書き保存ではなく「名前を付けて保存」を選びましょう。

画像をWebP形式に変換する

画像のサイズを変更した後は、画像形式を「WebP」に変換する方法もおすすめです。

WebPとは、ホームページで使用される画像形式の一つです。

一般的によく使われるJPGやPNGと比べて、見た目の品質を保ちながら、画像の容量を小さくできることがあります。

たとえば、元の画像が5MBあった場合でも、

・画像の横幅を1,200pxに縮小する
・WebP形式へ変換する
・画質を適度に調整する

といった作業を行うことで、数百KB程度まで小さくできる場合があります。

ただし、実際の容量は、写真の内容や色数、画質の設定によって異なります。

無料で使えるおすすめの画像編集ツール

画像の縮小や圧縮、WebPへの変換は、無料のオンラインツールでも行えます。

ここでは、比較的操作が分かりやすい3つのツールをご紹介します。

サルワカのWebP変換ツール

「サルワカのWebP変換ツール」は、JPGやPNGなどの画像を、ブラウザ上で簡単にWebP形式へ変換できる無料ツールです。

複数の画像をまとめて変換でき、変換後はZIP形式で一括ダウンロードすることもできます。難しい設定がなく、画像を選ぶだけで使えるため、初めてWebPへ変換する方にもおすすめです。

また、画像はパソコンやスマートフォンのブラウザ上で処理され、サーバーには送信されない仕組みになっています。

サルワカのWebP変換ツールの使い方

1．サルワカのWebP変換ツールを開きます。
2．「ファイルを追加」をクリックするか、画像を画面へドラッグ＆ドロップします。
3．WebPへの変換が完了するまで待ちます。
4．変換後の画像をダウンロードします。
5．複数の画像を変換した場合は、まとめてダウンロードすることもできます。

操作がシンプルなので、「画像のサイズ変更は済んでいて、WebPへの変換だけを行いたい」という場合に便利です。

なお、このツールは画像形式をWebPへ変換するためのものです。画像の横幅が大きい場合は、先にペイントやiLoveIMGなどでサイズを小さくしてから変換すると、さらに容量を抑えやすくなります。

TinyPNG

TinyPNGは、画像を画面にドラッグするだけで、簡単に容量を圧縮できるツールです。

現在はPNGやJPGだけでなく、WebPやAVIF形式の画像にも対応しています。難しい設定をせず、手軽に画像を軽くしたい場合に便利です。

TinyPNGの基本的な使い方

1．TinyPNGを開きます。
2．圧縮したい画像を画面にドラッグします。
3．圧縮が完了するまで待ちます。
4．圧縮後の画像をダウンロードします。

先にペイントなどで画像サイズを小さくしてから、TinyPNGで圧縮すると分かりやすいでしょう。

iLoveIMG

iLoveIMGは、日本語で操作できる画像編集ツールです。

画像の圧縮だけでなく、サイズ変更、切り抜き、形式変換など、さまざまな機能があります。複数の画像をまとめて処理したい場合にも便利です。

iLoveIMGの基本的な使い方

1．iLoveIMGを開きます。
2．「画像のサイズ変更」や「画像の圧縮」を選びます。
3．編集したい画像を選択します。
4．変更するサイズなどを設定します。
5．処理後の画像をダウンロードします。

日本語の画面で操作したい方や、画像のサイズ変更と圧縮を分けて行いたい方におすすめです。

JPG・PNG・WebPはどう使い分ける？

画像形式にはそれぞれ特徴があります。

JPG

写真や色の多い画像に向いています。

会社案内、施工事例、商品写真、スタッフ写真などに使われることが多い形式です。

PNG

背景を透明にしたい画像や、ロゴ、アイコンなどに向いています。

ただし、写真をPNG形式で保存すると、容量が大きくなることがあります。

WebP

写真、イラスト、透過画像など、幅広い画像に使用できます。

JPGやPNGよりも容量を小さくできることが多いため、ホームページ用の画像として使いやすい形式です。

迷った場合は、写真はWebPまたはJPG、背景を透明にしたいロゴやイラストはWebPまたはPNGを目安にするとよいでしょう。

画像の容量はどのくらいが目安？

画像の種類や表示サイズによって異なりますが、ブログ記事や通常のページ内に掲載する画像であれば、1枚あたり100KBから300KB程度を目安にすると管理しやすくなります。

大きなメインビジュアルなどは、画質を保つために容量が大きくなることもあります。

反対に、容量を小さくすることだけを意識しすぎると、画像がぼやけたり、文字が読みにくくなったりする場合があります。

圧縮後は必ず画像を開き、次の点を確認しましょう。

・写真がぼやけていないか
・文字が読みづらくなっていないか
・色が大きく変わっていないか
・必要な部分が切れていないか

「できるだけ小さくする」のではなく、「きれいに見える範囲で軽くする」ことが大切です。

WordPressへアップロードするときの注意点

画像を軽くした後は、WordPressのメディアライブラリへアップロードします。

その際、ファイル名にも気を付けましょう。

たとえば、次のようなファイル名では、後から画像の内容が分かりにくくなります。

IMG_1234.webp
DSC_5678.webp

可能であれば、画像の内容が分かる名前に変更してからアップロードすることをおすすめします。

例：

company-building.webp
construction-work.webp
staff-interview.webp

また、WordPressの画像設定にある「代替テキスト」には、画像に写っている内容を簡潔に入力します。

例：

株式会社〇〇の本社外観
道路工事を行うスタッフ
社内で打ち合わせをする様子

代替テキストは、画像が表示されなかったときや、音声読み上げ機能を利用している方へ画像の内容を伝えるためにも使われます。

すでにアップロードしている画像はどうする？

すでにWordPressへ多くの画像をアップロードしている場合、画像を削除して入れ直すと、ページ内の表示に影響することがあります。

また、WordPressではアップロードした画像から、複数のサイズの画像が自動で作成されることがあります。

そのため、既存画像をまとめて変更する場合は、作業前にバックアップを取ることをおすすめします。

画像の枚数が多い場合や、どの画像を変更してよいか分からない場合は、無理に削除せず、ホームページの管理会社や制作会社へ相談すると安心です。

まとめ

ホームページの画像は、WordPressへアップロードする前に少し調整するだけで、容量を小さくできることがあります。

基本的な流れは次のとおりです。

1．画像を使用する場所に合わせて縦横サイズを縮小する
2．WebP形式へ変換する
3．画質を確認しながら圧縮する
4．分かりやすいファイル名に変更する
5．WordPressへアップロードする

特に、スマートフォンで撮影した写真をそのまま使用している場合は、画像サイズを見直すだけでも改善につながる可能性があります。

画像の軽量化は、ホームページを訪れた方が快適に閲覧できる環境を整えるための、身近で取り組みやすい方法です。

「どのサイズに変更すればよいか分からない」
「画像が多く、自分で作業するのが難しい」
「ホームページの表示が遅い原因を調べたい」

このようなお悩みがございましたら、お気軽にご相談ください。