こんにちは、りゅうのすけ(@k_r001)です。
この記事では、画像圧縮についてまとめています。
こういった方に向けて、書いています。
モバイルでの表示速度が97点に達しているので、参考になると思います。
画像圧縮の種類
画像の圧縮は、画像の容量を小さくすることです。
- トリミング：不要な部分を切り取る
- 画像のサイズを小さくする
- 画像に余分な部分を取り除く
- プラグインを使って最適化する。
実は、トリミングも画像圧縮のうちの一つです。
ブログの素材で一番重いのは動画
容量の重さは、文字が一番軽くて動画が一番重いです。
ブログを重くする原因は、「画像の重さ」です！
文字 ＜ 画像 ＜ 動画
文字を主体的に使いつつも画像を利用しましょう。
ブログの表示速度を上げるには画像を圧縮する
ブログの記事を軽くするには、画像を圧縮しましょう。
ブログに動画を載せる人は、少ないので画像を軽くすることに力を入れましょう。
だからこそ画像の圧縮を行えば、サイト自体が軽くなります。
画像圧縮で削っている部分はどこなのか？
画像圧縮で削っている箇所は、目に見えないデータです。
もし圧縮していることが目で見て確認できるのであれば、とてつもない視力の持ち主ということになります。
圧縮前と後の比較
イラストだからだと思うかもしれないですが、写真も同様です。
ブログの画像を圧縮するオススメツール
画像圧縮に使えるツールは、3つあります。
この、3つのツールを使います。
「MAC」と「Windows」によって使い分ける必要があります。
それぞれOSによって使い分けましょう。
MACの人向け「imageoptim」
「imageoptim」は「MAC」であれば、ダウンロードしてソフトとして使うことができます。
ブラウザを開くという手間が省けますが、「Windows」には対応していません。
設定は、を押せば、変更できます。
圧縮率を設定すれば、あとはソフト上に画像をドラッグするだけで画像を圧縮できます。
MACを使っているという方は、ダウンロードしておきましょう。
Windows向け「squoosh」
「Squoosh」は、「Google」が推奨している画像圧縮サービスです。
ブラウザ上で使うのでダウンロードなどの必要はありません。
圧縮率や拡張子を簡単に切り替えれます。
ただし、「imageoptim」と比べるとブラウザを開かないといけないので、少々不便ですが他のサービスと比べると使いやすいです。
誤って背景の透過を消してしまった場合は、「removebg」を使うことでも変更可能です。
このサイトは画像をアップロードするだけで、画像の背景を自動で切り取ってくれます。
画像編集にも使えるので使いやすいです！
Windows向け「TinyPNG」
「TinyPNG」は、画像をまとめて圧縮できるのが魅力的です、
「Squoosh」も便利ですが、まとめて圧縮することができません
画像をドラッグすれば、アップロードできてすぐに圧縮が始まります。
手順が簡単なので、パソコン作業に慣れてない人向けです。
ページの表示速度を測定
「PageSpeed Insights」を使えば、表示速度を数値化できます。
ブログの記事を書いた後に、ページの表示速度を必ず測定しておきましょう。
速度を測定したいページのURLを入力すれば、ページの表示速度を測定することができます。
表示速度を上げる方法は、⬇︎下記にまとめてあります。
ブログの画像はどこから集めればいいのか？
画像を圧縮する方法が分かったとしても無断で勝手に取ってきていいというわけではありません。
安心してブログ運営をするには、商用利用無料の画像を使いましょう。
自分で画像を作って使うのもおすすめです。
【パソコン用】Canvaとは？画像作成ツールCanvaの使い方
上記記事でまとめたものを使用することで、安全なブログ運営をしましょう。
まとめ
画像圧縮で表示速度を最適化しておくこと、訪問者の離脱率を下げるだけでなくSEO対策にもなります。
自分のサイトに訪問してくれたユーザーのことを、大切にすることが結果自分のためにもつながります。
下記記事⬇︎で、画像圧縮の流れに関する具体的な流れについてもまとめてあります。
WordPressの画像を最適化するためにやるべき4つの手順
表示速度にこだわりたい方は、参考にしてみてください。
最後まで見ていただき、ありがとうございました。
