在开发或更新网站时，您的一些核心目标应该是提供最佳的最终用户体验并改善网站转换，因为这两个方面对于增加收入和提高公司的利润至关重要。 但是您可能会发现的一个问题是，虽然越来越多地使用图片会带来更具吸引力的设计，但它可能会对网站的性能产生负面影响。
今天，图像占网页上下载内容的60％以上，因此优化图像可以显着提高性能。 但是，图像优化既是一门艺术，也是一门科学，需要对各种参数进行仔细评估，并在内容，格式，质量和尺寸之间实现微妙的平衡。
无论您的Web应用程序支持用户上传的图像，传递静态图像还是显示来自社交网络的个人资料图片，您都可能需要对其进行调整以适合您网站的图形设计。 在本教程中，我们将探索Cloudinary全面的基于云的图像和视频管理解决方案所提供的功能。 您将看到它如何帮助您优化图像并最终改善网站的性能。
自动选择最有效的格式
图像格式可能会对加载时间产生重大影响。 但是，手动确定每个图像内容的最佳格式和编码器设置可能很复杂且效率低下。
Cloudinary基于图像内容和查看浏览器，以最有效的格式动态确定并交付每个图像 。 图像可以各种格式上传到Cloudinary，并轻松转换为其他格式。 例如，它可以将图像以WebP的形式自动发送到Chrome，或以JPEG-XR的形式发送到Internet Explorer。 在某些情况下，当您需要保留透明度时可以选择PNG。
您可能有多种原因想要更改提供的图像格式：
- 要快速加载的照片的JPEG（如果用户使用的是Chrome浏览器或您控制的移动应用，则为WebP）。
- GIF（如果图像仅包含几种颜色的图形）。
- PNG（24位）用于透明背景的高质量插图。
要以其他格式传送图像，只需将新格式指定为传送URL的文件扩展名即可。 使用Cloudinary SDK时，可以将新格式指定为资源名称的扩展，也可以使用format参数。
例：
参见演示 。
自动调整压缩质量
精确调整压缩质量和编码设置可以显着减小文件大小，而不会明显降低视觉质量。 但是，为每个图像找到正确的设置比听起来要复杂。
Cloudinary 自动执行文件大小与质量权衡决策 。 Cloudinary的智能质量和编码算法分析每个图像以找到最佳平衡，并在最小化文件大小的同时生成可感知的精细图像。 单独分析每个图像以找到最佳压缩级别和图像编码设置，可以对压缩级别进行精确调整，并通过对编码设置进行微调来补充，并且可以显着减小文件大小，而不会引起人眼察觉的任何降级。
例：
 |  |
参见演示 。
您可以在此处查看图像的变换。
自动缩放和裁剪图像以适合任何页面布局
交付尺寸大于所需显示尺寸的图像会占用不必要的带宽并减慢页面加载速度。 但是，手动创建每个图像的多个版本以适合各种屏幕分辨率可能会占用大量资源。 Cloudinary使您能够动态缩放图像分辨率，以提供与每个用户的设备分辨率和视口尺寸相匹配的最佳版本，而无需传递不必要的像素。
另外，图像通常需要裁剪以适合响应式布局和各种设备尺寸。 Cloudinary 内容感知裁剪算法使用启发式方法的组合来自动检测每个图像中的感兴趣区域，然后即时对其进行裁剪。
这些智能裁剪功能可确保将每个图像的焦点都包括在生成的派生图像中，不仅适用于带脸的照片，还适用于任何内容类型。 分别分析每个图像以找到要聚焦的最佳区域。
原始图片：
不同裁剪模式的示例：
参见演示 。
要通过转换网址查看图片，请在此处查看 。
动态网址
Cloudinary使您可以轻松地将图像即时转换为任何所需的格式，样式和尺寸，还可以优化图像以使其具有最小的文件大小，从而改善用户体验并节省带宽。
Cloudinary解决方案的核心是能够通过快速的全球内容交付网络（CDN）使用动态URL交付图像的能力。 该URL包含所请求图像的公共ID，以及任何可选的转换参数。 公共ID是映像的唯一标识符，可以在将映像上传到Cloudinary帐户时指定，也可以由Cloudinary自动分配。
可以在传递URL中的公共ID之前添加任何转换（操作）指令。 首次访问URL时，将即时创建派生图像并将其交付给用户。 派生的图像也缓存在CDN上，并且可立即用于所有请求同一图像的所有后续用户。
结论
这些技巧只是Cloudinary可以帮助您优化网站图像以提高性能和最终用户体验的几种方法。
Cloudinary网站提供有关这些功能如何工作的详细文档 。 您还可以找到博客文章，这些文章解释您在处理网站图像时可能犯的十大错误以及如何解决这些错误，以及如何分析网站图像以提高速度并降低带宽成本 。
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
