我正在开发一个已经由其他人设计的网站。设计师使用了一张大图片 (900x700 100KB)，顶部有一个大徽标，然后是两列的背景。
每次加载页面时都会加载此图片，因为它构成了网站的基础。我应该如何处理它来缩短加载时间？
我正在考虑将其拆分为两个或多个图像，尤其是顶部的徽标。像这样拆分图像会显着减少加载时间吗？
谢谢
-edit：另外，所有图片都是.jpg，将其更改为.gif 或.png 会有什么帮助吗？
【问题讨论】：
标签： html css optimization image
使用合适的图像压缩器处理（删除不必要的元数据并找到更有效的压缩算法）图像是一个好的开始。尽可能减少颜色数量，更改格式（GIF 或 PNG24 到 PNG8）。
这可能很明显，但是...推迟到页面完全加载（如果背景图像中的颜色对比度不需要使前景文本可读）。
一个简单的方法是使背景图像的 css 选择器依赖于 body 中的一个类，例如：
...
<style type="text/css">
/*<![CDATA[*/
body.page-loaded{background:url(/path/to/image.jpg)}
/*]]>*/
</style>
</head>
<body class="page-loaded" onload="document.body.className+=' page-loaded';">
...
当然，body 标记中的“onload”属性应该被迁移出去（到页面底部的 SCRIPT 标记或外部 JavaScript 文件中）。此外，此代码不需要任何 JS 库即可运行；它可能应该使用事件观察器。
【讨论】：
将图像放在 CDN 上也可能会有所帮助（连同提到的其他事情），因为人们从 CDN 加载图像的速度可能比您的服务器快。
【讨论】：
你想做的两件事是：
缓存它的方法是对其进行版本化并使用一个遥远的未来 Expires 标头。对于版本控制，我通常只使用文件的 mtime（上次修改时间）作为查询字符串：
body { background-image: url(/images/background.png?1232343455); }
请参阅 Speed Tips: Add Future Expires Headers 以添加 Expires 标头。您可以使用脚本或使用 Web 服务器配置来完成。您需要该版本的原因是您可以更改它以强制重新加载文件，否则您需要在想要更改它时重命名它。
这样背景只会被下载一次。将文件分成多个实际上会使情况恶化，因为浏览器往往会限制并发下载的数量，并且您将下载更多的整体数据（更多的 HTTP 标头加上图像文件开销）。
【讨论】：
要尝试的事情：
重复背景：如果可以将其中的一部分分解为重复图像，则可以通过这种方式大大减小文件大小（将图像分成不重复的部分，比如一个标志，以及做的部分，然后使用CSS重复它作为背景）。
缓存：您应该检查图像是否被正确缓存。没有理由在每个页面请求上重新加载。如果 HTTP 标头正确地允许缓存，则浏览器将不会再次请求它，直到图像从其缓存中清除。
有关使用 HTTP 标头的缓存控制的一些信息，请参阅 http://www.mnot.net/cache_docs/。
使用 Firefox 的 Web Developer toolbar 检查图片的标题（点击图片 URL，然后点击信息 > 查看响应标题）
文件质量或类型：此外，您可以使用 Photoshop 以不同格式或较低质量重新保存图像。 GIF 和 JPG 图像对于同一图像的文件大小可能有很大不同，具体取决于图像的内容（GIF 非常适合具有有限和/或重复颜色的图形，尤其是当同一颜色的大部分在连续水平像素中运行时） .如果图像像照片，JPG 可能会非常好，因为高压缩可以隐藏在非常详细的图像中。
【讨论】：