画像の中に文字を乗せることは視認性を低下させる、そのための工夫として画像の左右どちらかにテキストエリアを設けて視認性の向上と編集コストの削減今まで画像の中に文字が入ることでPCでもスマートフォンでも同じ画像で表示されてきました。また編集の際も文字を修正するのに画像を再度修正がかかることを考慮して下記のように左右で画像エリアとテキストエリアに分けることで解消することができます。画像のみをメインコンテンツ幅100％で表示できる（テキストなしの場合）左右で画像エリアとテキストエリアを変更できる画像＋タイトルのみも可画像＋説明のみも可ブラウザ幅600px以下は画像エリアの下にテキストエリアの順で配置されますPCの場合の表示スマートフォンでの表示の場合