Google Search Consoleの速度（試験運用版）を初めて確認ました。
ページの読み込み速度が確認出来るものだと思ってクリックしてみた所、PCは100点満点中の92点だったのでグリーンの表示で合格ラインっぽかったのですが、モバイルを確認してみた所100点満点中の63点だったのでちょっと何かマズいんじゃないですか？
減点ポイントが表示されていたので確認した所、一番の原因は画像のフォーマットという事で［次世代フォーマットでの画像の配信］が赤字で推奨されていました。
次世代フォーマットって何？と思いながら詳細を確認するとJPEG 2000、JPEG XR、Webpなどの画像フォーマットはPNGやJPEGより圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
JPEG 2000、JPEG XR、Webpって初めてお目にかかりました。多分JPEGの存在感が凄すぎてって言い訳が通用すると思いますが、そんな次世代フォーマットなんて存在すら知りませんでした。
兎に角どんなものか一応調べてみる事にします。
JPEG 2000とは
CAN I USEで確認してみた所、JPEG 2000はSafariとiOSメインで使用可能なのでappleさんが推す画像フォーマットです。JPEGとJPEG 2000のファイルサイズや拡大画像での劣化具合等を検証されているブログが結構あったので気になる方は調べてみて下さい。
僕はJPEG 2000を使うつもりが無いので検証は行いませんでした。
JPEG XRとは
こちらもCAN I USEで確認してみた所、JPEG XRはIEとEdgeメインで使用可能なのでMicrosoftさんが推す画像フォーマットです。
こちらもJPEG 2000と同様にJPEGとのファイルサイズや画質の比較、JPEG 2000との比較をよく目にする事が出来ましたので軽く検索されると検証サイトを見る事が出来ると思います。
JPEG XRも同様に今の所は使う予定がありませんので検証は行いませんでした。
Webpとは
続いてWebp。ウェブピーって読むのかと思ったらウェッピーでした。こちらはGoogleさん推しのフォーマットで結構色んなブラウザで使えると思いきやiPhoneでは表示されないフォーマットなので、こちらもまた万能ではありません。
iPhoneで見たら画像部分が全て代替テキスト表示なんてダサいですから。そんな事態には陥りたくないのでWebpもパスします。
次世代フォーマットよりJPEG圧縮が先です
結局の所、次世代フォーマットでお願いしますね。と言いつつappleとMicrosoftとGoogleの三つ巴になっているので、ユーザーにとってはblu-ray VS HDD対決のように早く決着が付いてくれた方が助かるのですが、、、利権の問題でそう簡単にはいかないんでしょうね。
折角次世代フォーマットという素晴らしいものがあるのに使い勝手が悪いのでJPEGのまま行きます！って事も出来ないんですよね。JPEGデータ容量多いみたいだし。ならばJPEGのままで軽くするにはどうすれば良いかという事で辿り着いたのがJPEGを圧縮するという方法です。
僕、実はダウンロードソフトを圧縮ファイル状態でDLしてユーザー側で解凍して使うっていう圧縮。こちらしか知りませんでした。フォルダごと圧縮するやつです。(;’∀’)
画像のJPEGファイルを圧縮して少しだけ、遜色無いぐらいに劣化させてファイルサイズを小さくする。なんとも合理的なやり方があるので早速ですが実践する事にしました。
画像を触るなら先ずリサイズとトリミングが必要です
画像を出来るだけ16：9にしたいので一括リサイズは勿論ですが、一括でトリミングも行いたいと思ったのでフリーソフトで両方できるものを探しました。
PhotoShifterが画像のリサイズとトリミングが一括で出来るので便利です。
起動するとこのような画面が出てきます
★はファイル形式選択
左のピンク★から順にJPEG、GIF、TIFF、PNG、HD Photo、Bitmap
歯車マークは設定変更、ピンク歯車は変換設定、パープル歯車はフォーマット設定となっています。
ピンク歯車の変換設定を押します
トリミングを有効にしたい場合はチェックを入れ数値を入力します
僕はiPhoneで撮影した4032×3024px画像を1080×608px（16：9）にトリミング＆リサイズしたいので、順序的にこのように設定しています。
①縦横比はそのまま4032×3024→1080×810へリサイズ
②1080×810を16：9にしたいので上下101pxをトリミング→1080×608（16：9）
優先順位の項目でトリミング→リサイズとしておきます
リサイズを有効にチェックを入れ幅1080pxにリサイズ、縦横比は維持とします
4032×3024→1080×810
リサイズで1080×810となったものを16：9にしたいので上下101pxづつをトリミングします
1080×810→1080×608
これで設定は完了ですが、設定を保存しておかないと毎回設定する羽目になりますので必ず設定は保存しておきましょう！
変換したい画像をファイルから開くかドラッグ＆ドロップで左の窓に入れていきます
複数枚を一括でリサイズやトリミングが出来ますので非常に便利で時短できます。
JPEG画像の圧縮はプラグインのCompress JPEG & PNG imagesが便利です
Compress JPEG & PNG imagesは月に500枚までは無料で圧縮が可能です。
ブログを初めてまだ数か月の為、全体の画像も500枚に届いていなかったので早速全部の画像を圧縮してみました。
トータル枚数は267枚、容量は圧縮前で152.60MBとなっていますが、これがどれぐらい減るのか楽しみです♪
サクっと終わるのかと思いきや10分ほど時間が掛かって圧縮が完了です。
152.60MBがおよそ50％減の75.27MBとスリムになりました(≧▽≦)
実はもっと激減すると思っていたので若干拍子抜けですが、ワードプレスにアップする前に自前で圧縮をかけ、プラグインで更に圧縮がベストなようです。
因みにモバイルの速度を圧縮後に再度行ってみた所63点が66点になっていました！
マサカの3点だけアップで相変わらずイエロー表示ですｗ
しかし、画像を次世代フォーマット推奨のレッド表示がイエロー表示になっていたので良しとしましょう。
ブログの表示や読み込みが重くて遅く感じる場合や速度試験でグリーン表示じゃない場合はJPEGの圧縮が手っ取り早くておすすめですので是非お試し下さい。
▽ご指摘や不明な点があればお気軽にどうぞ▽
