ポータルサイトは画像が命!最適化して表示速度を高めましょう!

 



2020/8/13

多くの情報が集まるポータルサイトでは、ユーザーを惹きつけるサムネイルやアイキャッチが重要な役割を果たします。そのため解像度の高い画像が求められるのですが、サイズが大きくなってしまいサイトの表示速度に大きな影響を与えます。

表示速度の低下をおさえ且つ美しい画像を利用するため、画像最適化の方法を学びましょう。

画像圧縮サービスを利用する

画像最適化で一番てっとり早いのが画像圧縮サービスの利用です。
圧縮したい画像をアップしてダウンロードするだけなので誰でも簡単に最適化が可能です。

パンダが目印!” Tinypng “

ポータルサイト 画像 最適化 表示速度
https://tinypng.com/

自分がいつも利用している画像圧縮サービスの” Tinypng “。
画像をドラッグ&ドロップで簡単に処理できるので重宝しています。
ちなみに上記のキャプチャはオリジナルは838.5 KBでしたが、217.7 KBの圧縮に成功しています。

画像編集ソフトを利用

予算・技術があれば画像編集ソフトで最適化する事が可能です。
トップページのメイン画像やサイト全体で利用する共通画像は細かい調整を行いたいですね。

定番 ” Photoshop ”

ポータルサイト 画像 最適化 表示速度
Photoshop

今回はPhotoshopを利用して上記の画像を最高画質と最適化(手動で若干調整)で書き出しを行いましたが、最高画質456 KBに対し最適化84.0 KBと大幅に容量を削減できました。

WordPressを利用するならおすすめのプラグインがあります

画像最適化のプラグインも数多く用意されていますが、中でも使いやすく痒いところに手が届いているものを紹介します。

自動圧縮が便利”Smush”

ポータルサイト 画像 最適化 表示速度
Smush

こちらのプラグインが優れているのが管理画面からアップした画像は自動で圧縮され最適化されるところです!
さらにこのプラグインを導入前にアップされた画像についてもクリック一つで圧縮が行われるため、WordPressを利用するなら追加しておきたいプラグインです。
上記の画像はオリジナル336 KBに対し、Largeサイズ( 1024×495 )で47.8 KB に最適化されました。

まとめ

スマートフォンファーストが定着し、画像のサイズに対応する重要性が増してきています。しっかり対応してサイトの表示速度をコントロールしましょう。