前端开发面临的优化难题之一是向用户显示高质量的图像，但同时最小化图像文件。较小的图像可以加快加载时间、降低传输成本并改善用户体验。问题在于，过多地减小文件可能会导致图像质量降低，并可能让用户观感不太好。利用Cloudinary，在尺寸和质量之间取得恰到好处的平衡正是本文所探讨的课题。
选择最佳图片格式 f_auto
某些格式（如 AVIF、WebP 和 JPEG-2000）在传输 Web 图像方面比标准 JPEG 格式更高效，但并非所有浏览器都支持它们显示。最好的解决方法是根据用户所使用的浏览器提供对应的最佳图像显示格式。
Cloudinary 能够自动检测哪个浏览器正在请求图像，然后选择最高效的图像格式来显示。只需添加参数fetch_formatautof并将其值设置为auto（f_auto在 URL 中）。
下面的示例显示了两个示例图像。第一张图片URL没有使用 Cloudinary 的f_auto ，因此在所有浏览器上都以 JPEG 格式显示（同时动态缩放到 300px 宽度，并保留其纵横比）。第二张图像URL使用 Cloudinary 的f_auto ，因此作为 AVIF（14.6 KB – 节省 56.5%）、WebP（16.1 KB – 节省 52%）或 JPEG-2000（21.0 KB – 节省 37%）显示到支持的浏览器。
https://res.cloudinary.com/demo/image/fetch/w_300,f_auto/https://upload.wikimedia.org/wikipedia/commons/6/68/Dwayne_Johnson_at_the_2009_Tribeca_Film_Festival.jpg
new CloudinaryImage("docs/shoes.jpg")
.resize(scale().width(300))
.delivery(format(auto()));
cloudinary.image("docs/shoes.jpg", {width: 300, fetch_format: "auto", crop: "scale"})
上面网址示例演示了首先上传到 Cloudinary 的图像的自动格式选择，无论是使用我们的API上传，还是从您的服务器代码，又或者直接从您的访问者的浏览器或移动应用程序中。
除了直接上传外，Cloudinary 还支持通过其公共 URL 获取图像，即时转换这些图像并通过 CDN 提供优化的最终图像。这意味着，您可以轻松地将 Cloudinary 与您的网站集成，而无需修改您的基础架构和代码。只需在图片 URL 前加上 Cloudinary 的前缀即可。借助 Cloudinary 的自动格式化功能，您还可以动态转换和提交远程图像并提高您网站的性能。
例如，以下从维基百科获取的巨石强森的图片的URL。远程图像由 Cloudinary 获取，永久存储在云中，根据用户浏览器的需要动态转换为 AVIF、WebP 或 JPEG-2000，并通过高端 CDN 进行优化和缓存。
https://res.cloudinary.com/demo/image/upload/w_300,f_auto/docs/shoes.jpg
底层工作原理
自动格式化功能在后台提供实时功能，随着浏览器支持的发展和变化，我们的服务也在不断更新，Cloudinary 客户会获得不断增长的价值。
在选择最佳格式时，Cloudinary 不单单通过浏览器或 accepts-header选择格式。Cloudinary 检测浏览器生态系统，并借助庞大的用户社区，检测浏览器适配中的问题并立即做出反应。有时，浏览器可能会不支持不同格式，即使特定浏览器宣传支持特定格式也是如此。有时，这些故障是部分故障，例如，特定版本的操作系统上的 Safari 浏览器支持中断，或者有时故障是针对具有特定属性（如透明度）的图像，或者可能是更特殊的情况。使用 f_auto 意味着您的网站媒体将根据每张图像的分析对浏览器错误和浏览器更新做出反应。
不影响图片质量的情况下缩小图片文件大小
Cloudinary 的动态格式选择功能可以与 Cloudinary 的自动质量选择功能结合使用，进一步增强图片质量。在 URL 中前缀包含Cloudinary参数，会传送到 Cloudinary网站， 根据图像的格式和内容自动确定图像的最佳质量设置，从而保证视觉较好的同时实现最小的文件大小。当您在投放 URL 中一同添加f_auto，q_auto 时，Cloudinary 算法还会检查不同的图像格式是否在保持视觉质量的同时提供较小的文件大小
例如，将图像缩小到 400 像素的宽度，并同时提供自动质量选择和自动格式选择 ，将作为 AVIF （14KB – 节省 62%）、WebP （20.2KB – 节省 45%） 或 JPEG-2000 （24.3KB – 节省 34%） 提供给支持的浏览器，以及 JPEG （36.6KB） 提供给所有其他浏览器：
https://res.cloudinary.com/demo/image/upload/w_400,f_auto,q_auto/canyons.jpg
new CloudinaryImage("canyons.jpg")
.resize(scale().width(400))
.delivery(format(auto()))
.delivery(quality(auto()));
cloudinary.image("canyons.jpg", {width: 400, quality: "auto", fetch_format: "auto", crop: "scale"})
此外，在f_auto，q_auto一起使用时，决定最佳图像格式，不仅要考虑访问者的浏览器，还要考虑图像内容。例如，Cloudinary 算法可能会确定 PNG 格式更适合包含绘图等内容的特定图像。对于某些图像，甚至可以自动选择 PNG8 格式，以非常高效的文件大小提供出色的效果。
例如，以下 URL 仅使用自动图像质量选择（不带q_auto，f_auto ）动态生成 400 像素宽的图形版本。
https://res.cloudinary.com/demo/image/upload/w_400,q_auto/cloud_castle.jpg
结果是一张 JPEG 图像 （20.4KB），如果您仔细观察，您可以看到 JPEG 格式的有损特性导致了一些视觉伪影。在下一个具有相同图形的示例中，我们将合并使用 q_auto，f_auto
https://res.cloudinary.com/demo/image/upload/w_400,q_auto,f_auto/cloud_castle.jpg
在这种情况下，算法决定使用 PNG8 格式对图像进行编码。图像看起来更好，没有伪影，重量更轻——只有 16.5KB
最后：自动转换完成
使用 Cloudinary 的格式选择算法，可以轻松自动交付最佳格式的图像。该功能还可以与自动选择质量相结合，形成一个强大的动态解决方案，以最小的图片质量和最大的视觉质量提供所有图像。 此处讨论的所有图像转换和交付功能均可用于 Cloudinary 的所有计划（包括免费计划），无需额外费用。
