覚えておくとちょっと得する「ブログに使う画像のテクニック」をまとめました。
文章だけでなく、写真やイラストを使った豊かな表現ができるのがブログの魅力。
しかしその画像の正しい取り扱いはあまりシェアされていない気がします。
特にブログ初心者の方はぜひご覧ください。
ブログに使う画像を最適な状態にしておくメリット
ページ表示スピードが上がる
なかなか表示されないページほど、ストレスなものはありませんよね。
最適化されていない画像は表示スピードを妨げる大きな原因になっています。
いわば画像をちゃんと管理することは、読者に対するホスピタリティ。
自分が丹精込めて書いた記事。
快適に読んでほしいですよね。
のちのちの管理が楽になる
「WordPressのプラグインで最適化してるから大丈夫だよ？」という人がいるかも知れません。
たしかにプラグインは便利です。
しかし、そのプラグインが原因で表示スピードが落ちていることはないでしょうか？
可能性は否定できないと思います。
もしそうなら、本末転倒ですよね。
またプラグインを何個も入れると、テーマやWordPressとのかみ合わせが悪くなったりして、メンテナンスに気を取られます。
個人的にはプラグインは使わないですむなら、それにこしたことはないと思います。
ですからデータベースにアップロードする前に最適化したほうが良いでしょう。
またブログサービスを引っ越しする際に画像データも移行することが多いと思います。
その時もやはり画像が軽くなっていたほうがスムーズ。
結局は逐一、画像を最適化していったほうが良いのではないでしょうか。
Google Discoverで目立つ
androidスマホに標準でインストールされているGoogleアプリ。
そのニュースフィードをGoogle Discoverと言います。
ブロガーからすると、Google Discoverに掲載されるとアクセスが急増するので、ぜひ掲載されてほしいところ。
そのDiscoverが最適な画像サイズを指定してきています。
どうせならその推奨サイズに基づいて、画像を最適化したほうが良いでしょう。
関連記事：Discover にコンテンツを掲載する | Google 検索セントラル | Google Developers
ブログに使う画像の最適化。100KB以下を目指す
わたしは1枚100KB以下を目安に画像を最適化しています。
おおむねそれくらいなら、ブログの観覧にストレスになるほどではないように思えます。
わたしのブログで画像を20枚以上使っている記事のPageSpeed Insights。
はてなブログを利用している中では、早い方ではないでしょうか。
AMPを使うと、さらに早くなります。
完璧ではありませんが、このぐらいの数値が出れば、読者さんもストレスなく観覧できるのではないかと思います。
では、以下から具体的な作業を紹介します。
写真はjpeg、イラストや図解はpngを使う
画像ファイルの拡張子としてよく使われるのは、
- jpeg（ジェイペグ）
- png（ピング）
のふたつ。
細かいことを考えると、どんな画像にどちらが最適なのかは意見が分かれるところですが、ブロガーならばざっくり
- jpeg→写真
- png→色の少ないイラストや図
と覚えておけばよいでしょう。
一般的にpngのほうが重いと思われがちですが、単色のイラストを圧縮した場合、pngのほうが軽くなることが多いです。（圧縮については後述します）
また次世代の画像形式としてwebp（ウェッピー）も検討する価値もあります。
webpを利用すると、旧来の画像形式より軽く、かつキレイな画像になることが多いようです。
ただ、ブログサービスによってはwebpを使えないものもあります。
はてなフォトギャラリー（はてなブログ）はwebpに対応していません…。
2020年秋リリースのiOS14からiPhone（Safari）でもwebpに対応しました。
そろそろwebpファーストで考えても良いかもしれません。
jpeg or pngからwebpへの変換はこちらのサイトからできます。
横幅1200ピクセルにリサイズする
縦横比を固定して、横幅1200ピクセルにリサイズ（画像のサイズを変える）ことをおすすめします。
これは先程のGoogleDiscoverが推奨しているのが横1200ピクセル以上の画像だから。
1200以上の画像なら、GoogleDiscoverに掲載された際に画像が大きく表示されるとのこと。
どうせなら対応しておいたほうが良いですよね。
もちろん、もっと小さくリサイズすればもっとファイル容量は軽くなります。
でもあまり小さいのもPCから観覧したときに見にくいですし、10KBとか20KBとか、そこまで軽くしなくても大丈夫だと思います。
リサイズはパソコンの画像ファイル観覧ツールからできると思いますが、一括変換のツールが便利です。
こちらがおすすめ。
圧縮して軽くする
リサイズした画像を圧縮ツールを通して、さらに軽くしてみましょう。
わたしはずっとこのツールを使っています。
リサイズの時点でだいぶ軽くなるので、圧縮ツールをかけてもそこまで軽くならないことも多いんですが。
これでだいたい100KB前後までファイルが軽くなったのではないでしょうか。
alt属性を指定する
最後にSEO対策の一環になる画像のalt属性の指定です。
alt属性とは、
- Googleが画像の内容を把握するヒントになる
- 画像が読み込めないとき表示される
- 記事の読み上げ機能を使ったときに発せられる
ものです。
ブロガーだと、Google画像検索からのアクセスの可能性を少しでも上げるために利用する人が多いです。
ただそうでなくても、ユーザービリティとして入れておおいたほうが良いでしょう。
alt属性を指定する方法はブログサービスによって違います。
お使いのブログサービスを確認してみてください。
ブログに使う画像のルールやマナー
直リンクはNG
フリー素材のサイトから右クリックで画像のURLを取得し、ブログに貼り付け。
すると一応は画像が表示されます。
でもこれはNG。
直リンクといって忌み嫌われる行為です。
こうしてしまうと、自分のブログが読み込まれるたびにフリー素材サイトのサーバーが読み込まれ、負荷をかけてしまいます。
みんなが直リンクしたら、サーバーダウンしちゃいますよね。
ですから、フリー素材サイトであっても、ちゃんとダウンロードしてから、自分のブログにアップロードします。
著作権侵害はNG
これは当たり前ですね（笑）
ついついマンガのコマなんかを使いたくなりますが。
アルというサイトから、合法的にマンガのコマ画像を利用することができます。（ルールの範囲内で）
マンガブロガーさんはチェックしてみてください。