设计高端网站时如何优化图片

优化网站中的图片，是提升页面加载速度、增强用户体验、提高视觉效果的重要环节之一。在现代网站设计中，图片优化不仅关系到网站的美观性，还直接影响用户访问的稳定性和网站的SEO表现。

图片对网站的影响非常大，如果图片过大，就会大大增加页面加载压力，服务器要是配置跟不上，用户就会一直停留在网站加载图片的页面，会极大消耗用户的耐心。而图片要是过小，画质就会过于模糊，影响用户体验。

在设计高端网站时，图片优化应从选择合适格式、调整尺寸、压缩文件大小、采用CDN与延迟加载等多个维度入手。通过科学优化图片，既能提升用户体验，又能优化网站性能，助力网站在竞争中脱颖而出。

1.将图片保存成Web所用格式

在网页设计中，必须确保图像大小越小越好。当然，当想要图片完好显示时，可以抛弃这条原则。在Photoshop中创建图像的完美方法，便是平衡质量与文件大小。网页设计师经常犯的一个错误，便是使用“另存为”命令，而不是使用“存储为Web所用格式”。

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式，包括图像质量、图像分辨率、浏览器兼容性和文件大小。这一命令会有一个对话框，可以用来微调图像。当调整图像的设置时，它会显示出文件的大小和图像的质量。

相比之下，“另存为”对话框则不具有这么多选择，并且其往往会保存成较大的图像。

2.考虑使用Web安全色

Web安全色在大多数浏览器和显示器上，都能够正确显示，这确保了网页无论在哪里看起来都有相同的效果。

在拾色器窗口的左下角勾选“只有Web颜色”选项。这将使窗口只显示出Web安全色。在拾色器窗口中点击小方块，可以将任何颜色转换成Web安全色。

3.考虑使用JPG的“逐行扫描”选项

JPG文件格式，是摄影和高分辨率图像的理想选择。根据目标受众，逐行扫描有时候是个不错的选择。在网站加载时，这种格式的图像会逐渐呈现(即使在现代宽带连接的互联网时代，这种等待时间的类型已不是问题了)。这使用户在图像完全加载之前便可快速预览到，令人感觉网页反应更快。

4.将图像保存成透明的PNG格式

当需要透明的图片时，PNG格式是最佳选择。大部分主流浏览器均会支持透明的PNG格式，如果不得不迎合IE时，就需要注意了：PNG格式有些透明部分在IE中会显示成灰色。也有办法来解决这个问题(如IE PNG修复 Javascript库)，但是实现起来会比较麻烦。

5.将动态图片保存成GIF格式

GIF图像格式虽然大多数情况下可以被PNG格式所取代，但有一点仍然很有用。虽然这种格式相对PNG和JPG来说显得粗糙，但GIF格式本身有个非常给力的功能，就是支持动画。

虽然有一个扩展名为APNG的PNG图片格式(其代表了便携网络图形动画)，但很少有浏览器支持这种格式。如果需要在PNG和GIF间选择，通常PNG是个更好的选择，除非需要做成动态图片。

6.注意“下载时间”这一信息

确保一个站点快速加载并且看上去很漂亮，是非常重要的，这也体现了保存和优化图片的重要性。作为企业，可以看看在文件保存选项时，一个简单的改变可以对图片大小产生怎样的影响。

比较好的方法就是：降低图像质量，直到发现图像显示质量明显降低。在优化图像时，要时刻关注“下载时间”，这将会显示在“存储为Web所用格式”对话窗口的左下角。