おおまめとまめ育児日記

2017年女児出産 育児中の記録 絵日記 料理 もろもろ

ブログ初心者必見!サイト画像圧縮前と圧縮後を比較【表示速度改善】

【スポンサーリンク】

画像圧縮していますか?

皆様はブログの記事を書く時に写真を貼りますか?
文字ばかりのサイトより、写真があった方がやはり見やすいです。
しかし、見やすくするための写真のはずが、その写真のせいで自分のブログやサイトに訪れる人を減らしていたとしたらどうですか?

時間を割いて書いた記事です。
一人でも多くの人に見てもらいたくないですか?

画像を圧縮せず掲載したばかりに、データが膨大になり重くて開かない。
せっかく来てくれた人もそっとページを閉じるでしょう。

知っていました。
知っていたけどやっていませんでした。

なぜなら、画像を圧縮すると画質が落ちると思っていたからです!

時間に余裕が出来たらやろうかなとも思っていました。

あとめんどくさい。(小声)

何も画像圧縮に限ったことではないですが、重要性が分かっていないと後回しになりがちです。
画像圧縮の重要性に気づいた時には修正しないといけない記事が山ほど...なんてことに。
私が画像圧縮の重要性に気づいた時にはすでに90もの記事が画像圧縮していない状態で公開済だったのです。
修正には膨大な時間と労力を無駄にします。
私のように大変な思いをする人が減るように、ブログを始めたばかりの人に、サイト運営に画像圧縮は必要なんだとわかっていただけたらと思います。

圧縮すると画質は落ちる?画像比較

では実際に画像を圧縮するとどれくらい画質が落ちるのか見てみましょう。

圧縮前
ピンク色のつつじ

圧縮済
ピンク色のつつじ

ピンクつつじ圧縮前2.63MB→圧縮後257KB
2.3MB(90%削減)

圧縮前
どら焼き
圧縮済
どら焼き

どらやき圧縮前2MB→圧縮後160KB
1.9MB(93%削減)

圧縮前
食パン
圧縮済
食パン

食パン圧縮前2.08MB→圧縮後207KB
1.8MB(92%削減)

圧縮前と後の画像を見比べて違いは?

いかがでしたか?

圧縮前と圧縮後の画像比較
圧縮前と後の画像の違いは気になるものでしたか?
もちろんアップにすると差が出てきますが、私にはほとんど違いがわかりませんでした。

そして数字でみると本当に驚きます。
今までどれだけサイズの大きい画像を貼っていたのかと...
ちなみに1MB(メガバイト)は1024KB(キロバイト)です。
今のスマホは本当に綺麗な写真が撮れます。
その一方でファイルサイズがどうしても大きくなってしまいます。
私のスマホで撮った写真のほとんどが2MB~7MBでした。
デジカメや一眼レフカメラもそうです。
これがサイトが重くなる大きな原因の1つなのです。
この程度の画質の差でしたら、やはり軽い方が良いですよね。

5/4追記
はてなブログをお使いの方は画像をアップすると自動で1/4位には圧縮されるようです。

画像を圧縮してサイト表示スピードは速くなるか?

確認方法はこちら↓
developers.google.com

自分のサイトのURL(もしくは記事ページURL)を入力するだけで結果がでます。

圧縮前

モバイル→27
パソコン→61

圧縮後

モバイル→32
パソコン→65

こちらの画像を見て頂くとわかりますが、数字が高い方がスピードが速いです。
圧縮前も圧縮後もモバイルが極端にスピードが遅いですね。
スピードテスト速度スコア

スピードテスト結果
スピードテスト結果

色々な項目でサイトスピードをあげる方法を教えてくれるようです。
やはり圧縮前の方が、改善できる項目に画像のことがたくさん並んでいますね・・・。
サイト表示をスピードアップさせる為にいかに画像圧縮が重要かがわかると思います。

スマホで簡単リサイズ

私が使っているアプリをご紹介します。
play.google.com

とてもシンプルで使いやすいです。
しかしアンドロイドのみですかね?
【画像 リサイズ】で調べるとたくさんアプリがあるので使いやすいものを探してみてくださいね。

最後に

ブログサイトを立ちあげるうえで大切な事や勉強しないといけないことは本当たくさんあります。
もっと早くに知りたかった!というようなことが山ほど出てきます。
早めに対応していきたいですね。

サイトやブログを立ち上げるうえで画像の圧縮は大事だと今さらながら気付いたおおまでした。



にほんブログ村 子育てブログへ

【スポンサーリンク】