【Blogger】文字列の一括置換機能を使って画像を軽量化する
本ページはプロモーションが含まれています
Bloggerには画像のパラメータを変更することで画像のサイズや拡張子などを変更する機能があります。JavaScriptを用いて自動で置換したり、テンプレート側にパラメータを入れ込むなどいくつか手法がありますが、Bloggerの仕様変更があった場合は影響を受けてしまいます。
回避策として都度パラメータを手作業で設定する、という方法が考えられますが、画像の枚数が多いと骨が折れます。今回はBloggerのエディターに備わっている文字列の一括置換の機能を利用して画像の拡張子変更にトライしてみたいと思います。
事前知識（Bloggerの画像パラメータについて）
ふじろじっくさんの記事が非常に参考になります。パラメータによる画像のリサイズや加工など、具体的に何ができるのかを紹介してくださっています。
今回のゴール
画像のパラメータに「-rw」パラメータを追加することで画像の拡張子を「webp」形式に変換できるようになりましょう。これは手作業でやってももちろんできるのですが、せっかくなのでBloggerのエディターに備わっている一括置換機能も使いこなせるようになりましょう。
作業方法
まず普通に画像を挿入した記事を用意します。ファイルの拡張子などはなんでもOKです。jpgでもpngでも可です。なお事前の仕込みとして画像をエディタで挿入する際にサイズを選択することができると思いますので、記事内の画像をすべて同じサイズにそろえておきましょう。自分はいつも「特大」にしているので「特大」にしました。そうすると「w640」というパラメータが画像に追加されるので覚えておきましょう。
次にHTMLビューの画面を開き赤枠のボタンを選択します。そうすると置換メニューが開くので、置換したい文字列を入力します。今回は以下のようにパラメータを差し替えたいと思います。
【現在】
/w640-rw-e365-
【変更後】
/w640-rw-e365-rw-
※人により「w640」の部分が変わるかもしれないので、適宜読み替えてください。
まず最初に「/w640-rw-e365-」を入力し、Enterを押します。次に「/w640-rw-e365-rw-」と入力し、Enterを入力すると、「Yes」「No」「All」「Stop」と表示されます。すべての画像をwebpに変換したいので「All」を選択するとすべての画像のパラメータに「rw-」を付与することができました。これで画像がwebp形式に変換されるようになるので、SEO的にも効果があると思います。
まとめ
Javascriptなど難しい知識不要で簡単に画像のリサイズや拡張子の変更ができるので便利ですね。記事を書くときに都度入力するのが少し手間ですが画像の加工をしてからアップロードするよりは楽なので是非参考にしてみてくださいね。
