javascript - 将大图像站点转换为 html/css/javascript 的最简单方法？

Question

我有这个 PSD，我需要将其转换为 html、css 和 javascript。如您所见，它的图像非常多，而且是一整页。加载这样的东西最快的方法是什么。我看过其他类似情况的问题，但我想就这种具体情况征求意见。将图像拆分为 sprite、pngcrushing 和延迟加载是最好的选择吗？使用 Svgs？图像到 CSS 转换？ ETC？提前致谢。

Answer 1

以下是一些普遍适用的建议，以及针对您的具体情况的详细信息和示例:

1. 使用语义良好的适当标记

   始终将您要做的任何事情嵌入语义正确的 HTML 中:

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

2. 使用文字代替图片

   不要使用带有文字的图片。相反，使用真实的文本。这主要是为了 SEO 和可访问性(例如，对于使用屏幕阅读器的盲人访问者)。如果您不想坚持使用像 Helvetica 这样的默认字体，您可以通过 CSS 规则 @font-face 使用 Web 字体。

   示例:“音乐发现”、“下载 Mac 应用程序”、“在 App Store 上下载”

3. 首选 CSS 属性

   某些效果可以使用 CSS3 完成:背景渐变、框阴影、边框半径和边框图像非常适合样式设置。如果您可以使用 CSS 属性获得类似的结果，请优先使用它们而不是背景图像。

   例如，“下载 Mac 应用程序”按钮很容易只用 CSS 实现，没有图像。

4. 最小化请求数

   其他一切都需要是图像。每个请求都需要花费时间，因此请尽量减少计数。背景图片很大，我会制作两张图片:一张从顶部到标题“Getting started with Cactus”。第二个从底部开始写着“发现仙人掌是如何工作的”。这两张图片之间只有纯色，因此请为该部分使用 CSS 属性 background。

   其他图像包括图标和照片。将它们全部放入一个文件(一个 Sprite )中。如果您要使用 Compass (我强烈推荐)有一个内置工具可以非常容易地将一组图像文件转换为一个具有相应 CSS 类的大 Sprite :Spriting with Compass

5. 针对移动设备进行优化

   如果您想让您的网站负责任(= 美观且可在所有设备上使用)，您需要在设计差异上多加考虑。

   移动设备上的空间较小，因此大背景图片可以小一些。这减少了页面加载时间，这在移动设备上至关重要。

   此外，您可能需要稍微更改一下布局，但如果您使用较小的图像创建 Sprite ，您的设计似乎非常适合较小的宽度。