Bloggerの記事／追加ページの投稿画像にWebPへ軽量化するrwのパラメーターを自動的に付けるJavaScriptプログラムの内容を説明する。
JavaScript
// 記事の本文の要素（psbd）と記事の本文の中身に付けたnoscript要素（blct）と記事の本文の要素の複製（npsbd）と新しいdiv要素（nl）の取得
const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div");
// 新しいdiv要素の高さを画面の縦幅と同じにする
nl.style.height = "100vh";
// 新しいdiv要素をnoscript要素の前に挿入する（無地の画面が最初に素早く出るようにしてプログラムの実行で記事の表示が遅れた際の違和感を減らすため）
psbd.insertBefore(nl, blct);
// 記事の本文の複製にnoscript要素のソースコードを入れる（noscript要素のソースコードはテキストだからそのままではHTMLとして扱えないため）
npsbd.insertAdjacentHTML("afterbegin", blct.innerText);
// 記事の本文の複製から画像要素を取得
const blimgs = npsbd.querySelectorAll("img");
// 画像の場合（画像か動画ありで振り分け済みの記事の本文から動画を除外するため／遅延読み込みに動画を含めるならば不要）
if (blimgs[0]) {
// 画像の配列をPromise.allとmapで並列処理
Promise.all([...blimgs].map(blimg => {
// 画像URL（bisrc）と画像の縦横比（aroi）の取得
const bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight;
// 画像URLがblogger.googleusercontent.comのドメインの場合
if (/blogger\.googleusercontent\.com/.test(bisrc)) {
// 画像URLの末尾に既存のパラメーターがあれば「-rw」、何もなければ「=rw」を追加して書き換える
blimg.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"; } else {
// 画像URLがblogger.googleusercontent.com以外のドメインで、末尾がjpg／JPGかjpeg／JPEGのファイル形式の場合
if (/\.jpg|jpeg$/i.test(bisrc)) {
// 画像URLと後ろから二つ前の半角スラッシュで囲まれた部分のパラメーターの取得
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
// 画像URLの既存のパラメーターに「-rw」を追加して書き換える
blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }}
// 画像に縦幅がある場合、画像に横幅がなくて縦横比があれば算出して付ける
if (blimg.height) {
if (!blimg.width && aroi) blimg.width = blimg.height * aroi; }
// 縦幅がなくて横幅がある場合、縦横比があれば算出して縦幅を付ける
else if (blimg.width) {
if (aroi) blimg.height = blimg.width / aroi; }
// 画像URLの書き換えを終えて次のthen関数へ処理を移す
})).then(() => {
// 記事の本文の複製を元の記事の本文（中身がnoscriptタグで止められたもの）と入れ換える（記事の本文とWebPのパラメーターのrw付きの画像URLで画像が表示される）
psbd.parentNode.replaceChild(npsbd, psbd); }); }
// 動画の場合（遅延読み込みに動画を含めるならば不要）、記事の本文の複製を元の記事の本文（中身がnoscriptタグで止められたもの）と入れ換える（記事の本文が全て表示される）
else {
psbd.parentNode.replaceChild(npsbd, psbd); }