Content
ページ要素【画像】とは？
ページ内に画像を挿入する要素となります。
画像にリンク付けをすることもできます。
利用が必要なケース・利用しなくて良いケース
・利用が必要なケース
ページ内に画像を挿入したい場合には必要です。
・利用しなくて良いケース
画像を挿入しない場合には必要ございません。
追加方法
1.上メニュー【ファネル】＞「ファネル一覧」より設定するファネルをクリックします。
2.「ページ一覧」より要素を追加するページの【編集】をクリックします。
3.ページ編集画面にて「画像」を追加したい場所の【＋】をクリックします。
4.ポップアップ表示内にて【画像】をクリックします。
5.画像マークを表示されたら追加完了となります。
画像挿入方法
1.詳細メニューの「画像URL」のアップロードをクリックします。
※URLで貼り付けたい場合には、入力バーにURLを貼り付けてください。
2.PC内のファイルより、挿入したい画像を選択して開きます。
＜画像ファイル形式＞
挿入できる画像ファイル形式は、JPEG、PNG、GIF、WebPとなります。
画像データを軽くしてページの読み込みスピードを早くさせたい場合は、WebPをお勧めします。
3.選択した画像が反映されたら、挿入完了となります。
※サイズを調整したい場合には、詳細メニュー「幅」で行えます。
リンク付けする方法
1.詳細メニュー「リンク先URL」に表示したいリンク先のURLを設定します。
※リンクの開き方は「同じ画面」「別タブ/別ウィンドウ」より選択できます。
2.ページで画像をクリックすると、設定したリンク先が開かれるようになります。
loading属性・height属性・width属性の指定
左メニュー「高度な設定」において以下の設定が可能です。
・loading属性
・height属性
・width属性
■loading属性
・eager(ファーストビューの画像に推奨)
・lazy(ファーストビュー以外の画像に推奨)
※「デフォルト」に設定した場合の挙動
ーーー
・ファネルの高速表示モードが「利用しない」の場合は以下となります。
ファーストビュー内に表示される画像：eager
ファーストビュー内に表示されない画像：lazy
・ファネルの高速表示モードが「利用する」の場合は以下となります。
ファーストビュー内に表示される画像：lazy（読み込み後はeagerになります）
ファーストビュー内に表示されない画像：lazy
・ページ内に【ボタン】要素を設置していて、
かつ【ボタン】要素の動作が「指定した要素にスクロール」の場合
loading属性は指定されません。（画像読み込みがないとスクロール位置がズレるため）
ーーー
特にランディングページを広告に出しているケースで
ファーストビューに画像が含まれている場合、
ファネルの高速表示モードに加えて
ファーストビューの画像は「eager(ファーストビューの画像に推奨)」
に設定してご利用いただくことを推奨いたします。
■height属性・width属性
画像のサイズをHTML属性（imageタグ内）に指定することができます。
height属性とwidth属性を指定しておくことで、ページを開いた際
画像が読み込まれる前にサイズ分の領域が確保され、
画像表示前と後でページのレイアウト崩れを最小限に抑えることができます。
特にランディングページを広告に出しているケースでは、
・高速表示モード：利用する
・ファーストビューのloading属性：eager(ファーストビューの画像に推奨)
に加えて、height属性・width属性もご活用ください。