如何处理大幅降低网站负载的大图像

Question

我正在开发一个已由其他人设计的网站.设计师使用了一个大图像(900x700 100KB),其顶部包含一个大徽标,然后是两列的背景.

每次加载页面时都会加载此图像,因为它构成了网站的基础.我该怎么做才能改善装载时间？

我正在考虑将它分成两个或更多图像,尤其是顶部的徽标.拆分图像是否会以任何显着的方式减少加载时间？

谢谢

-edit:此外,所有图片都是.jpg,会将此更改为.gif或.png帮助什么？

Answer 1

要尝试的事情:

1. 重复背景:如果将其中的一部分分解为重复图像,则可以通过这种方式减少文件大小(将图像划分为不重复的部分,例如徽标,以及执行的部分,以及然后使用CSS重复它作为背景).

2. 缓存:您应该查看图像是否正确缓存.它没有理由在每个页面请求上重新加载.如果HTTP标头正确允许缓存,则在从缓存中清除映像之前,浏览器不会再次请求缓存.

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

   使用Firefox 的Web Developer工具栏检查图像的标题(点击图像URL,然后单击信息 > 查看响应标题)

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