画像圧縮&リサイズでサイト表示を爆速に。ツール2つで「9.6秒→1.7秒」に改善。

  1. デザイン,WEB開発
  2. 172 view

画像(png,jpeg)をリサイズしてから圧縮する、2つの方法について図解します。オンライン上で加工できるので、ソフトのダウンロードが不要です。

直観的に使用できる無料ツールを使いながら、サイトの表示スピードを上げる方法を紹介します。

このページのアイキャッチ画像を例に進めていきます。

対策前のスコア

AdobeStockからダウンロードした画像です。PHOTOストック系のサイトからダウンロードした画像は非常に高画質なので「リサイズ&圧縮」が前提になります。

Adobeストック

  1. ファイル番号 134568897
  2. 寸法 5760×3840px
  3. データサイズ 8718KB
  4. ファイル形式 JPEG
  5. 作成者 anekoho

WEBサイトでそのまま表示すると何秒かかるか、GOOGLEが提供している無料ツール「PageSpeedInsights」を使って確かめていきます。

使い方は簡単で、以下にURLを入力するだけです。

スピードチェック

右側の「分析ボタン」を押してしばらくすると以下の様に結果が表示されます。

遅い

データサイズが8718KBともなると「速度インデックス:9.6秒」と相当遅いです。そこでWEBサイトに最適な画像サイズにリサイズ(小さく)していきます。

このサイトはTCDのテンプレートで作られていますので、横幅を適当なサイズ「1150px」に縮小します。

画像をリサイズする

縮小には「bulkresizephotos.com」のツールを使用していきます。

リサイズツール

使い方は簡単で「ドラッグ&ドロップ」にリサイズしたい画像を入れるだけ。

リサイズツール詳細

ファイルのサイズや縦横pxで指定できるので自由なサイズに変更可能です。

リサイズすると拡張子「jpg」で自動保存されます(対象画像と同じフォルダにあります)。

画像を圧縮する

次に画像を圧縮していきます。画質はほぼそのままで容量だけ落とす事が可能です。

画像圧縮はオンライン上でかつ無料の、compresspngを使います。

使い方は簡単で、圧縮したい画像を選択してアップロードするだけ。右上もボタンで「JPEG,PNG,PDF」から圧縮したい画像の拡張子種類を選択してください。

画像圧縮

すぐに圧縮が実行されて以下の様にダウンロードできる状態になります。以下では68%圧縮されました。

アップロード後

なお、wordpressの場合、プラグインでアップロード時に圧縮する方法があります。

wordpressのプラグインによる画像圧縮は「一定数から有料」であったり、「あまり圧縮できていない事がある」という事情から個人的には好きではありません。
少しアナログですが、最初に一手間かけてあげると良い仕上がりになると思います。

リサイズ&圧縮の結果

以上、リサイズ(縮小)と圧縮を実行し画像のデータサイズが小さくなりました。
一番下が元画像、上から二番目がリサイズした画像、一番上がリサイズした画像を圧縮した状態です。

4種類

PageSpeedInsightsで改めて速度を計測してみるとスコアが大幅に改善されているのがお判りだと思います。

以上、無料のオンラインツールを使用して画像をリサイズ&圧縮する方法について図解しました。

TAIKI

MIRAI PRESS CEO.スタートアップ企業のマーケティング,補助金申請,コンプライアンス,等お手伝いさせていただいています。このブログは、小さく事業を始める為に必要なWEB開発方法や自分の気づきを発信していきます。誰かの助けになればいいなあ~。

記事一覧

関連記事