关于处理网站图片，你犯这些错误了吗？

 对于高流量的网站来说，带宽很可能是你的IT成本的“罪魁祸首”，远远超过了虚拟主机和存储成本。此外，如此大量的流量需要时间，因此访问者在浏览您的网站时可能需要很长时间来等待图片的输入。由于加载时间过长，纵观从一端到访客丢弃的IT成本，您可能会考虑如何在线管理您的图片。当每一秒传输减少你网站的整体转换和最终收入时——它使你想要优化你的图片和图片传输，并变得非常有意义。使用Cloudinary，我们希望为网站和移动应用程序上的所有相关图片提供一个结论性的解决方案。通过存储，您可以从上传覆盖、操作、优化和交付。作为一个开发者，你不需要担心图像相关的R&D和IT.Cloudinary解决了大量与图片相关的共同问题。对于尚未使用Cloudinary的开发者来说，我们认为它很可能会有帮助，如果我们列出了我们每天经常遇到的问题，以及他们如何解决它们。1.我们经常观察到，开发者使用的一个快速方法是使用浏览器端的图片尺寸，而不是在服务器端调整图片尺寸。情况通常是一样的——网站上有许多特定尺寸的缩略图，然后图形设计发生了变化。新的图形设计要求缩略图的尺寸略有变化，我们的开发者有时是随机的，有时是故意的，使用原来的大图片，只是调整图片的CSS高度和宽度，使图片看起来像缩略图。在现代浏览器中，最终的结果看起来是一样的，但加载图片所消耗的带块是不同的。您的网站访问需要宝贵的时间来加载不必要的拉图片，而您则浪费多余的带宽来传输图片。老浏览器的问题将更加突出，因为它们调整图片大小的算法效率低于平均水产品。这个问题比你想象的要普遍得多。它可以在我们每天访问的许多网站中找到。例如，当您访问Yahoo的前头版页面时，您会注意到“热点”新闻中加载的所有缩略图像素都是您看到的尺寸的两倍。如何解决： 对于开发者/设计师-请确保您想要发布的图片与他们网站的大小完美匹配。即使是同一张图片，还应使用不同尺寸的缩略图来适应不同的页面，创建不同尺寸的缩略图，而不是使用相同的大尺寸图片，并依靠浏览器来调整其尺寸，这是值得的。2.不必要的高质量JPEG图片JPEG图片确实给web带来了革命性的影响。多年来，这种破坏性的压缩格式使web开发人员能够消耗低于任何其他竞争对手的带宽来加载具有高细节的高分辨率图像。我们仍然看到开发人员和图形设计师不试图压缩图像。事实上，在大多数网站中，你可以在没有明显损失的情况下安全地降低JPEG的质量。而85%的JPEG图像质量 这似乎很常见。我们可以看到，许多网站的质量一般为95%，而较低质量的水产品可以在不损害整体体验的情况下大大解决带宽问题。最终的结果是带宽消耗更高，网络延迟对用户体验的影响。上述两张图片的质量几乎相同，左边是质量， JPEG95% 大小有 右边是34KB JPEG80% 则只有 17KB，只要下载时间的一半，加载时间是前者的两倍。这样的小质量损失是值得的。如何解决: 不要害怕尝试更低质量的JPEG.对于一些网站，我们发现使用50%的JPEG质量可以给我们带来非常合理的结果。当然，高质量的JPEG看起来总是更好，但高质量的提高并不总是值得高质量图片带来的额外带宽和等待时间。3.错误的图片文件类型目前的网站是JPEG、PNG和GIF三分天下。3.错误的图片文件类型目前的网站是JPEG、PNG和GIF三分天下。JPEG和GIF平均占网站的40%左右，PNG占剩下的20%。关于这三种格式的好(坏)，他们每个人在网站上都有不同的角色。使用错误的图片格式是浪费访问者的时间和你自己的钱。在Cloudinary中，我们最常见的错误是用PNG投递照片。对PNG的一般误解是，它是一种无损格式，并认为它是照片中最有可能的替代品。一般来说，这是正确的，没有必要进行优化。获得高质量的JPEG图片只需要一点PNG文件大小。左边是PNG图片，大小110KB。右边是JPEG图片，看起来差不多，但只有15KB大小。怎样破：要时刻注意哪些图片格式适合内容显示。PNG应该用于计算机生成的图片(图表、logo等)。)，或者你需要一些透明的图片(图片覆盖)。JPEG应用于显示捕获的图片。在显示动画时应使用GIF(使用JJax载入动画等)。).PNG在几乎所有方面都比GIF好，这些都是常见的原则。4.我们知道PNG是一种无损格式，但你知道它能进一步压缩吗？发布同样精细的图片，免费的PNG压缩工具可以将PNG的大小降低到50%。图片的细度几乎相同，只有一半的大小可以大大提高网站的响应速度。然而，许多开发者和网站设计师跳过了这一步，发布了未经优化的图片。如何打破:PNGCrush和OptiPNG是两个开源图片优化库。如果你还没用过，你真的应该用。如果不需要自动优化过程，可以去雅虎smush。它提供手动压缩PNG服务。以上是雅虎smush使用样例。它起作用了。许多现代网站忘记删除图片冗余的meta数据，允许访问者上传照片。无论是用户轮廓图还是最近旅行的共享照片，这些都有现代相机的原始信息，很可能会在照片中引入大量的meta信息。在EXIF/IPTC格式中，meta数据包含大量的相机和照片信息，包括相机型号、日期和时间信息、光圈、快门速度、焦长、测光模式ISO、全球定位和许多其他信息片段。在大多数情况下，删除meta信息是一个很好的想法。对隐私保护和文件尺寸减少都有好处。不幸的是，我们很少看到开发者花时间清除meta信息，这增加了带宽，损害了用户的浏览体验。如何打破：确保您在用户上传的照片中删除您的图片和meta信息。如果这些信息是必要的，请确保它的可用范围，而不是作为图片的一部分。提示：即使图片的meta信息对您的网站不必要，也有一个信息片段，即图片的原始摄影方向，这对于正确显示照片至关重要。在清除Exif信息时，确保您在Exif信息的基础上将图片旋转到正确的方向。6.直接从服务器发送图片。一旦您的网站内容到位，您的下一个目标是确保您的所有网站图片尽快分发给您的访问者。在cloudinary中，最常见的网站问题之一是开发人员在自己的服务器中存储图片，通常在同一台机器上与他们的网站相同。这里发生了两件事：首先，你的服务器忙于发布图片，而不是专注于发布你独特的网站内容；其次，你错过了最惊人的图像分发解决方案之一——内容分发网络（ContentDeliveryNetworks）。如何解决: 内容分发网络是一种易于使用的服务，它管理你的网站图片，比你的网站本身管理这些图片要快得多.CDN依赖于世界各地的大量服务器，或者"边界".当访问者浏览你的网站时，他们会自动路过到最近的边界文职，这样图片就可以尽快发布，大幅减少延迟.CDN按要求的带宽收费，略比主机服务提供商的带框贵，然而，今天的CDN价格非常实惠，值得一用。有许多CDN服务提供商可供选择。只要你注册，你就可以开始享受它的好处. AmazonCloudFront 这是一个好的开始.7.单个静态图标单独传输 除图片和缩略图外，网站还有图标和辅助图像(auxiliaryimage).Logo,箭头、星形、符号、标志等都能提升网站的用户体验. 构图按钮、阴影、边框图片片段， 还有其他图片片段，可以让你根据艺术家的要求， 动态创建各种部件(widget).一个网站的小图片太多了，你不敢相信. 拿 对于Google的搜索结果页面.如果你经常使用Google，你可能会对它的简洁界面印象深刻。图标几乎看不见，对吧？图标几乎看不见，对吧？大错特错。Google 搜索结果页面上有80多个小图标 (!) 开发者犯的一个常见错误是将这些小图标嵌入到他们的网站中。浏览器下载这么多图片需要相当多的时间。在下载图片时，作为访问者，我们需要忍受网络延迟的痛苦，因为普通浏览器平均只支持下载不超过6张图片，所以延迟乘以图片的下载批次。您的访问者将需要等待他们的浏览器完成所有这些图片的下载，您的web服务器可能无法响应，因为它需要处理如此多的下载请求。您的访问者甚至可能会放弃等待，转而继续他们的日常浏览活动。如何修复:一个简单的解决方案是使用CSSprite(CSS精灵)，一个单一的图像包含你所有的小图标。您的网页从您服务器上的单个图片中下载和修改，页面的HTML使用可替代的CSS类名指向大图片中的小图片。 谷歌的访问者现在只下载了一个单一的图像，而不是80张图片。他们的浏览器将从谷歌服务器上快速下载并缓存这些单一图片，所有图片将立即显示。8.当我们将网站的设计转换为HTML元素时，许多开发人员仍然将按钮设计为图片。由于旧浏览器不支持使用CSS来实现阴影、弧角和特殊字体，开发者过去习惯于使用小图片来实现上述特征，即基于图片的解决方案。不幸的是，这个解决方案需要大量的图片，最终损害了访问者的体验，难以管理，增加了开发所需的时间和成本（考虑如何更改嵌入在图片中的文本）。现代浏览器支持使用简单的CSS来实现阴影、圆角矩形和特殊字体。然而，我们仍然看到许多网站仍然使用基于图片的按钮。这是一种常见的错误。例如，看看这部分CNN的按钮—— 这一小技巧 使用简单的CSS指令很容易实现 61KB 在减少带宽消耗的同时，提高加载时间和用户体验。如何解决: 如果您的图形设计师能够提供基于CSS3的元素。如果您想支持旧版本的IE，您还应该确保您的界面可以优雅地降级到至少可用的设计功能（尽管不能完美地显示原始效果），或者选择像CSS3PIE这样的CSS3模拟方案。9.错误的图片缓存设置通常很少改变你的网站图片文化。HTTP缓存指令允许访问者的浏览器缓存这些图片，任何其他服务都可以这样做（CDN、proxies等。).图片一旦缓存，以后访问你的网站就会用缓存而不是一遍又一遍的下载。通过减少页面载入时间，正确的缓存设置可以提高用户体验，同时也可以减少您的网站带宽，降低成本。不幸的是，我看到许多案例没有正确地利用缓存。最常见的是担心更新图片时长时间的缓存设置，因为他们认为网站访问者会看到旧图片而不是新图片。这种看似棘手的情况可以添加指纹(MD5、时间戳等。)到图像URL轻松避免。通过向图像添加指纹URL，您可以知道图像何时发生变化，URL已经发生。当URL发生变化时，浏览器将被迫重读图像。目前的Web开发平台可以自动向所有图片添加这样的指纹，从源头上解决这个问题。如何解决：我们强烈建议积极使用全站图片缓存，如果可以的话，设置图片'Expires'HTTP头。除了图像URL的指纹外，它还可以立即提高您网站的性能。10.在所有输送介质中使用相同的图像尺寸，您的网站正在被许多不同的设备浏览。近年来，随着手机和平板电脑用户数量的增加，看看你网站的流量分析，显示了这里设备访客数量的急剧增加。网站上是否有移动访问者，或者你是否打算为你的网站内容提供移动版本，你还有一个决定——如何发送图像，移动设备上的相同图像，但台式机的分辨率太低。我们经常看到开发者为不同准备的分辨率提供相同的图像，并在客户端缩放图像。虽然图像看起来很好，但用户浪费时间加载大尺寸图像，你必须支付额外的带宽费用。这对3G用户和漫游用户特别不公平，他们需要支付大量的高额费用