8. 在可以使用CSS3的时候使用图片当我们把一个网站的设计转换成HTML元素的时候，许多开发者仍然将按钮设计成图片式的。因为旧的浏览器不支持使用CSS来实现阴影，圆弧角，和特殊字体，开发者在过去习惯了使用小图片来实现上述的特性，亦即基于图片的方案。 不幸的是，这种解决方案需要大量的图片，最终损害了浏览者的体验，并且也很难管理，增加了开发所需的时间和成本（想想如何更改一个图片中嵌入的文字）。 现代浏览器支持使用简单的CSS来实现阴影，圆角矩形和特殊字体。然而，我们仍然看到许多网站依旧在使用基于图片的按钮。这是一类常见的错误。例如，看着这部分CNN的按钮—— 这一小技巧 是一张能够很容易的使用简单的CSS指令来实现的 61KB 图片, 提升加载时间和用户体验的同时降低带宽消耗. 如何解决: 无论何时确保尽可能使用CSS3. 如果你的图形设计师能提供基于CSS3的元素可供使用. 如果你想要支持老版本的IE，你也应该确保你的界面能优雅的降级到至少能保证设计的功能可用(尽管不能完美的显示出原来的效果), 或者选择一种像CSS3 PIE这样的CSS3仿真方案. 9.错误的图片缓存设置一般你的网站图片文化很少改变。HTTP缓存指令可以让访问者的浏览器将这些图片缓存起来，任何其他的服务都可以这么干（CDN、proxies等等）。一旦图片被缓存，在今后访问你的网站的时候将会使用缓存而不是一遍又一遍的下载。 正确的缓存设置通过减少页面载入时间来提高用户体验，同时也减少你的网站带宽而减少花费。 不幸的是，我见到许多案例都没有正确的利用好缓存。最常见的是，对于更新图片时漫长的缓存设置的担心，因为他们认为网站访问者会看到旧的图片而不是新的图片。 这个看似棘手的情况可以通过添加一个指纹（MD5、时间戳等）到图像URL来轻松地避免。通过添加一个指纹到图像的URL你可以知道图像何时变化了，已经它的URL。当URL变化时，浏览器会强制重新读取图像。目前的Web开发平台能够自动给所有的图片添加这样一个指纹，从源头上解决这个问题。 如何解决：我们强烈建议对全站的图片积极使用缓存，如果可以的话设置图片的'Expires'HTTP头。除了图像URL的指纹之外，这样可以立即提升你网站的性能。 10.在所有的输送介质中使用相同的图像尺寸你的网站正被许多不同的设备浏览。近年来，随着手机和平板电脑用户量的崛起，看一下你网站的流量分析，其显示了来自这里设备访客量的大幅上升。 网站是否有移动访客，或者你是否打算为你的网站内容提供一个移动版本，你还剩一个决定——如何发送图像，移动设备上的相同图像但在台式机分辨率就太低了。
我们常看到开发者们图省事，即为不同备的分辨率提供相同的图像，在客户端缩放图像。尽管图像看起来效果很好，但用户在加载大尺寸图像上浪费了时间，你也要支付额外的带宽费用。这对3G用户和漫游用户是特别不公平，他们需要支付大量高分辨率图片的额外费用。 总结本文中提到的这些最常见的网站图片处理问题, 其实也是我们在 Cloudinary 上最常碰到的问题. 并不是说问题只有这么多, 我们只是尽量把影响效率较大的问题提出来, 并给出通俗的解释, 好让你以此为研究起点, 找到合适的解决方案. 如果你没听说过 Cloudinary , 那我可以很高兴的告诉你, Cloudinary 已经把上面提到的, 没提到的问题解决了. 每张上传到 Cloudinary 的图片都可以动态生成任意尺寸, 格式, 质量的缩略图. 因此你可以在各种设置中找到适合自己网站, 满足客户期望的配置. Cloudinary 提供简单易用, 可管理性强的 Sprite . 所有图片都自动剥离(stripped), 按尺寸优化, 并使用缓存配置合理的高速 CDN 传送, 书中提到的最佳实践几乎都用上了. 最后值得一提的是, Cloudinary 的云动态图片尺寸调整能力完美适应相应式设计. Cloudinary 除了这些, 还提供图片上传管理, 云存储和免费注册(free to sign up). 来 Cloudinary 看看, 跟我们说说你的想法. 如果你发现, 尚有至关重要的问题, 我们没有在文本中列出来, 欢迎在本帖下方留言. 万分感谢.
|
