使用Cloudinary向每个用户提供完美的图像

什么是Cloudinary？ ( What is Cloudinary? )

Cloudinary has reinvented the way that media is managed online. It provides a comprehensive cloud-based image and video management solution used by web and mobile application developers at major companies around the world to streamline media management and deliver an optimal end user experience.

Cloudinary重新发明了在线媒体管理的方式。 它提供了一个全面的基于云的图像和视频管理解决方案，供全球主要公司的Web和移动应用程序开发人员使用，以简化媒体管理并提供最佳的最终用户体验。

主要特点 ( Main Features )

• On-the-fly image and video manipulation
  动态图像和视频处理
• Responsive image delivery
  响应式图像传递
• Image optimization
  图像优化
• Digital asset management
  数字资产管理
• World-wide CDN network
  全球CDN网络
• Image/video upload
  图片/视频上传
• Cloud storage
  云储存
• Robust management dashboard
  强大的管理仪表板
• SDKs for popular development frameworks
  适用于流行开发框架的SDK

新功能 ( New Features )

We'll be taking a look at the new features Cloudinary has announced that make image manipulation and delivery so much simpler.

我们将看一下Cloudinary宣布的使图像处理和交付更加简单的新功能。

• Automatic content-aware cropping
  自动内容感知裁剪
• Intelligent content-aware encoding
  智能的内容感知编码
• Dynamic format selection
  动态格式选择
• Automatic responsive images
  自动响应图像

自动感知内容的裁剪 ( Automatic Content-aware Cropping )

One of the coolest new features includes content aware cropping. Cloudinary automatically detects the region of interest in every image and then crops them on the fly to fit the graphic design and layout, on any device, without losing focus on important content.

最酷的新功能之一包括内容感知裁剪 。 Cloudinary会自动检测每个图像中的关注区域，然后在任何设备上即时裁剪它们以适应图形设计和布局，而不会失去对重要内容的关注。

It's as easy as setting the gravity transformation parameter to auto.

就像将重力转换参数设置为auto一样简单。

Take the following url:

使用以下网址：

http://res.cloudinary.com/demo/image/upload/face_left.jpg

Here we're asking to simply return the uploaded image, face_left.jpg.

在这里，我们要求简单地返回上传的图像face_left.jpg 。

Now say we want to crop the image, we can set width and height to 200px and request an ordinary crop:

现在说我们要裁剪图像，我们可以将width和height设置为200px并请求普通裁剪：

http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill/face_left.jpg

Here we set crop equal to fill, which sets gravity to center by default, but as you can see her face is partially cut off. Let's set gravity to auto and see what happens.

在这里，我们将crop设置为fill ，默认情况下将重力设置为中心，但是如您所见，她的脸被部分切除。 让我们将重力设置为auto ，看看会发生什么。

http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill,g_auto/face_left.jpg

And just like that, the addition of a single parameter allows us to intelligently crop any image we upload on the fly.

就像这样，通过添加单个参数，我们可以智能地裁剪所有即时上传的图像。

Here's another example

这是另一个例子

智能内容感知编码 ( Intelligent Content-aware Encoding )

Another problem we face with images is determining the trade-off between image quality and file size. Precise adjustment of compression level complemented by fine tuning of encoding settings can significantly reduce the file size without any noticeable degradation to the human eye. Using Cloudinary's quality transformation parameter, we can automate the file size versus quality trade-off decision based on the specific image content and format.

我们在图像方面面临的另一个问题是确定图像质量和文件大小之间的权衡。 精确调整压缩级别，再加上对编码设置的微调，可以显着减小文件大小，而不会对人眼造成任何明显的影响。 使用Cloudinary的quality转换参数，我们可以根据特定的图像内容和格式自动执行文件大小与质量权衡决策。

Cloudinary will deliver the image with optimal compression and encoding settings, generally resulting in a huge reduction of file size without any noticeable difference in image quality.

Cloudinary将为图像提供最佳的压缩和编码设置，通常会大大减小文件大小，而图像质量不会出现明显差异。

Original upload - 569 KB:

