4.发表非优化的图片我们知道PNG是无损格式，但是你知道它可以进一步压缩吗？发表同样精细的图片，免费的PNG压缩工具可以将PNG大小减少达到50%。同样精细的图片，而只有一半大小？当我脑残嘛。不幸的是，许多开发者和网站设计者跳过了这一步，发表了非优化图片。 怎么破：PNGCrush和OptiPNG是两个开源图片优化库，如果你还没有用过，你确实应该用用了。如果你不需要自动优化进程，你可以前往雅虎的smush。它提供手动压缩PNG服务。
上面是一个雅虎smush使用样例。它起作用了。 5.忘记脱掉图片meta数据许多现代网站允许访问者上传照片。无论它是用户的轮廓图还是近期旅行的共享照片，这些都带有现代相机的原始信息，很可能引入许多meta信息到照片中。 meta数据在EXIF/IPTC格式中，包含大量的相机和照片信息，包括相机型号、日期和时间信息、光圈、快门速度、焦长、测光模式、ISO、全球定位和许多其他信息片段。 大多数情况下，脱掉meta信息都是一个很棒的主意。对于隐私保护和减少文件尺寸来说都很好。不幸的是，我们很少看到开发者花时间清除meta信息，这增加了带宽同时也损害了用户的浏览体验。 怎么破：确保你清除了你的图片以及用户上传的照片中的meta信息。如果这些信息是必要的，确保它的可用范围，而不是作为你的图片的一部分。提示：即使图片的meta信息对你的网站来说不是必须的，但是有一个信息片段，那就是图片的原始摄影方向，对于正确显示照片来说是很关键的。当清除Exif信息时，要确保你在Exif信息基础上将图片旋转到了正确的方向。 6.直接从服务器发表图片一旦你的网站内容就位了，你的下一个目标就是确保你的所有网站图片尽可能快的分发给你的访问者。 在Cloudinary中，一个最常见的网站问题是，开发者在他们自己的服务器中存储图片，而且通常和他们的网站在同一机器上。这里发生了两件事：第一，你的服务器忙着发表图片而不是专注于发表你的独一无二的网站内容；第二，你错过了最惊人的图像分发解决方案之一——内容分发网络（Content Delivery Networks）。  如何解决: 内容分发网络是很容易使用的服务，它管理者你网站的图片，比你网站自身管理这些图片的发布要快很多. CDN 依赖于遍布于全世界的超大数量的服务器，或者说 "边界". 当访问者浏览你的网站是，它们会自动路由到最近的边界文职, 这样图片就能以及尽可能快的速度发布，大幅减少延迟. CDN依据所需的带宽收费，稍微比主机服务商的带框比较贵, 不过如今的CDN价格已经实惠到相当值得一用. 有许多CDN服务提供商可供选择. 只要注册就能开始享受其好处. Amazon 的 CloudFront 算是一个好的开始. 7. 静态图标单个分开传送除了图片和缩略图之外, 网站还有图标和辅助图像(auxiliary image). Logo, 箭头, 星形, 符号, 标志, 这些都能提高网站的用户体验. 组成按钮, 阴影, 边框的图片片段, 以及其他图片片段, 可以让你根据美工的要求, 动态创建各种部件(widget). 一个网站的小图片多到你无法相信. 拿 Google 的搜索结果页面来说. 你要是经常 Google, 可能对它的简洁界面还有印象。 几乎看不到图标, 对吧? 大错特错。Google 搜索结果页面的小图标 80 个都不止 (!)
开发者会犯的一个普遍错误就是把这些小图标原样嵌入到他们的网站中。浏览器需要花在下载如此多图片的时间是相当多的。下载一张图片时，我们作为访问者需要忍受网络延迟之苦，而因为一般的浏览器平均只支持同时下载不超过6张图片, 所以延时还要乘以图片的下载批次。你的访问者将需要等待他们的浏览器完成对所有这些图片的下载，而你的web服务器可能会因为要应对如此多的下载请求而变得无法响应。你的访问者甚至可能会放弃等待，转而继续他们日常的浏览活动。 如何修复: 一个简单的解决方案是使用CSS Sprite（CSS精灵）， 一个单一的图像包含你所有的小图标。你的网页从你服务器上的这个单一图片上被下载和修改，并且页面的HTML使用了可替代的CSS 类名去指向大图片内部的小图片。 现在，代替80张图片，谷歌的访问者下载的仅仅是一个单一的图像。他们的浏览器将会快速下载并缓存这些从谷歌服务器上的单一图片，并且所有的图片将会立即呈现。 |
