※現在はブログテーマ「Cocoon」を使用しています（21.10.28～）
ワードプレスでブログを書き始めて、もうすぐ１年になります。
当初よりアドセンス合格にむけてガシガシ記事を書いていたので、記事以外のブログにまつわるアレコレは後回しにしてきました。
そして最近になって愕然としたことがあります。
ページスピードが遅すぎる
スピードテストで、75点だったのに
Google社提供のサイトスピードテストです。
昨年の10月ごろ、ちょこっと調べて、とくに対処もしなかったページスピード。
↓昨年の結果です↓
パソコンもモバイルも75点でした。
そして特に何も考えず。
ずっと同じ作業環境で記事の更新を続けました。
そのままのブログ環境で半年以上が過ぎたら…
今月になってまた測定してみたら、まーひどい状況になってました。
パソコンでは、そんなに変わらなかったけど、モバイルの方がガタ落ち！
赤点食らいました！ギャー！！
13て…。13って…（震）。どおいうこと～？
モバイルファースト時代にこれじゃいかんと思い、対策を取ることに。
一体なにがそんなに遅くさせているのか、素人にはわかりません。
ページスピードのレポートでは、
改善できる項目として、３つも画像に関するダメだしが。
とにかく画像が重たすぎるようです。
画像に関する知識ゼロでした
それもそのはず。ずっと写真サイトや自分で作った画像（キャプチャ画像、スクショ画像）をまったくそのままで載せてきたのです…。
それと…
最近、アイキャッチ画像などを自作することもあるのですが、画像上に載せた文字などが切り取られてしまうという現象を見て、あぁ、画像の下部分が切れちゃったな、どうしたらいいんだろう？って思っていたところなので。
（遅い！遅すぎる！！）
やっと、アスペクト比とか画像のサイズに気が付く（激遅）
初めて、ブログ上に載せた画像のサイズの縦横比が、表示される場所（状況）によって変わることに気づいたのです。
投稿ページのアイキャッチ画像では、画像の全部が表示されているのに（上下左右切り取られている部分がない）、インデックスページのサムネイル画像や、Twitterに共有で流したサムネイル画像は、切れちゃってる。
調べていくうちに、じゃあ、ブログに適したサイズっていうのはいくつなんだ？サムネイル画像が縦横比率いくつなら、切り取られないんだ？というところにたどり着きました。そんなこと知らんで今までガンガンアップしていたことが恥ずかしくなってきたー
そこで、すぐに答えが見つからず。
右往左往しながら、「調べる」という手法にたどりつくまでに、少し時間がかかりました。
Googleクロームの拡張機能を２つ入れました。
もうほんとGoogleって神かよ…、って思う(*´▽｀*)
実際に画面上に見えている「ピクセル」を調べるツール
まず「ピクセル」という単位がわからない人はWikiを読むより、これを入れて「画面上で見えてるものを定規で測る」ことをおススメします！
ルーラーと言う通り、何ピクセルなのかを図るツールです。
「センチかミリで言ってくれる？？」って思う私のような人間に開発されたとしか思えない神ツールです。ピクセルというものを理解するには、図るのが一番！
このブログで言えば、アイキャッチ画像とかサムネイルをパソコン上で「縦が〇ピクセル、横が〇ピクセル」という（だいたいですけど）数値を確認できるのです。
では実際に図っていきましょう！
Googleクローム（ブラウザ）の拡張機能に、このPage Ruler Reduxをインストール！
そして自分のブログのインデックスページを開き、サムネイル画像の大きさを調べます。
Googleクロームの拡張機能をONにします。
アドレスバーの右のほうにこんなアイコンが出てきます。
そこをぽちっと押すと、マウスポインタの矢印が ＋ みたいになるので、図りたい画像の左上→右下にドラッグします。
左上の方に、幅と高さが出ています。
それによると、このインデックスページのサムネイル画像は、だいたい
320（幅）×187（高さ）なので、縦横の比率は、
16：9 だよね！ってことがわかります。
（横幅320だと、アスペクト比16：9の高さは180です）
16：9 見たことある。見たことあるぞ～！
どうやら昨今のWEB画像、この「16：9」っていうのが主流らしいです。
（証明写真が4：3ってだけは知ってた私にとって革命…汗）
どうりで文字が切れてるわけだ…はは。
ということでアイキャッチ（サムネイル）にする画像のアスペクト比が「16：9」で作成すればOKという答えを導き出しました。
で、何ピクセルで作ればいいの？
そして、ブログの記事ページ内に載せる画像ですが、ブログテーマGiraffe（ジラフ）の記事部分は、横幅750ピクセルが最大値です。
よってこれ以上大きいサイズをアップロードしたとて、最大750ピクセルに縮小されてしまうので750ピクセル以上の画像を用意しても意味がないのです（画像の鮮明さが重要なものを除く）。
スマホカメラで撮ったり、キャプチャ画像などは、横幅750ピクセルまでリサイズしていきます。
で、次は容量（重さ）の問題です。
スマホのカメラで撮った画像の高画質なままで、どんどんアップロードしまくってたので、ページスピードが遅い。
小さい容量のものをアップロードしないとダメっていうのはわかります。だけど、容量が小さければ画像が悪くなるっていうのもわかるし、いったいどの程度のものをアップロードしたら…という問題。
人様のブログなどのアップロードサイズがわかる神ツール
それに対しての調査は、またまたGoogleクロームの拡張機能が活躍です。
これをインストールして有効化すると、「この画像は一体いくつ位のバイトなんだろう…」ということがわかります。
調べたい画像の上にマウスポインタを合わせて右クリックすると
メニューに「View Image Info」が出てますのでクリック。
そうすると別ウインドウが出てきて、その画像のアップロードサイズが確認できます。
この画像は改善後なので、「750×422ピクセル」の「16：9」になってます。（画像ソフトで16:9比率でトリミング済 & 横幅750にリサイズ済）
ちなみにこの画像は、某画像サイトからダウンロードしてきたものですが、
- サムネサイズだと、800×533ピクセル
- ブログサイズだと、1,600×1,066ピクセル
- 高解像度サイズだと、5,760×3,840ピクセル
になってます。
何も知らないときは、普通に「ブログサイズ」を選んで、ノー加工でアップロードしていました！！わはは！！765KBを普通にアップロードしてた（爆）。
画像ソフトで普通にトリミング→リサイズでも、容量は減りますが、さらに「圧縮」することにより42KBにまで減らしています。
WEB上にアップする画像の適切なサイズは、100KB以下が理想だと思います。
(圧縮については、また別記事で詳しく！)
画像についての対応をしましたら、少しはスピードがあがりました
でも画像に関する改善が、上位から消えました。
まとめ
今回はピクセルを数字で把握することがキモでした。
ブログテーマGiraffe（ジラフ）を使っている場合の手順をまとめてみます。
画像を作成する手順としては
1.画像を用意する
- 画像サイトからダウンロード
- キャプチャ画像
- スマホカメラ画像
（横幅750ピクセル以上のものを用意）
2.画像ソフトを使って加工する
- 16:9（アスペクト比）でトリミングする
- 横幅750ピクセルにリサイズする
- 文字入れなどの装飾をする
という感じです。
アイキャッチ画像として作った画像が、サムネイル画像として様々なところで使えるように「１６：９」にしておけば、だいだいイケる！（はず）
いや～～～、ブログって奥が深いです。
コメント