画像変更できない、読み込みが遅い場合

ページ編集で画像の変更をしても変更内容がうまく反映されないケースがあります。この記事では、その原因と対策についてご説明します。

画像が表示されない理由 #

画像変更が適用されない場合、主な原因は変更前の画像に遅延読み込み(レイジーローディング)が使われていることになります。

遅延読み込みとは #

遅延読み込み(レイジーローディング)とは、フロントエンドのパフォーマンス最適化手法の一つで、ユーザーが当該要素にアクセスするまで画像やその他のリソースの読み込みを延期させるものです。 ページの初期ロード時間と全体的なリソース要件を削減するため、ユーザー体験向上の目的で使用されます。

しかし、変更したい画像に遅延読み込みが使用されていると、Experienceの編集結果が遅延読み込みにより上書きされてしまい、変更後の画像が表示されない現象が発生します。

Note：遅延読み込み（レイジーローディング）コードの例
下記は、遅延読み込みを実行するコードの例です。ページ内のimg要素はそれぞれsrc属性にプレースホルダ画像を持ち、data-src属性に実際の画像URLが格納されています。 これにより、ユーザーが画面をスクロールしたことでこれらの画像要素(imgタグ)がブラウザ上の表示領域に入った場合に、実際の画像のURLがsrc属性に設定されるような仕様になっており、実際の画像がプレースホルダ画像に取って代わり表示されます。

遅延読込が使用されているか確認する #

ページ編集で変更した画像が表示されない、または読込が遅い場合、対象の画像に遅延読み込みが使用されているか確認しましょう。方法としては、主観的に確認する方法とブラウザの検証ツールを用いて確認する方法があります。

主観的な確認

実際にページをスクロールして画像の読み込み状況を確認します。下記のようにプレースホルダ画像が表示されれば、遅延読込が使われている可能性があります。この方法は主観的です。

検証ツールで確認

ブラウザの検証ツールでも確認することができます。検証ツールを開いて画像の場所を選択し、画像の構造を確認します。’data-src/data-srcset’ のような属性があれば、遅延読込になっている可能性が高いです。

画像を正常に表示する方法 #

画像に遅延読み込みが使用されていることが確認できたら、下記の設定を行うことで、変更後の画像を正しく表示することができます。遅延読込は ‘data--src’または’data--srcset’ からソースアドレスを取得しているので、それに対応するdata-*属性を手動で書き換える作業になります。

• 1Experienceの編集画面で画像を変更します
• 2変更後の画像を選択して、ツールバーからHTML編集を開きます。
  
• 3遅延読込が使用されている場合、”src=”と”data-src=”に続く画像のソースアドレスが2つあります。先に書かれているソースアドレスが、Experienceで変更した画像のものになりますので、それをコピーしてください。
  
• 4もう一方のソースアドレスを削除し、上記でコピーしたソースアドレスを貼り付けてください。
  
• 5適用をクリックしてプレビューで画像が変更されているかどうかご確認ください。

以上です。