サイトの画像が重い！簡単3ステップで軽くする方法【SEOにも効果的】

Webサイトの画像の読み込みが遅いと、SEOにも悪影響を及ぼします！

適切に画像を処理しておくことで、表示スピードを高めることができます。今回は簡単にできる３つの方法、

• リサイズ
• 画像形式の変換
• 圧縮

を紹介するので、ぜひ試してみてください！

サイトに使う画像は必要以上に大きい場合が多く、これが読み込み速度を遅くする原因になります。画像編集ツールを使って適切なサイズにリサイズしましょう。

画像のリサイズは「iLoveIMG」というオンラインツールが便利です。複数の画像を一気に指定したサイズにリサイズできます。

用途や表示箇所によって適切なサイズは異なりますが、一般的な目安は

• ファーストビューの画像：横幅1600〜1920px 程度
• ブログ・記事内の画像：横幅600〜1200px程度
• サムネイルやアイコン画像：横幅100〜300px程度

です。容量は、大きな画像（1920px）なら500KB以下に収め、小さい画像なら100KB以下を目標にしましょう。

また、高解像のディスプレイ向けには、表示サイズの約2倍の解像度で画像を作成し、CSSで縮小表示させるのが推奨されています。

例えば表示したい画像が幅400px × 高さ200pxの場合、実際の画像サイズは幅800px × 高さ400pxで作成します。これで高解像度ディスプレイでも鮮明に表示できます！

画像形式をWebP（ウェッピー）に変更すると、画質を大きく落とさずにファイル容量を減らすことができます。

• サルワカの道具箱「WebP画像に変換」
• FreeConvert

これらのオンラインツールを使って、複数の画像を一括でWebPに変換できます。

もともとJPEGがPNGよりも軽い画像形式として知られていましたが、最近、JPEGよりも軽い画像形式として「WebP」が登場しました。PNGにしかできなかった背景の透過もできる、優れた画像形式です。

ほとんどのブラウザに対応しているので、特別な事情がなければWebPを使用するのがおすすめです。

まだ画像の読み込みが遅い時は、画像の圧縮を試してみましょう。WebPは、次のサイトで簡単に圧縮することができます。

• BabyPNG
• Compress.com

圧縮することで画質は落ちますが、既定の設定であれば（設定をいじらなければ）人間の目にはわからないレベルです。圧縮の度合いを高く設定することで画像サイズをより下げられます。

WebP以外の拡張子、JPEGやPNGなども、オンラインツールで簡単に圧縮できます。「JPEG 圧縮」などと検索すると出てくるので、必要であれば使ってみてください。

「Squoosh」はGoogleが開発したオンライン画像編集ツールです。

複数の画像を一括で編集することはできませんが、これまでに紹介した「リサイズ」「画像形式変換」「圧縮」を1回でまとめて行えます。

表示は英語ですが、操作は簡単なので誰でも使えます。まずは圧縮したいファイルを選択しましょう。

選択したら、このような操作画面が出てきます。右下のボックスから、リサイズ、形式変更、圧縮を行えます。

「Quality（品質）」は、数字を下げるほど圧縮されますが、画質は荒くなります。シークバーを動かしながら、許容できる範囲で調整してください。

リサイズのスイッチをONにすると、このような画面になります。

比率指定または、幅か高さを個別指定することでリサイズできます。

幅か高さを指定すると、比率に応じて自動的にもう片方が設定されます。比率を固定しないで、幅と高さを別々に指定したい場合は、「Maintain aspect ratio」のチェックを外してください。

Webサイトの画像が重たい場合は、

• リサイズ
• 画像形式の変換
• 圧縮

この３ステップを上から順に試してください！

リサイズとWebP化はサイトの品質に影響を及ぼさないので、普段から意識的に行っておくことをおすすめします！

画像以外にもサイトパフォーマンスを上げる方法はあるので、他の方法も試したい方はこちらの記事をご覧ください！

Webサイトの読み込みが遅い！簡単にできる対処法まとめ【サイト高速化ガイド】