【2020年最新版】画像の表示速度を改善してSEOの効果をあげよう！
カイエダです。
先日こちらの記事で、Googleでの評価重要基準のお話をしました。
LCP（Largest Contentful Paint）「ページの読み込み時間」も評価に大きく影響するのですが、割と多くの方から、スマホで撮った写真をそのまま掲載していたりして、画像の重さ自体を、あまり気にしてこなかった、と聞きます。
「なんだか難しそう。ITに詳しくないと自分のブログでは改善できないのでは……」と不安にならなくて大丈夫。
できるところから手をつけていきましょう！
ということで、この記事では、2020年度最新版の「画像の表示速度」の改善方法をお伝えします。
この記事の目次
改善方法１：WordPressのプラグインで一括軽量化
あまりプラグインに頼りすぎるのもよくない！のですが、すでに掲載してしまった画像をいちいち上げ直すのは労力が、かかりすぎます。
ということで！
一括で軽量化をはかりましょう。
オススメのプラグインはこちら。
EWWW Image Optimizer
[blogcard url="https://wordpress.org/plugins/ewww-image-optimizer/"]
これまでも何度かブログで紹介してきました。
ブログ運営者には必須のプラグインと言えるのではないでしょうか。
画像をアップロードしたときに、Web閲覧に最適な状態に「減色・圧縮」してくれるのです。
画像減色とは、ブログに載せようとしている画像データに使用されている「色の数」を文字通り減らすことです。
画像ファイルの容量を、抑えるために行われます。
画像圧縮とは、画像の情報量をより少ないデータに変換することをいいます。
両方とも「画像の重さを軽くする行為」と覚えてみてください。
もちろん、すでにアップロードした画像も圧縮できます。
ただし、同じ画像を何回も圧縮してると、画像が粗くなり、どんどん劣化するのでご注意くださいね！
▼プラグイン導入方法を解説しています。
[blogcard url="https://fanmake-blog.com/?p=9115″]
上記の記事では、すでにあげた画像の一括減色・圧縮の方法も記載しています。
カンタンにできますよ！
改善方法2：写真をアップロードする前に軽量化するオンライツール紹介
これは私が行っている方法です。
EWWW Image Optimizerを利用して画像を一括で圧縮するのもいいのですが、、、。
画像それぞれの美しさが損なわれるのは大変つらい、、、、。
そこで、掲載する前にちゃんと目視して、軽量化を確認してからアップしています。
画像ソフトを持っている方は、そのソフトで軽量化して画像を書き出してもいいのですが、オンラインでも軽量化ツールがあるのでいくつか紹介します。
まずは画像形式を知ろう
画像には形式があります。
Webで利用できる画像で、対応ブラウザを選ばないものには次のフォーマットがあります。
- gif
- 透過可能
- 色数は 256色まで
- 写真には適さない
- JPEG
- 透過不可
- 写真に適している
- 解像度が高い写真はとても重いが圧縮が可能
- ただし加工すればするだけ劣化する
- PNG
- 透過可能
- 絵や写真両方に優れているが、キレイな分、重いのが難点
また、次世代の画像フォーマットとして注目されているのがWebP（ウェッピー）です。
WebPは、Googleが開発している静止画像フォーマット。
ファイルの拡張子は「.webp」。
たまにダウンロードした画像が.webpとなっていることがあった！という方もいるのではないでしょうか。
WebP、圧縮率が高く、とても軽量化にはオススメしたいし使いたい画像なのですが、、、難点がひとつ。
なんと iOS（つまりiPhone）でよく使われるブラウザSafariではサポートされていません。
これは痛い、です。
WebPについてはまだまだ世間では周知されていません。
全ブラウザにも対応していませんので、急いで対応しないといけないというものではないです。
いずれ全ブラウザで対応するようになってからでも、導入は遅くはないです。
ですので現時点で現実的な、オンライン画像圧縮ツールをご紹介していきます。
便利なオンライン画像圧縮ツール３選【PC編】
compressシリーズ
[blogcard url="https://compressjpeg.com/ja/"]
PNGおよびJPGを圧縮してくれます。
圧縮された画像をダウンロードするときに、画像名が「（もともとの画像名)_min.png/jpg」とリネームされます。
画像のクオリティは低過ぎなくて、私は気に入っています。
複数画像を一気に圧縮することも可能です。
iLoveIMG
[blogcard url="https://www.iloveimg.com/ja/compress-image"]
こちらの記事で紹介した、 iLovePDFの姉妹版サイト。
[blogcard url="https://fanmake-blog.com/?p=11513″]
JPG、PNG、gifいずれもこのひとつのサイトにドロップすれば圧縮してくれます。
やはり画像圧縮後は画像名はリネームされます。
画像の圧縮だけでなく、
- 画像のサイズ変更
- 画像の切り抜き
- （WebP画像などを）JPGに変換
- 写真エディター
などの機能も備わっていて便利！です。
ただ、クオリティを調整できないのが難点。
つまり、圧縮されすぎて、画像が劣化する可能性も高い……ということ。
目視が重要です。
たくさんの画像を一気に圧縮することも可能なため、作業効率化・スピード重視ならば相当重宝するでしょう。
TinyPNG / TinyJPG
[blogcard url="https://tinypng.com/"]
PNGと銘打っていますが、PNG画像もJPG画像も、どちらも圧縮できます。
このツールのよいところは、ファイル名を変更しないところ。
あとでファイル名を変更することが億劫なことってありませんか？
そんな方にはピッタリなサイトです。
改善方法3：スマホで撮った写真をアプリで縮小！
さて、つづいてはスマホ編です。
スマホ内の写真を圧縮するには、アプリをインストールする必要があります。
最近のスマホで撮った写真は、スマホが高性能となり画像がとってもキレイなのですが「容量が大きく」なりがちです。
iPhone、Androidそれぞれで、イチオシのアプリをご紹介しますね。
どちらも、画像圧縮というよりも縦横の長さを短くする「リサイズ」アプリです。
便利な画像リサイズ＜イチオシ＞アプリ【 iPhone・Android編】
複数の写真/画像をまとめてリサイズ-一括変換アプリ（ iPhone )
[blogcard url="https://apps.apple.com/jp/app/%E8%A4%87%E6%95%B0%E3%81%AE%E5%86%99%E7%9C%9F-%E7%94%BB%E5%83%8F%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA-%E4%B8%80%E6%8B%AC%E5%A4%89%E6%8F%9B%E3%82%A2%E3%83%97%E3%83%AA/id1023639407″]
ものすごく長い名前のアプリですけれども、レビューでもなかなか高評価のアプリ。
無料でも、複数の画像を一括リサイズすることも可能です。
そのままメールに添付することもできるようです。
画像サイズ – 写真リサイズ アプリ（ Android ）
[blogcard url="https://play.google.com/store/apps/details?id=de.vsmedia.imagesize&hl=ja"]
こちらのアプリも、レビューでなかなか高評価です。
ピクセル、ミリメートル、センチメートル、インチの 4つの単位のいずれかを使って、出力形式を指定できます。
リサイズのときに気をつけてほしいのは「縦横比を保持」すること。
このアプリでは、ちゃんと縦横比を保持するよう、チェックを入れる部分もあるので便利です。
まとめとして
無料で画像を圧縮・リサイズできるツールは、今回ご紹介したもの以外にもたくさんあります。
うまく利用して、ブログに載せる画像を軽量化してみてください。