ウェブパーソナライズで出力する画像を画面サイズによって変更する方法

@fukutaro kawakami‌さま

ご質問ありがとうございます。Adobeコンサルタントの棟と申します。

CSSかJSで実装ということになるかと思います。

一番シンプルなのはCSSのメディアクエリで制御するのがよろしいかと思います。

※JSでの制御でもメンテナンス性はそこまで変わらないかと思います。

<style>
.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
</style>

<img class="pc" src="http://XXXXX.com/pc.png" alt="PC用の画像" width="150" height="100">
<img class="sp" src="http://XXXXX.com/sp.png" alt="スマートフォン用の画像" width="150" height="100">
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

CSSだとメンテナンス性に欠けるとのことですが、

上記だと問題ありそうであれば、コメントください。

よろしくお願いいたします。

棟