僕がこのブログを公開して約3年ほど…
ブログを書き始めた当初からやっておけば良かったと思うことがあります。
それが、画像のサイズ変更と圧縮してファイルサイズの縮小です。
ブログ記事はアイキャッチとなる画像があるのとないのでは大違いで、記事の読みやすさがだいぶ変わってきますし、実際にアクセス数も変わってきます。
実際、文字ばっかりだと飽きてしまいますよね。
そこで、記事内でも画像を多く取り入れたりするんですが、画像ファイルが大きすぎるとページ速度が下がって、ページを表示させるまでに時間がかかりすぎて離脱の原因となってしまいます。
ちょっとネット環境が調子悪いと「画像重すぎて全然開かない〜」なんてことあなたも経験ないですか？
なので、画像のファイルサイズを縮小することによってページ速度をあげたほうがいいのです。
今回は、ブログ記事の画像をサイズ変更して圧縮する方法。
ツールと共に使い方を紹介していきます。
慣れれば簡単2ステップです。
- 画像サイズ変更
- 画像を圧縮
もう一度言いますが、面倒だけどやっておいた方がいいです。あとからリライトするのは面倒すぎる…
画像サイズ変更
まずは画像サイズを変更しましょう。
ブログ記事のトップにくるアイキャッチでは、ワードプレスを使っていると、テーマごとにぴったり合うサイズが変わってくると思います。
僕が使っているJINというテーマでは、760×428pxがちょうどいいらしい。
「テーマ名 画像サイズ」「テーマ名 アイキャッチサイズ」などで検索してみてください。
ちなみにですが、無料のテーマでおすすめしているのが「バズ部」の「Xeory」というテーマ。
調べてみると、画像の推奨サイズは 1200×630以上、少なくとも600×315でした。
記事内に使うアイキャッチでは、自分が使いたいサイズに変更しましょう。
たとえばワードプレスなら、
- サムネイル150×150
- 中300×169
- 大サイズ530×298
これらのサイズに合わせましょう。
サイズ変更に使うツール・使い方
僕が使っているツールはこちらです。
iLoveIMG https://www.iloveimg.com/ja
まずは、TOPの画面、上の段、左から二番目の「画像サイズの変更」をクリックします。
そこから変更したい画像を選択します。ドロップでも挿入できます。
右の欄の「サイズ変更オプション」で幅（px）高さ（px）を入力します。
デフォルトは、「横縦比を維持」にチェックマークが入っているので外しておきます。
幅のみ変更したい場合は、チェックマークをいれたまま入力すると自動的に高さを調整してくれますね。
入力したら「画像のサイズ変更」をクリック、画面が変わるので、「サイズ変更された画像をダウンロード」をクリックして終了です。
これでステップ1は終了です！あとは画像を圧縮するだけなので、簡単です。
画像を圧縮するツール・使い方
画像を圧縮するツールはこちらを使っています。
圧縮TinyPGN https://tinypng.com/
先ほどのサイズを変更したサイトでも圧縮は可能なんですが、圧縮の技術がいい為か、こっちの方が多くの人に使われています。
圧縮は簡単、真ん中に先ほどの画像をドロップするか、クリックするとファイルフォルダが開きますので、選択して、緑色のボタン「すべてをダウンロードする」をクリックするとZIPフォルダになります。
今回のテストでは、140KBが41KBになんと71%もファイルサイズが小さくなりましたね。
これでページの読み込み速度がだいぶ変わります。
こんなふうにまとめて、圧縮も出来ますのでひとつの記事でたくさん画像を使う場合は、まとめて行なって時間短縮しましょう！
面倒だけどやっておこう画像圧縮
今回紹介したツールはこの2つ。
- 画像サイズ調整
iLoveIMG https://www.iloveimg.com/ja - 圧縮
圧縮TinyPGN https://tinypng.com/
今ではリライトするたびに必ず行う作業です。
最初からやっておけば…最初からユーザビリティを落とすこともなかったのに…と思います。
ブログ記事を公開する前に必ずやっておくことをおすすめしています。
リライトに関しての記事はこちらを参考にしてください。
「これからセールスライターになりたい」という人へ
- セールスライティングWeb講座
- ブログを作れる会員サイトの招待
セールスライティングを学んで「集客する仕組み（ブログ）」が作れます。
セールスライター必須ツールプレゼント中！
- 『保存版』リサーチシート
- 『保存版』セールスレターチェックシート
