WEBマスターの手帳 > コンテンツマーケティング > 企業ブログマーケティング > WEBサイトの表示速度高速化で画像圧縮するベストな手順は?サイズ変更が先?それとも圧縮アプリが先?

WEB担当者

2015年3月30日

WEBサイトの表示速度高速化で画像圧縮するベストな手順は?サイズ変更が先?それとも圧縮アプリが先?

IMG_3530-1200x800.jpg
Twitter 1 Facebook Google+ はてブ 1 Pocket チャットワーク Eight Feedly

WEBサイトやブログの表示速度を速くするために色々な施策を講じていると思います。高速化する方法として、画像の容量をできるだけ小さくするために「画像の圧縮」をしている方も多いと思います。

自分も画像の圧縮しているのですが、フッと疑問が頭をよぎりました。画像のサイズを変更してから、圧縮アプリを使う方がいいよね?画像を圧縮してからサイズ変更したほうがいいんじゃない?試してみよう!やってみよう!

スポンサードリンク

2つの手順を比較してみた

という訳で「画像のサイズを変更してから、圧縮アプリを使う」と「画像を圧縮してからサイズ変更する」の2通りのやり方で、どちらの方が最終的な画像の容量が小さくなるのかを比較してみました。

今回、使用する画像はこちら↓(アップロード前に画像サイズ変更も圧縮もしていない画像を貼っています)
使用する画像

テスト1:「画像のサイズを変更してから、圧縮アプリを使う」

サイズ変更も圧縮アプリも使用していない状態での画像の容量です。約291KBありました。
テスト1の元データ

まずは画像のサイズを変更します。(今回はMacのプレビューを使いました)
テスト1の画像サイズ変更

画像サイズ変更後の画像容量は約98KB。かなり小さくなりました。
テスト1の画像サイズ変更

続いて画像圧縮アプリ(ImageOptim)を使って圧縮します。
テスト1を圧縮

ImageOptimのダウンロードページ

圧縮後の画像容量は約86KBと少し小さくなりました。
テスト1の圧縮後

テスト2:「画像を圧縮してからサイズ変更する」

サイズ変更も圧縮アプリも使用していない状態での画像の容量はテスト1と同じ(約291KB)です。
テスト2の元データ

画像圧縮アプリ(ImageOptim)で圧縮します。
テスト2を圧縮

圧縮後の画像容量は約270KBと少し小さくなりまし。
テスト2の圧縮後

次は画像サイズを変更します。
テスト2のサイズを変更

画像サイズ変更後の画像容量は約94KBになりました。
テスト2の画像サイズ変更後

今回は「画像のサイズを変更してから、圧縮アプリを使う」の方が小さくなった

結果は、「画像のサイズを変更してから、圧縮アプリを使う」が86KB、「画像を圧縮してからサイズ変更する」が94KB。

画像のサイズを変更してから、圧縮アプリを使う」の勝利!

ただし!他の画像で同じように試したところ、画像サイズを変更したら逆に画像容量が増えた(?)ので、必ずしも画像のサイズを変更してから、圧縮アプリを使うのが最善ではないかもしれません。

ですが、一般的なやり方は「画像のサイズを変更してから、圧縮アプリを使う」のようなので、僕はこの手順でやっています。

WEBマスターの手帳では、WordPressプラグイン「EWWW Image Optimizer」も使っています。

大量の画像サイズを一気に変更するなら「iMage Tools」

画像サイズを変更するのに、今回は分かりやすいようにプレビューツールを使いましたが、何枚も画像がある場合に一気に画像サイズを変えたい時には「iMage Tools」を使っています。
一気に画像サイズを変えたい時には「iMage Tools」

iMage Tools
カテゴリ: 写真
現在の価格: 無料

どうやらPhotoshopを使って「WEBおよびデバイス用に保存」をするのも有効らしい。毎回、Photoshopを使うのは面倒だから重すぎる画像の時にはPhotoshopを使ってみようかな。

参考:Macの画像圧縮アプリ『ImageOptim』と『JPEGmini』はどちらが良いか? – Moxbit

ただブログを書くと言っても色々と手間ひまかかってます。ただ単に「良い文章」を書いていれば「良いコンテンツ」といことでもないし、画像をたくさん使ったり、動画を沢山貼り付けても表示速度が遅くては本末転倒。

WEBサイトを運営するって言うほど簡単じゃないですね。でもそれも含めて僕は楽しいし大好きなんですけどね。

この記事が良いと思ったらシェアしてください

Pocket

御社のターゲット像を明確にする!ペルソナ作成シート

ペルソナ作成シート

WEBマーケティングで重要なのが「相手は誰?」というターゲット像を明確にすることです。

そこでWEBサイトを訪問する人は誰?企業ブログを訪問する人は誰?SNSで繋がりたい人は誰?これらターゲット像を明確にするための「ペルソナ作成シート」を【無料】で配布しています。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

IMG_3530-1200x800.jpg

この記事に「いいね」と思ったらフォローしてね!


この記事を読んだ方におすすめの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

あなたにオススメの記事

ピックアップ記事一覧

カテゴリー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事