サイト表示速度の改善に悩む人
ブログにiphoneで撮影した写真を載せたいんですが、画像が重くてサイトの表示速度が遅いです。
圧縮ツールを使っても、なかなか軽くになりません。
何か良い方法はないですか?
今回はこんな悩みを解決していきます!
ザッキー
画像が重くてサイトの表示速度が遅いと、離脱に繋がるので改善しておきたいですね!
効果的なのは、適切な画像サイズの選択と圧縮ツールの使用です!
詳しく解説していきますね^ ^
・iphoneで撮影した写真の容量(サイズ)を変更する方法(およそ100KB以下)
・おすすめの画像圧縮ツールの紹介
悲報:iphoneで撮影した写真は容量が大きい
最近だとiphoneでも一眼レフみたいに「ポートレートモード」で背景をボカすのが出来たりと、手軽に綺麗な写真が取れますね。
ザッキー
iphoneのカメラ性能が良すぎて、もう完全にデジカメって使わなくなりましたよねー
カメラ性能が上がって綺麗な写真が取れるようになって良いのですが、1つ注意したいことがあります。
それは…
iphoneで撮影した写真の容量がめっちゃ大きいこと。。
例えばiphone8で撮ったこの画像
なんでもない普通の写真ですが、画像の容量を見てみると…
ザッキー
このようにiphoneで撮影した写真って、だいたい1〜3MBくらいの大容量でかなり重いんです。。
この写真をそのままブログに貼り付けると、サイトの表示速度が遅くなって、読者の離脱に繋がります^^;
表示速度と離脱(直帰率)の関係は以下のデータが分かりやすい
・表示速度が1秒から3秒に落ちると、直帰率は32%上昇
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇
ザッキー
サイトの表示速度が大切な理由が分かりますね!
サイトが表示されるのが遅いと、収益の取りこぼしにも繋がるので要注意です。
ちなみにサイトの表示速度を測るには、googleの公式サービス「PageSpeed Insights」がおすすめ!
あなたのサイトのドメインを入力するだけで、サイトの表示速度がスコアで表示されます!
※無料で使えます
※気に入ったらブックマークしましょう
そして…
サイトの表示速度を速く改善する有効な対策としては、適切な画像サイズの選択と画像の圧縮の2つ!
圧縮方法1:適切な画像サイズの選択(リサイズ)
まずは適切な画像サイズの選択について。
実はiphoneで撮った写真の情報を見てみると、ピクセルが大きいことが分かります。
写真のサイズ変更は以下の部分をクリック
すると写真のピクセル(サイズ)が表示されます(赤枠内)。
ピクセルが大きい方が綺麗な画像が表示は出来ますが、正直ブログに載せるくらいだと、ここまで大きなピクセル数じゃなくても問題なし!
ザッキー
正直、ピクセル数を下げても分かりません 笑
引き伸ばして大きなサイズで印刷したい場合は、ピクセルが大きい方が良いですね♪
後は写真の赤枠内の数値をお好みのサイズに調整すればOKです!
試しに以下のように変更
・幅4032px→880px
・高さ3024px→660px
すると画像の容量は…
1.9MB→171KB
ザッキー
おーこれだけで、めっちゃ画像の容量が軽くなりましたね♪
ちなみにリサイズ前後の比較がこちら
ザッキー
多少違うかなと思いますが、正直あまり分かりませんね!
大きな影響はなさそうです!
画像のサイズをあなたのサイトの横幅いっぱいに合わせたい場合は、以下のサイトを参考に横幅のサイズをチェックして下さい^ ^
方法2:おすすめ圧縮ツール
ピクセル数を調整し、適切な画像サイズにリサイズすることで大きく容量を減らせて、画像を軽く出来ました。
しかしブログで表示速度を保つ理想としては、画像データは100KB以下に抑えたいもの。
そこで圧縮ツールを使うのがおすすめ!
おすすめ圧縮ツールは、「Tiny PNG」という無料ツール!
※無料で使えます
※気に入ったらブックマークしましょう
Tiny PNGの使い方
「Tiny PNG」の使い方は、めっちゃ簡単です!
下の赤枠内に圧縮したい画像をドラッグすると自動で圧縮を開始してくれます。
あとはダウンロードすれば完了です♪
これでおおよそ100KB以下にまで圧縮が可能になります♪( ´▽`)
一つ一つはわずかですが、それが積み重なれば、表示速度に大きな差が出てきます。
まとめ
いかがでしたでしょうか?
【簡単】iphoneで撮影した写真をMacで100KB以下に圧縮する方法について書いてきました。
おすすめの画像サイズを圧縮する方法は2ステップ!
・適切な画像サイズ(ピクセル)の選択(リサイズ)
・圧縮ツール「Tiny PNG」の使用
これでおおよそ100KB以下まで画像サイズを圧縮できます♪♪
面倒ですが…こういった一手間がチリツモで、サイトの表示速度の改善に繋がります!
ちなみにサイトの表示速度を測るには、googleの公式サービス「PageSpeed Insights」がおすすめ!
ぜひ試してみて下さいね〜♪( ´▽`)
最後までお読み頂きありがとうございました!