斜めに配置された画像を使用するサイトに取り組んでいます。画像は非常にシンプルで、内部にテキストが含まれているため、画像または CSS3transform: rotateとborder-radiusプロパティのいずれかを使用して効果を実現できます。
ただし、一方を他方よりも使用することに大きな利点があるかどうかは疑問です。CSS のみの代替案の方が読み込みが速いのではないかと考えていますが、欠点は各画像により多くのコードを使用することです。画像を使用していますが、要素ごとに多くの配置を行う必要があります。また、最初のケースの CSS は、ブラウザー固有の拡張機能を使用して検証しません。サイトがほとんどのブラウザーで正しく表示されることを確認する場合、これはどれほど重要ですか?
これらのオプションのいずれかを使用するための一般的なアプローチはありますか? あなたは何をお勧めします？
ここで考慮すべき2つのこと：
画像はモバイルデバイスの人にとってはキラーです。したがって、モバイルを使用しているユーザーをターゲットにしている場合、またはモバイルオーディエンスが多いと予想される場合は、大量の画像を使用することを再検討する必要があります（そして、ユーザーに1トンの帯域幅を支払わせる）。
alt画像内のテキスト（画像を使用している場合）は、検索エンジンで検索できず、タグの入力に長けていない限り、アクセシビリティの問題があるユーザーはアクセスできません。;-)
画像ではなくCSS3を使用する場合は、Internet Explorer（または他の古いブラウザやCSS3に対応していないブラウザ）をサポートする必要がある場合に最適です。ユーザーベースの大部分がIEで閲覧する場合は、画像を使用する必要があります。
後の、より標準に準拠したブラウザ（IE9を含む可能性がありますが、まだ経験がありません）にのみ関心がある場合は、CSS 3の方が適している可能性があります。これは、CSSファイルが大きくなる可能性があるためです。ただし、新しいデザインの新しい画像セットを作成/再作成しなくても、将来的にレイアウトをより簡単に切り替えることができます。
もちろん、両方のアプローチを組み合わせることができます。準拠するブラウザーにはCSS 3を使用しますが、条件付きコメント付きのIE固有のスタイルシートを含めて、デザインを構築するための背景画像として画像を提供します。もちろん、これは大変な作業になる可能性があります。
正直なところ、これには画像をお勧めします。CSS3 はクールですが、それをサポートしていないブラウザーではレイアウトが崩れる可能性があります。また (おそらくもっと重要なことですが)、テキストを回転または拡大縮小したときに読みやすくするには、適切なアンチエイリアスが必要であり、画像を使用してそれをより細かく制御できます。