将重图片站点转换为html/css/javascript的最简单方法？

我有这个PSD，我需要转换成html、css和javascript。这是非常沉重的图像，你可以看到，是一个完整的页面。加载这样的东西最快的方法是什么。我已经研究过其他类似情况的问题，但我想就这一具体情况征求意见。将图像拆分为精灵、pngcrushing和延迟加载是否最好？使用SVG？图像到CSS转换？等提前感谢。

对于较小的图像，请使用css sprite。 对于背景图像，不要放置整个图像并保留部分。 尽可能优化图像（高达80%）。

---

如果您可以将CDN用于图像、css和javascript，那就更好了。

以下是一些普遍适用的建议，并针对您的具体情况提供了详细信息和示例：

使用具有良好语义的适当标记

始终在语义正确的HTML中嵌入您要执行的任何操作：

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

仙人掌
...

使用文本而不是图像

不要使用带有文字的图像。相反，使用真实文本。这主要是为了搜索引擎优化和可访问性（例如，对于使用屏幕阅读器的盲人访问者）。如果您不想使用Helvetica这样的默认字体，可以通过CSS规则

@font-face

使用Web字体

示例：“音乐发现”、“下载Mac应用程序”、“在应用商店下载”

首选CSS属性

使用CSS3可以实现一些效果：背景渐变、框阴影、边界半径和边界图像对于样式非常有用。如果您可以使用CSS属性获得类似的结果，请选择它们而不是背景图像

例如，“下载Mac应用程序”按钮只需使用CSS即可轻松完成，无需图像

最小化请求计数

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

background

其他图像包括图标和照片。将所有文件放入一个文件（精灵）。如果您打算使用（我强烈推荐）有一个内置工具，可以非常轻松地将一组图像文件转换为一个带有相应CSS类的大精灵：

针对移动设备进行优化

如果你想让你的网站有责任感（=美观且在每台设备上都可用），你需要在设计差异上多加考虑

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

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

---

对不起，这是离题的，但是。。。漂亮的设计！顺便说一句，阴影不一致，将石头/仙人掌与电话/按钮进行比较。你可能想看看这门课程：没有让你明白“不要放置整个图像并保留部分”。