こんにちは！びたろーです。
ブログの記事の中に画像を貼り付けていると思いますが、画像のデータの大きさについて考えたことありますか？
画像は高精細になるほど、データとしては大きなものになります。
データ容量が大きい画像をたくさん貼ってしまうと記事を表示する速度が遅くなってしまいます。
そうすると読者があなたのページを訪れたとき、すぐにページが表示されないことにしびれを切らして離脱…なんてことが起こります。
また、Googleからの評価も下がってしまうらしいので、画像データは軽量化することをおススメします。
せっかく工夫して見やすいページ作りをしても、読まれずに終わってしまうのは本意ではないですよね。
そこで今回の記事は、私が実際にやっている画像の軽量化方法をご紹介します。
初心者サラリーマンブロガーの皆さん、ご参考に。
ブログに貼る画像をリサイズして軽量化する方法
画像のリサイズは画像リサイズツールorサイトを使って圧縮します。
”画像圧縮ツール”とか”画像リサイズ”と検索するといろいろ出てきますので、自分の使いやすいと思うものを使えばいいです。
使い方はそれぞれですが、ほぼ同じような使い方ですので、ここでは私が使っているサイトを例に画像のリサイズの手順をご紹介します。
私の使っているサイトはこちら↓
このサイトを別ウィンドウで開いて使っています。
私はこちらのサイトで画像のリサイズを行っていますが、他にもいろいろなツールがあるので便利です。
作業は別ウィンドウがおススメです。
それでは手順を説明します。
ツールの使い方というよりも、作業の流れを見ていただければと思います。
①画像リサイズツールで画像ファイルの読み込み
赤枠の部分に、リサイズしたい画像のファイルをドラッグ＆ドロップする。
②サイズ決定
③ファイル形式選択
サイズを2倍ボタンを押すか、もしくはリサイズの欄の数字を入力してサイズを変更します。
変更後のサイズは容量のところに表示されます。
容量を確認し、問題なければ保存形式を選択し、「画像化」ボタンをクリックします。
④リサイズして画像確認
リサイズされた画像をよく見て確認する。
・目に見えて画質が劣化していないか
⑤保存
圧縮した画像を確認し、画質等に問題がなければ保存する。
これが画像リサイズの作業の流れです。
そんなに面倒な作業ではないですよね。
画像データを軽量化する目的
ここでもう一度、画像データを軽量化する目的をおさらいしておきます。
記事の表示をできるだけ速くする。
冒頭にも書きましたが、データ容量の大きな画像を多く貼っていると、画面表示が遅くなります。
こんな経験ありませんか？
何か調べようと思ってググってみた。
↓
出てきた結果で見たいところをクリック。
↓
あれ？なかなかページが表示されない…
↓
あ～もういいや、他を見よう。
と言って離脱。
私だったら間違いなく離脱です。
だいたい情報を探している人は時間がないですからね。
もし自分のブログがそのようになっていたら…
そう！見てもらえなくなってしまいます。
表示を遅くさせないためにも、画像データの容量はできるだけ小さくしましょう。
１ページに使える画像の枚数を増やす。
１枚当たりのデータ容量を小さくできれば、１ページに使える画像も増やせますよね。
字だけの記事より、適度に画像が配置されている記事の方が読みやすくなりますし、読んでもらえる可能性も高まります。
内容が薄過ぎたら意味がないですが、パッと表示されて文字だらけ…
読む気になります？
ペタペタ貼り過ぎるのはNGですが、画像を有効活用するためにも、１つのデータはできるだけ小さくすることで、貼れる枚数を確保することも大切なことです。
例）１MBの画像を1枚貼るかわりに、200ｋｂの画像を５枚貼る。
サーバーのディスきるクスペースを節約。
レンタルサーバーのディスクスペースは、スタンダードなプランでも十分な容量があるので、ブログ立上げ当初はそんなに気にならないかもしれませんが、長く更新を続けていると気になってくることでもあります。
日頃から画像のデータ容量を小さくることを心がけていれば、ディスクスペースがすぐに圧迫する…なんてことにはならないと思いますので、できればリサイズは習慣化してしまうといいでしょう。
画像リサイズの注意点
圧縮しすぎないようにする。
データサイズを小さくしたいあまり、極端に圧縮してしまうと画質が悪くなってしまいます。慣れないうちは、圧縮してブログに貼ったあと、必ずプレビューなどで画質の劣化がないか確認するようにしましょう。
参考
画像サイズの私の目安は、
アイキャッチ・・・・300KB以下（150～200KBが多いです）
記事中の画像・・・100KB以下（多くは70KB以下）
あくまで目安です。
貼る画像の内容によっても多少変えたりもします。
※細かな写真は大き目、ラフなイラストなどは小さめ etc
最終的にはプレビューで確認して調整しますので、上に書いた限りではありません。
その他
ファイル形式について
私の場合、画像のファイル形式はJPEGかPNGにしていいます。
※ファイルの拡張子が「〇〇〇〇.jpg」「〇〇〇〇.png」
はっきり言ってどちらを選ぶのかはケースバイケースです。
今回ご紹介した「画像リサイズツール」はJPEGかPNGかを選択できるようになっていますので、容量や画像の内容を見ながら決めています。
２つのファイル形式は圧縮方法の違いにより、画像の内容に得手不得手がありますので、特徴を記しておきます。
ＰＮＧ・・・
同じ色のパターンを保存することが得意。イラストなどの塗りつぶしの多い画像には適し、品質を維持したまま画像を軽量化できる。逆に写真やグラデーション部分が多い画像は綺麗に保存できるが、ファイルサイズが大きくなりやすい。
ＪＰＥＧ・・・
画質を維持できる程度に不要なデータを削除する圧縮方法。画質を維持しながら軽くできるが、保存を繰り返すとその度に画質が劣化してしまうので注意が必要。
まとめ
今回はあるサイトを例に画像リサイズの流れをご紹介しましたが、ぜひあなたにあったツールやサイトを探してみてください。
ブログに画像を使用することは、視覚的効果もあるので使った方がいいです。
ブログで画像を使用する時に考えなくてはいけないことは、
- ページに貼ったときの画像サイズ・・・見やすい大きさ。
- 画質・・・鮮明に見える。
- ファイルサイズ・・・大きすぎない。
などです。
画像も読者目線で考えつつも運営の都合も考えていかなくてはなりません。
両方を上手にバランスをとることが、ブログスキルの向上にも役立つはずですので、面倒がらずに実施していただきたいと思います。
画像を上手に活用して読まれるブログ作りに役立ててください。
最後までお読みいただきありがとうございました。
コメント