原始上传-569 KB：

http://res.cloudinary.com/demo/image/upload/woman.jpg

Automatic quality optimization - 65.9 KB:

自动质量优化-65.9 KB：

http://res.cloudinary.com/demo/image/upload/q_auto:best/woman.jpg

Comparing the two images, we can see a significant decrease in file size while still maintaining the quality of the image, all done by adding a single parameter to the url.

比较这两个图像，我们可以看到文件大小显着减少，同时仍保持图像的质量，所有这些都通过向URL添加单个参数来完成。

动态格式选择 ( Dynamic Format Selection )

Another way to optimize our images is by utilizing Cloudinary's automatic format selection. This feature allows us to request the best image format based on the user's viewing browser. For instance, we can save bandwidth by delivering WebP images to Chrome users or JPEG-XR to Internet Explorer users, simply by setting fetch_format to auto.

优化图像的另一种方法是利用Cloudinary的自动格式选择 。 此功能使我们可以根据用户的浏览器请求最佳图像格式。 例如，只需将fetch_format设置为auto，便可以通过将WebP图像传递给Chrome用户或JPEG-XR传递给Internet Explorer用户来节省带宽。

For example, the following jpg image when scaled down to a width of 500 pixels is delivered as WebP to Chrome browsers at 22.4 KB, JPEG-XR to Internet Explorer browsers at 48 KB or delivered as a regular JPEG at 57.5 KB to browsers that don’t support either formats.

例如，以下jpg图像（按比例缩小到500像素时）将作为WebP以22.4 KB的形式传递给Chrome浏览器，以JPEG-XR以48 KB的形式传递给Internet Explorer浏览器，或者以57.5 KB的常规JPEG形式传递给不支持该功能的浏览器。不支持这两种格式。

http://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg

自动响应图像 ( Automatic Responsive Images )

Last but not least, we'll explore how Cloudinary handles the automatic delivery of responsive images. As developers, we have to make sure we consider the huge range of device screen resolutions that our app may be displayed on. A big problem a lot of us face is deciding what size image to serve depending on the screen size. One resolution just isn't going to cut it anymore.

最后但并非最不重要的一点是，我们将探索Cloudinary如何处理响应图像的自动传递。 作为开发人员，我们必须确保考虑到可能会显示我们的应用程序的各种设备屏幕分辨率。 我们很多人面临的一个大问题是根据屏幕尺寸来决定要提供哪种尺寸的图像。 一种解决方案就是不再削减它。

Our next problem is that it's not always easy to decide just how many versions of the same image should be created.

我们的下一个问题是，决定要创建同一图像的多少个版本并不总是那么容易。

Should you create 3 different versions of one image? Five? Ten? Cloudinary offers a way to intelligently generate the optimal image sizes for any image on your site. If can easily determine the cost/benefit of every size reduction and only create the number of images necessary. This can all be requested on the fly using just one url.

您是否应该为一个图像创建3个不同的版本？ 五？ 十？ Cloudinary提供了一种方法，可以智能地为您站点上的任何图像生成最佳图像大小。 如果可以轻松确定每种尺寸缩小的成本/收益，而仅创建必要的图像数量。 只需使用一个URL即可即时请求所有内容。

结论 ( Conclusion )

With these features, you can now upload one high resolution copy of any image and then automatically adapt the image, in real-time, to focus on the most important region of the image, select optimal quality and encoding settings and responsively deliver the image on any device in any resolution or pixel density.

有了这些功能，您现在可以上传任何图像的高分辨率副本，然后实时自动调整图像以专注于图像的最重要区域，选择最佳质量和编码设置，并以响应方式将图像传递到任何分辨率或像素密度的任何设备。

Be sure to sign up for a free account and explore all that Cloudinary has to offer.

确保注册一个免费帐户，并探索Cloudinary提供的所有功能。

This post is sponsored by Cloudinary through Syndicate.

此帖子由Cloudinary通过Syndicate赞助。

翻译自: https://scotch.io/tutorials/deliver-the-perfect-image-to-every-user-with-cloudinary