知らないと損、ホームページに掲載する画像の容量を抑える方法

ホームページに掲載する写真画像、何も考えずに掲載していませんか？

実は次のような影響がでることがあります。

地理も積もれば…と言うように、日頃の心がけが後々影響が出ますので
できるだけ画像の容量を小さくする意識を持つことが大切です。

そこで、今回は画像の容量を抑える方法をご紹介します。

画像作成でやってはいけないこと

スマホで撮影した写真をそのままアップ

スマホで撮った写真の設定が大きい場合(デフォルトのまま)をそのままブログにアップすると、ホームページを見る方に大きな負荷をかけることになります。

なぜなら、スマホで撮った写真は1枚あたり2-3MBの容量があるからです。

これを1ページあたり10枚使うとしたら20-30MB。ユーザーに負荷がかかるだけでなく、表示速度も遅くなるために検索エンジンからも嫌われます。サーバーの容量もすぐいっぱいになります。

必要以上のサイズでアップする

ブログの場合はコンテンツ幅に合わせて画像を作ることが多いですが、必要以上に縦に長い画像をアップすればそれだけ容量も大きくなるものです。

その点も考慮し、必要最低限のサイズにリサイズする必要があります。

画像のサイズについて

画像のサイズは「画像の大きさ（表示サイズ）」と「画像のファイルサイズ」の2つに分けられます。

表示サイズは、ブラウザ上で表示される画像のサイズです。

ファイルサイズは、画像の画質や解像度などの要素によって決まる画像の容量です。

ホームページで使う画像のファイルサイズは、200KB以下が目安です。

ホームページで使う画像サイズは以下の通りです。

画像サイズできるツールの紹介

WordPressにもサイズ変更や圧縮ができるプラグインがありますが、

画像を複数枚書き出されるなどサーバー容量が圧迫される事やプラグインの脆弱性の危険性もあるため、簡単ではありますが、安易にプラグインに頼ることはオススメしていません。

※弊社ではなるべくプラグインを使わないでホームページが運用できるようにしています。

画像変更と圧縮が1箇所でできるCanvaがおすすめ

Canvaでは、縦横(アスペクト比)が16×9、4×3、1×1それぞれ加工ができますし、書き出しには圧縮も可能です。1つで完結しますので、是非こちらをご利用ください。

※有料プランのみ圧縮が可能です。

画像の保存拡張子について

画像には「.jpeg」「.jpg」「.png」の拡張子が多く使われます。

それぞれの特徴に合わせて保存するようにしましょう。

「.jpeg」「.jpg」は、画像データを低用量・高画質で保存できます。写真などの画像を保存するのに適しています。

「.png」イラストなどの塗りつぶしの多い画像に適しています。

最近は「SVG」「.webp」もありますが、お客様のブラウザによって見えない事もあるようですので、現時点では利用しないでOKです。

Canvaが無料版、圧縮が出来ない場合の方法

最適なファイルサイズは「200KB以下」

画像圧縮オンラインツールを使います。ドラッグ＆ドロップだけで使えるので便利です。

Tiny PNG　　https://tinypng.com/

jpgとpngに対応。

COMPRESS JPEG　https://compressjpeg.com/ja/

PEGのみ対応。

Squoosh　https://squoosh.app/

Squooshは、Googleが提供する無料の画像圧縮サービスです。ビフォーアフターの確認と微調整ができるので便利です。

まとめ

画像の容量を抑えるには、以下の方法があります。

• スマホの保存設定を小さいサイズにする
• 画像変更・圧縮サイトを使う

■なるべく費用をかけたくない方
Canva無料版で画像サイズを変更した後、ダウンロードした画像を圧縮サイトで画像を圧縮します。

■簡単にさっさとやりたい方
Canvaの有料版を利用するとサイズ変更、圧縮まで1つでできます。

表示速度に悪影響を及ぼさないように、少しでも容量を軽くするように心がけましょう！