gtagset=(1)です

Lazy Loadプラグインはbase64と相性が悪い!

  • 作成日:2020-7-10

画像を軽くする場合のテクニックとして、小さな画像をいちいちロードしないSprite画像にまとめる方法や遅延読み込みをするLazy Load機能を使う場合がある。

/wp/wp-content/uploads/2019/11/apple_devices2.jpg photo
base64との相性の問題

本サイトではLazy Loadプラグインを利用していましたが、ちょっと困った不具合があったので報告します

画像そのもののを軽くする方法としてBase64で画像を変換してインラインでソースに埋め込む方法があります。これを利用するとimgタグは以下のようになります。

<img src="data:image/png;base64,iVBORw....>

通常、src=の次には画像ファイルを指定しますが、画像ファイルではなく文字列となっています。これがbase64で画像を変換した文字列です。メールシステムなんかはこんな形で画像を添付しています。

さて、本題のこのbase64形式との相性の問題ですが、私の使っていたLazy Loadバージョン0.6.1ですが、srcにbase64を指定すると遅延読み込みした直後に、http(s)://がsrc=直後に自動挿入されてしまうようです。つまり以下のとおり

<img src="http://image/png;base64,iVBORw...>

data:がhttp://に置き換わっている。

解決方法は、Lazy Loadプラグインをやめて、BJ Lazy Loadプラグインバージョン1.0.9に変更すると直りますBJ Lazy Loadは、以前使っていましたが3年前に更新が終了していたので、今回のLazy Loadに変更していたのですが、思わぬ伏兵がひそんでいました。

みなさん、Lazy Loadとbase64(data URI Scheme)は相性が悪いです。気をつけてください!

2020/6/22 追記
その後、確認作業をしてみましたら、
・他サイトにおいてある画像のsrcが消えてしまうことがある
・wordpress popular postsウィジェットの画像が消える
等の不具合が発生しています。
base64画像以外は、lazy loadプラグインの方が総合的に安定しているようで出戻りしました。

以上

スポンサーリンク

googleカスタム検索

ランキング

インデックス

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る