ブログ記事作成で、ライティングに比べ画像は軽視されがち。
しかし、画像もコンテンツの一部として重要な役割を担っています。
かといって画像を使いすぎるとページが重くなってしまいます。
快適さ、美しさ、収益性をかねそなえたブログ用画像についてまとめました。
適切な画像サイズをえらぼう！
私はブログにはなるべく画像を多く使うことをおすすめしています。
ユーザーにとってのメリット
- 読み進めやすくなる
- 内容が理解しやすくなる
- イメージがわきやすくなる
画像を探したり、加工したりという作業は書き手目線では面倒かもしれませんが、
読者から支持されるブログにするには非常に大切。ということがお分かりいただけたでしょうか。
しかし、画像は文字と比較して容量が圧倒的に重いデータです。
使う画像は多ければ多いほど、大きければ大きいほどページは重くなります。
一般的なサイト１ページあたりのデータ容量は数MB。
例えばiPhoneでスクショした画像は1.5MBくらい。
7枚も入れれば、あっというまに10MB超えてしまいます。
私が運営しているサイトのひとつでは、
多い時には１ページ30枚くらい画像を使います。
大きな画像を入れたらどうなるか、、分かりますよね！
考えなしに無加工の大きな画像を載せまくると、その分ページの読み込み速度は遅くなります。
遅くなると、当然サイトから離脱されますよね。
数秒でもなかなか表示されないサイトはユーザーから嫌われます。
サイトの目的に沿った画像サイズを選ぶことが超重要というわけです。
ブログに最適な画像サイズは？
最適な画像サイズはどんなブログを、どのようなデザインでつくるかにもよります。
なので最適解はひとそれぞれ、ブログそれぞれなのですが、参考になるよう目的別に画像サイズを検討しました。
最大表示幅より小さく、違和感のない比率でつくる。
がポイントです。
【アイキャッチ】16:9縦横比＆PC幅に合わせる（800×450px）
アイキャッチというのは記事のメイン画像や、記事一覧に表示される画像です。
ワードプレスのテーマによってアイキャッチのサイズは異なりますが、基本16:9の縦横比でつくるときれいに表示されまず。
この比率で、PCで表示される最大幅に合わせてつくります。
当ブログであれば本文の幅が766pxくらいなので、アイキャッチはざっくり800×450pxで作ってます。
高解像度ディスプレイだとちょっとぼやける場合があります。
サイズを倍にするときれいになりますが、その分重くなります。
きれいな写真を見せたいとき、など用途次第ですね！
【記事内】3:2縦横比＆最大表示幅より小さめ（600×400px）
多くのカメラで使われている比率がこの3:2。
なのでWEBサイトやブログでもよくみかけ、見慣れているのがこの比率です。
アイキャッチやメイン画像以外の本文画像はこの比率で、PC表示幅いっぱいではなく少し小さめの600×400pxにすると、メイン画像ではないことも分かりますし自然に見える気がします。
形式も大事！画像のフォーマット
まず迷うのが画像のフォーマット（形式）ですよね。
.jpgなど画像の名前の後ろについているアレです。
この部分は拡張子とも言います。
画像フォーマットは様々ありますが、現在一般的に使われているのはこの二種類。
- JPEG（ジェイペグ）
- PNG（ピーエヌジー、ピング）
この２つを中心に説明します。
ブログならとりあえずJPEG
とりあえずJPEGにしておけば問題なし、みたいなところはあります。
そこそこきれいで、なによりファイルサイズが小さいからです。
というわけで、画像形式はJPEG一択！
さあ、そんなことより記事を書きましょう！！
というわけにもいかない場合のために、説明続けます。
JPEGは表現できる色数が1670万色と多く、繊細な色の違いを表現する画像に向いてます。
ただし、ファイルサイズが小さいということは圧縮されているということです。
JPEGは圧縮したあと元の状態に戻せない（不可逆圧縮）ので、保存するたびにどんどん画質が粗くなります。
本気で写真やデザインをやってる方には重要ですが、挿絵程度で画像を使うブログでは気にしなくて良いかと。
色数によって用途が異なるPNG
PNGはビットによって使える最大の色数が異なります。
- PNG 8ビット…256色
- PNG24ビット…1678万色
使える色数が少なければデータは小さく、多ければ大きくなります。
JPEGとの圧倒的な違いは、PNGは透明を表現することができます。
JPEGは透明色を持たないので余白は白くなりますが、PNGは背景色を透過させることができます。
さらに、PNGは圧縮後も元の状態に戻せるという点（よって重い）があります。
PNGはきれい、と言われるのはここからきてます。
8ビットは色数が少ないロゴなどの画像であれば、JPEGよりきれいで軽くなる可能性もあります。
JPEG並みのフルカラーが表現できる24ビットは当然激重です。
ブログの挿入画像には選択肢に入らないですね、、
アニメーションならGIF
JPEGとPNGの説明は終わりましたが、おまけの説明。
GIF（ジフ、ギフ）という画像形式があります。
動画ではないのに絵が切り替わる画像を見たことはありませんか？
これはGIFアニメーションと呼ばれるもの。
GIFはJPEGやPNGのように静止画もつくれますが
複数の静止画を切り替えて表示させて、動画っぽく表現することもできます。
ブログに載せる前にやるべき画像加工
以上を踏まえまして、画像の軽量化を意識すると行うべき下処理は以下の通り。
- トリミング
余計な部分をカット、縦横比を整える - リサイズ
画面幅に合わせてサイズダウンする - 圧縮
画像の画質を適度に下げます - 形式を変える
基本的にはJPEG
無料！ブログ向きおすすめ画像編集ツール
上記のブログに載せる前にやるべき画像加工が簡単にできる無料ソフトが『PhotoScape』です。
初心者でも直感的に操作ができ、切り抜きや画質調整だけでなく、色味や明るさの調整もできます。
ぱっと見ネーミングが『Photoshop（フォトショップ 、フォトショ）』に似てますが、フォトショはプロ仕様で、出来ることの幅が全然違います。
ブログのアイキャッチくらいならPhotoScapeで十分です。フォトショは有料ですしね。
画像の調整ではなく、作成とあればcanvaがおすすめです。
フリーで使える素材やフォントが豊富でおしゃれな画像がすばやく作れます。
