画像に埋め込まれたテキストの使用は、非常に制御された使用のための悪い習慣ですか？
画像にテキストを書くことについてどう思いますか？
ウェブサイト全体で言っているわけではありません...しかし、画像カルーセルなどの特定の主要な場所では。また、ブラウザーがレンダリングできないフォントタイプがある特殊なケースについては話していません。標準のフォントを使用し、大きすぎない（3/4の箇条書き）テキストについて話している。
カルーセルを構成する画像にテキストを埋め込む必要がありますか？または、テキストを「実際のテキスト」HTMLとして画像に適用する必要がありますか？
画像でテキストを使用する利点と欠点は何ですか？
まあ、私の頭の上からちょうど（そしてこの投稿に対するコメントに基づいて追加されたいくつかの新しいもの）...
短所
- テキストは拡大縮小できないため、標準のブラウザのフォント拡大縮小オプションと一緒に調整されません
- SEOのメリットはありません-検索エンジンは画像を読み取らないため、画像内のテキストは無視されます。
- スクリーンリーダーはそれを読み上げないので、目の見えるユーザーにのみ役立ちます。 （まあ、いくつかのAltテキストがあればそれがアナウンスされるかもしれませんが、実際の段落/ヘッダーテキストではなく、説明テキストになります）
- 画像は（テキストとは異なり）ベクトルではないため、ズーム/ピンチズームするとテキストがゆがみます。これが実際のテキストである場合、これは起こりません。
- 「Retina」ブラウザは、非Retinaデバイスほど鮮明にテキスト画像を表示しません。
- 画像はテキストよりも大きいため、ページの読み込み時間とサーバーリクエストが増加します。
- ページ翻訳者（Google翻訳など）は画像テキストを翻訳できなくなり、これにより将来のローカリゼーション/国際化が難しくなります。
- ページをオフラインブラウザ（Pocketなど）に保存すると、画像のテキストが完全に無視される場合があります。
- コンテンツは内部検索では認識されないため、画像テキストで言及されている用語をウェブサイトで検索したユーザーは、結果ページに表示されません。
- 保守性-テキストを変更する必要がある場合は、テキストを変更するだけです！画像が作成された元のファイルとそれを作成したプログラムがない限り、画像内のテキストを変更することはできません。したがって、画像がPhotoshopで作成された場合、テキストを変更するには、元のPhotoshopファイルとPhotoshopアプリケーションが必要になります。
- ユーザーは画像からコピーして貼り付けることができなくなります。
長所
- それはあなたのデザイナーを幸せに保ちます（彼らがそれを彼らが設計したものと同じではないデバイスでそれが見えるまで）。
それが会社のロゴのようなものでない限り、画像をテキストとして持つ必要は実際にはありません。
font-faceを使用するなどの手法を使用すると、実際のフォントをユーザーのブラウザーに配信できます。
画像をテキストとして使用するそのテキストを実際に読み取る必要がある場合はお勧めできません。
ジェイコブニールセンの著書「アイトラッキングウェブの使いやすさ」では、広告の画像やテクスチャ背景の上にテキストを配置することはおすすめしません。
これは、画像にテキストを追加してユーザーがデータをコピーするのを防ぐための、古くて良い解決策かもしれません。現在、サイトでのコピーを完全に防ぐことができます。また、要素を選択不可にすることもできます。
注意すべきもう1つの重要な点は、画像にテキストを使用することにより、最終的には要素を変更するための作業が追加されることです。私はangular.jsのサポーターのように聞こえるかもしれませんが、それを使用することで、双方向のデータバインディングによって動的に同じ効果を得ることができ、これはユーザーにとってより良い体験を生み出します！