25、网页图形优化与图像翻转效果实现

网页图形优化与图像翻转效果实现

1. 网页图形优化

1.1 优化的必要性

如今，虽然 56K 调制解调器连接已不再普遍，但来自农村地区或全球部分地区的访客仍无法使用宽带。而且，随着 iPhone、安卓手机和其他智能手机成为访问网络的主要方式，在设计网页时，仍需考虑图形的整体大小。若网站上存在未优化的图形，可能会导致页面加载缓慢，部分访客会因等待时间过长而离开。

1.2 评估页面速度

可以使用 Google Chrome 和 Safari 中的开发者工具窗口来评估页面速度。在 Chrome 中，点击“工具”按钮，选择“工具”➪“开发者工具”；在 Safari 中，从“开发者”菜单中选择。通过“资源”部分可以查看页面各资源的下载速度。

1.3 减小图形文件大小的方法

1.3.1 降低文件大小

• JPEG 文件 ：在图像编辑器（如 Photoshop）中打开文件，降低其质量级别。从小图像的低质量值（如 5 到 10）开始，逐步提高，直到图像质量可接受时保存新文件。
• PNG - 24 文件 ：对于高色彩的 PNG - 24 图像，可将其保存为 JPEG 文件。
• GIF 文件 ：若要减小 GIF 文件大小，检查使用的颜色数量。若超过 200 种颜色，可考虑转换为 JPEG；若仅使用几种颜色，尝试使用 PNG - 8。

1.3.2 裁剪和缩小图像