2

このPSDをhtml、css、javascriptに変換する必要があります。ご覧のとおり、画像が非常に多く、1 ページ全体です。このようなものをロードする最も速い方法は何ですか。同様の状況で他の質問を見てきましたが、この特定の状況について意見を求めたいと思いました。画像をスプライトに分割し、pngcrushing、遅延読み込みを行うのが最善でしょうか? SVG を使用していますか? 画像から CSS への変換？等？前もって感謝します。

4

2 に答える 2

0

以下に、一般的に適用されるアドバイスと、特定の状況の詳細と例を示します。

  1. 優れたセマンティクスで適切なマークアップを使用する

    何をしようとしても、常に意味的に正しい HTML に埋め込みます。

    <header>
  <h1>Cactus</h1>
</header>
<div id="main">
  ...
</div>
<footer>
  <a href="#">Contact Us</a>
</footer>

  2. 画像の代わりにテキストを使用する

    テキストを含む画像は使用しないでください。代わりに、実際のテキストを使用してください。これは主に SEO とアクセシビリティのためです (たとえば、スクリーン リーダーを使用する目の不自由な訪問者向け)。Helvetica のようなデフォルトのフォントに固執したくない場合は、CSS ルールを使用して Web フォントを使用できます@font-face。

    例: 「Music Discovery」、「Mac アプリをダウンロード」、「App Store でダウンロード」

  3. CSS プロパティを優先する

    背景のグラデーション、ボックスの影、境界線の半径、および境界線の画像は、スタイリングに最適です。CSS プロパティで同様の結果が得られる場合は、背景画像よりも優先してください。

    たとえば、「Mac アプリをダウンロード」ボタンは、画像なしの CSS のみで簡単に実行できます。

  4. リクエスト数を最小限に抑える

    それ以外はすべて画像にする必要があります。各リクエストには時間がかかるため、カウントを最小限に抑えます。背景画像は大きいので、その 2 つの画像を作成します。1 つは、上部から「サボテン入門」という見出しまでの画像です。2 つ目は、「Cactus の仕組みを発見する」と書かれている下部から始まります。この 2 つの画像の間は無地なので、backgroundその部分に CSS プロパティを使用します。

    その他の画像には、アイコンと写真が含まれます。それらすべてを 1 つのファイル (スプライト) に入れます。Compassを使用する場合(強くお勧めします)、一連の画像ファイルを、対応する CSS クラスを使用して 1 つの大きなスプライトに変換することを非常に簡単にする組み込みツールがあります: Spriting with Compass

  5. モバイル デバイス向けに最適化する

    Web サイトを責任あるものにする (= 見栄えがよく、すべてのデバイスで使用できるようにする) 場合は、デザインの違いについてもう少し考える必要があります。

    モバイル デバイスではスペースが少ないため、大きな背景画像を小さくすることができます。これにより、モバイル デバイスで重要なページの読み込み時間が短縮されます。

    また、レイアウトを少し変更する必要があるかもしれませんが、小さな画像でスプライトを作成する場合、デザインはより小さな幅に非常に適しているようです。

于 2013-07-03T09:36:44.997 に答える