html - 如何处理大幅降低网站加载速度的大图片

Question

我正在开发一个已经由其他人设计的网站。设计师使用了一张大图片 (900x700 100KB)，其中在顶部包含一个大 Logo ，然后是两列的背景。

每次加载页面时都会加载此图像，因为它构成了网站的基础。我应该如何使用它来缩短加载时间？

我正在考虑将其分成两张或多张图片，尤其是顶部的 Logo 。像这样拆分图像会显着减少加载时间吗？

谢谢

-edit:此外，所有图像都是 .jpg，将其更改为 .gif 或 .png 有什么帮助吗？

Answer 1

要尝试的事情:

1. 重复背景:如果它的一部分可以分解成重复的图像，您可以通过这种方式大大减小文件大小(将图像分成不重复的部分，例如一个标志，以及做的部分，然后使用 CSS 将其重复作为背景)。

2. 缓存:您应该检查图像是否被正确缓存。没有理由在每次页面请求时重新加载。如果 HTTP header 正确地允许缓存，那么在图像从缓存中清除之前，浏览器不会再次请求它。

   参见 http://www.mnot.net/cache_docs/有关使用 HTTP header 进行缓存控制的一些信息。

   使用 Web Developer toolbar让 Firefox 检查图像的 header (点击图像 URL，然后单击信息> 查看响应 header )

3. 文件质量或类型:此外，您还可以使用 Photoshop 以不同格式或较低质量重新保存图像。根据图像内容，GIF 和 JPG 图像对于同一图像的文件大小可能有很大不同(GIF 非常适合颜色有限和/或重复的图形，尤其是当相同颜色的大部分在连续的水平像素中运行时) .如果图像类似于照片，JPG 可能非常好，因为高压缩可以隐藏在非常详细的图像中。