ブログを運営していると、自分のブログの表示速度が気になります。
気になる理由は
「表示速度が遅いと離脱される可能性が高くなるから」
つまり、せっかくブログに来てくれたのになかなか表示されないから待ちきれずに検索ページに戻ってしまうということです。
この問題を和らげる対策として記事などで使う画像サイズを小さくするという方法が、あります。
この記事では
ブログなどにアップする画像のサイズを簡単に圧縮できるアプリの紹介をします。
ページの表示速度が遅い原因はほとんどが「画像」
ブログ訪問者を増やすには、ユーザビリティを高める必要があります。
簡単に言うと、自分のブログに来てくれた訪問者が快適にブログ内を観覧できる環境作りが大切です。
その中でも訪問者がストレスを持つ原因のトップ3に入るのが「表示速度が遅い」ということです。
平均してページビューが大体3秒くらいが一般的にストレスなく観覧できる表示速度らしいです。
5秒になるとちらほら前の検索ページに戻る(離脱する)人が増えていき、10秒も待たされるのなら今後一切訪れないといった感じで、影響がでます。
ページの読み込み速度が遅い原因は、各ブログで違いますがほとんどの割合で「画像の容量サイズ」が大きすぎてなかなか表示しないパターンが多いです。
理由は、スマホにある写真や画像をそのまま添付してアップしているからです。
最近のカメラやスマホは画質がすごくよくなっていて、HDRで撮った写真はとてもきれいですよね。
プリントアウトしてみるならいいのですが、ネットやメールなどでは容量が大きいので読み込み・表示に時間がかかってしまいます。
それを知らずに記事内やブログ内で使ってしまっているので表示速度が遅くなっているんです。
「画像のサイズ」と「画像容量サイズ」は違う
よく勘違いされているのは画像のサイズ(幅〇ピクセル×高さ〇ピクセル)を小さくする(リサイズ)と表示速度も速くなると思っている方がいます。
重要なのはこの「見た目」のサイズではなく、「中身」の容量のサイズの方です。
容量が大きい画像をどれだけ見た目小さくして記事に載せても、容量は大きいままなので表示速度が改善されることはないです。(多少早くなったりはしますが)
画像の容量を小さくするためには「圧縮」という作業をしないといけません。
「動画を圧縮」「ファイルを圧縮」など聞いたことありませんか?
それと一緒で負荷がかかり過ぎないようにデータ容量を圧縮することで、軽くなり表示速度も格段にアップします。
圧縮アプリ「画像圧縮」
画像を圧縮するには、PCソフトを使わないといけないと思っている方も少なくないと思いますが、私が普段ブログで使用する画像はスマホアプリ一つで画像圧縮作業が完結できます。
そのアプリがこちら「画像圧縮」です。
iPhoneしか対応してないのかな?
一応アンドロイドの方は、近い機能が備わっているアプリに繋がるように設定しています。
このアプリを使えば、好きな容量サイズに調整できるので、表示速度が遅くならないサイズまで下げてください。
容量サイズはどれくらいがベストなの?
今まで画像ファイルをそのままアップしていた人に「表示速度が遅くならないサイズまで下げましょう」っていっても、どれくらいがいいのか分かりませんよね。
なので、今回は私が実際に行っているサイズ調整の基準を紹介しておきますね。
一応最初に言っておきますが、今回紹介する数値はあくまで私の基準なので、他の人にとっては「少なすぎる」と言う人もいれば「まだ大きすぎる」という人もいるので、慣れてきたら自分にあった容量サイズを見つけてくださいね。
私が普段からアップする画像容量サイズは『75~95KB(キロバイト)』です。
私が書く記事では画像を盛りだくさんに使う記事もあるので、圧縮率をあげてなるべく画質より軽さを優先しています。
画像圧縮の注意点
画像圧縮は表示速度を速めるためにとても便利ですが、ブログジャンルによっては不向きの場合もあります。
そのジャンルは「グルメ」や「風景」などをメインに行っているブログです。
なぜかというと、グルメや風景の画像は「美味しそう」だったり「綺麗」といった魅力を読者に伝えないといけません。
画像を圧縮するということは、多少画質が荒くなりその魅力が半減してしまうからです。
どんなに綺麗な写真を撮ろうと頑張っても、圧縮して画質を落とすのでは意味がないですよね。
ですので、画像圧縮を使うときは、その画像は何を目的として使うのかをよく考えて使用してください。
画像圧縮の使い方
アプリ「画像圧縮」は圧縮作業に特化したアプリで操作方法もとてもシンプルで分かりやすいのですが、せっかくなので使い方も一通り紹介させていただきます。
【①アプリ起動】
アプリを起動すると、初めての場合はスマホ端末内の「アルバム」が直接開かれます。
もし開かれない場合または2回目以降使う場合は画面右上の「写真マーク」をタップしてください。
【②画像選択】
スマホ端末内の「アルバム」にある画像の中から圧縮したい画像を選択します。
一度に圧縮できる画像は15枚までです。
圧縮する画像を選択し終えたら画面右上の「選択」をタップします。
【③サイズ確認】
初期設定ではオリジナル画像サイズの80%まで圧縮した設定でスタートします。
この時点で画像サイズがどれくらいあるか確認しましょう。
「サイズと容量を確認する」という項目をタップします。
【④画像サイズの見方】
画面上部に「元データサイズ」と「圧縮後のサイズ」が表示されています。
複数の画像を一気に圧縮している場合はこの画面で右から左へスワイプ(スライド)すると他の画像データを見ることができます。
下の画像の場合で見ると、圧縮後(80%)で102.09KBまで圧縮できるということが確認できますね。
先ほど言ったように私の基準は「75~95KB」なのでもう少し圧縮した方が良いということになります。
圧縮率を調整したい場合は画面左下の「< マーク」をタップして前の画面へ戻ります。
【⑤圧縮率を調整する】
「変更サイズ(パーセント)」の調整バーを左右にスライドさせて圧縮率を変更します。
%の数字が小さいほどサイズも小さくなります。
今回は80%から70%までサイズダウンしてみました。
【⑥再度 圧縮後のサイズ確認】
上記で調整したら再度「サイズと容量を確認する」項目をタップし、圧縮後の画像サイズを確認します。
70%まで下げると「83.99KB」まで容量が減りました。
私の基準に到達したので、この圧縮率で大丈夫そうです。
【⑦圧縮後の画像を保存】
理想のサイズに出来たら、画面下の『保存する』ボタンをタップします。
「選択した画像を圧縮後、保存します よろしいですか?」
という問いかけ表示があるので、問題なければ『OK』をタップします。
【⑧圧縮できた容量を確認】
保存が完了すると、今回の圧縮で「どれくらい画像サイズが軽くなったか」が表示されます。
今回1枚の画像を70%まで圧縮した結果、「482.48KB」分容量が軽くなったことがわかります。
今回はイラストの画像で解説したので、さほど大きな軽減はなかったのですが、写真などはMB(メガバイト)レベルで容量を圧縮できるので、かなり軽くできると思います。
まとめ
ブログ記事を書くときに画像を添付することは多いですよね。
初心者の多くはそのままスマホ内の画像をアップする人が多いです。
いろんなブログを拝見していますが、始めたばかりの人のブログは、画像をそのまま貼ってあり見た目の大きさもそのままなので、ゆ~くり画像の上からジワジワ表示されているパターンが多く見られます。
そういったブログを開くと、断ち切れず立ち去ってしまいます。
実にもったいないことですよね。
記事内容はめちゃくちゃ面白いかもしれないけど、画像が表示されないという理由で読む気も起きなくなってしまいます。
圧縮作業は手間かもしれませんが、今後のブログ活動で必ず改善しないといけない問題なので、スマホ一台で完結できるアプリ「画像圧縮」で読者のために快適な環境にしてください。