2

我有这个 PSD，我需要将其转换为 html、css 和 javascript。如您所见，它在图像上非常重，并且是一整页。加载此类内容的最快方法是什么。我已经查看了其他类似情况的问题，但我想就这种特定情况获得意见。将图像分割成精灵、pngcrushing 和延迟加载是最好的吗？使用SVG？图像到 CSS 的转换？ETC？提前致谢。

4

2 回答 2

0

将 css sprite 用于较小的图像。对于背景图像，不要放置整个图像并保留它的一部分。尽可能优化图像（最高 80%）。如果您可以将 CDN 用于图像、css 和 javascript，那就更好了。

于 2013-07-03T08:38:32.803 回答
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。

    示例：“音乐探索”、“下载 Mac 应用程序”、“在 App Store 上下载”

  3. 首选 CSS 属性

    一些效果可以用 CSS3 完成：背景渐变、框阴影、边框半径和边框图像非常适合样式化。如果您可以使用 CSS 属性获得类似的结果，则更喜欢使用它们而不是背景图像。

    例如，“下载 Mac 应用程序”按钮很容易使用 CSS-only 来完成，无需图像。

  4. 最小化请求数

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

    其他图像包括图标和照片。将它们全部放入一个文件（精灵）中。如果你打算使用Compass（我强烈推荐它），有一个内置工具可以非常容易地将一组图像文件转换成一个带有相应 CSS 类的大精灵：使用 Compass 进行精灵

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

    如果您要让您的网站负责（= 美观且可在每台设备上使用），您需要更多地考虑设计差异。

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

    此外，您可能需要稍微更改布局，但如果您创建具有较小图像的精灵，您的设计似乎与较小的宽度非常兼容。

于 2013-07-03T09:36:44.997 回答