【画像最適化】ImageOptinを使ってみたらとても良かった！
2019/07/07
みなさん、こんにちは。 Mon Webの楠本です。
今週は先日制作実績で制作した「リリー楽綺団」様のサイト制作も一段落したので、少しサイトのメンテナンスでもしようと思い色々やっていました。
久しぶりにPageSpeed Insightsにて読み込み速度を測ってみたら、以前よりも速度が落ちている！
まぁ制作実績の増えたから画像も増えてきたから速度が落ちたにしても落ちすぎかな…と感じたのでひとまず画像の最適化をして再アップしてみようと思いました。
そこで調べてみて出てきたのがImageOptin。
使ったことが無いから一回使ってみようと思い、早速Mac用のappをダウンロードして起動。 操作性の良さがとても良かったので紹介したいと思います。
ドラッグ&ドロップで自動的に画像を最適化
まず良かったのが操作性。
本当に直感的に使えるので分かりやすかったです。 またいいなと思ったのは、画像を最適化したら自動で上書き保存してくる所。
以前は、画像最適化のサイトに画像をアップロードして完了したらダウンロードして上書きするととても工数が多かったのが厄介でした。
また、間違えたフォルダ内に保存してしまってヒドイことになったり… 色々大変でした。
でもImageOptinはファイルの間違えた所に保存する事もなし。 上書き忘れもなし。 面倒くさがりの自分にはぴったりでした。
画像の質はそのままで容量を軽く
そもそも画像最適化とはどんなものか？
自分が考えるのは「高画質で書き出したような低用量の画像に変換する」と思っています。
カンプデータから画像を書き出すときに自分は低画質で倍サイズの書き出しをする事が多いです。（Retinaディスプレイ対策です）
ですが、画像のサイズを倍出しのpngを書き出すと結構容量が出てきます。 WebPに書き出したりとその他の方法もありますが、jpgとpngを一括で最適化してくれるものがあれば一回の作業で完了するので間違いをしたるする事は少なくなりますね。
スマホで閲覧する方に向けて最適化は必須
やはりサイトを作る上で通らないといけないのが、「PCとスマホの環境の違い」です。
PCの環境で閲覧する方の多くはWi-Fiもしくは有線の環境下で見る事が多いので、多少重い画像を使用してもそこまで問題なく見る事が出来ると思います。（厳密にはGoogleからは指摘されますが…）
しかしスマホとなるとWi-Fi下では無いと結構速度は落ちた環境で見ることになります。
なので、画像を軽くする事はユーザーの負担も減るのでいい事なのですが、画像が荒くなったりする事もあります。 なので、ImageOptinなどのappを使って見た目を保ちつつ容量を落とした画像を作れればクオリティも保てますね。
それでは、また次回に！
良かったらTwitterのフォローとFacebookのいいねをお願いします！