早在2013年，Cloudinary就发表了一篇题为"处理网站图片的十大错误"的博客文章。虽然这十大错误仍然成立，但我们还提出了一些我们认为你会发现的额外要点利息。如网站上图片和视频的数量持续增长，下载速度变慢，用户体验也因此变得越来越受到任何公司的关注。今年夏天，英国《财政时报》的一篇文章援引互联网数据测量公司HTTP Archive的话称，目前网站的平均规模为2.1 MB，而两年前为1.5 MB。而这一增长的最大原因之一是视频和吸引人的图片等内容的增加，旨在增加网站的流量。这篇文章说明了按内容类型划分的平均页面的字节数（2087kb中的1312kb）几乎占到了63%。视频以10%的速度（208kb）很快就到了。网络研讨会图片对网站的影响是巨大的，它消耗了昂贵的带宽，增加了网站访问者等待图片加载的时间。当每过一秒都会降低网站的整体转化率和最终的收入时，尽可能优化你的图片和图片的交付是非常有意义的。如果你有问题，很可能你在图片上犯了一个或多个关键错误，这会妨碍你提高网站的性能和用户体验。下面我们来看看一些最常见的错误，以及如何避免他们：不使用更高效、更现代的图像格式7尽管谷歌已经在Chrome浏览器中增加了对其WebP图像格式的支持，而且微软在他们的大多数Internet Explorer和Edge浏览器中也对JPEG-XR做了同样的操作，但开发人员仍然没有接受它们。也许开发人员没有意识到这些格式，或者他们很难向各种浏览器和设备提供不同的图像格式。因此，他们坚持使用相同的JPG和PNG格式，而没有利用现代格式如何优化它们网站。怎么办修复方法：将图像转换为WebP和JPEG-XR modern格式，同时调整压缩质量以平衡格式之间的关系。另外，通过检测访问每个图像的特定浏览器，并将不同版本的图像发送到相应的浏览器，您可以确保用户接收到尽可能好的图像，在视觉质量和文件大小优化方面。16.9KB日元6.9千字节使用GIF格式嵌入短视频剪辑大多数开发人员依赖GIF图像格式在新闻网站、媒体网站和社交网站上显示视频短片。虽然使用简单的HTML图像标记可以很容易地使用GIF格式嵌入视频片段，但是对于捕获的电影来说，GIF格式并不高效，因为这些文件非常庞大，加载速度很慢，尤其是在移动设备上，导致高带宽成本和高CPU利用率如何解决方法：有几种方法可以使用现代文件格式交付和嵌入相同的剪辑和动画，比如Chrome浏览器用户的动画WebP。另一种方法是对GIF文件进行有损压缩，这会导致轻微的视觉质量下降，但会显著减小文件大小。GIF文件也可以转换成MP4或WebM视频格式，嵌入剪辑和HTML5视频标签而不是图像标签。在大多数现代浏览器中，这一切都很顺利，网站看起来完全一样，但加载速度更快。通过采取这些步骤之一，您将能够显著减小文件大小，节省页面加载时间，改善用户体验并降低带宽成本。6.3MB GIF311KB英里/小时向所有用户提供2倍（视网膜显示）图像现代移动设备和笔记本电脑具有高设备像素比（DPR）。因为网站所有者和开发者希望他们的网站在这些设备上看起来很棒，所以他们嵌入了双分辨率图像。虽然这是一个很好的实践，但许多开发人员倾向于向所有用户提供相同大小的图像。因此，使用常规显示器（例如，非视网膜显示器）的用户必须下载高分辨率图像，而他们的显示器只能从一半的分辨率中获益。这会浪费等待页面加载的时间，并且不必要地增加带宽成本。修复方法：为每个DPR值创建不同的分辨率（如常规图像和双分辨率图像），并在当前用户的浏览器中自动检测网页的DPR值。这将使您能够向使用常规显示器的用户提供常规图像，向使用Retina显示设备的用户提供2倍分辨率的图像。DPR 1.0-100x100-4.6KB DPR 2.0-200x200-12.1KB别忘了我们前一篇博文中强调的十大错误浪费浏览器端的大小调整不必要的高质量JPEG不正确的图像文件类型提供非优化图像忘记剥离图像元数据直接从服务器传送图像逐个传递静态图标使用CSS3时使用图像图像缓存设置不正确在所有传送介质中使用单个图像大小想纠正这些问题吗？您是否发现自己犯了至少一个（如果不是更多）错误，并且可以通过重新评估流程和优化处理图像的方式来获益？Cloudinary可以帮上忙。我们为您提供从上传到存储、操作、优化和交付的全过程。免费注册，了解我们如何帮助您避免这些问题。##再读图像优化使用Cloudinary优化网站图像和快速交付完整的PHP图像压缩和优化指南Python图像优化与操作Ruby中的图像优化WordPress的图像优化了解JPEG2000的优缺点在网站或本地应用程序上采用Android的WebP图像格式10个网站图片错误，加载速度慢自动缩小图像大小而不丢失质量自动生成占位符并加快页面加载3种渐进式JPEG编码方法