云服务器价格_云数据库_云主机【优惠】最新活动-搜集站云资讯

企业网站_个人web服务器_好用

小七 141 0

你应该在上传或按需转换图像吗?

作为开发人员,您希望并预期您的网站或移动应用程序将由不同的用户在各种设备上访问。为了改善用户体验,无论查看设备是什么,您都需要确保每个图像都能适应不同的图形布局、设备分辨率和其他查看要求。例如,对于一个电子商务网站,一个图像将显示在不同的页面上——主页、产品页面、购物车等等——并且将在桌面、手机或平板电脑上查看。这意味着您需要为每个图像创建多个版本,而对于一个包含数百个图像的网站,手动操作就不需要了可扩展。云计算使您能够根据查看要求以编程方式转换来自各种源的原始图像。网络研讨会懒惰和渴望的转换Cloudinary提供了多种转换图像的策略。在本文中,我们将讨论两个选项:"lazy transformations",这是默认选项,和"eager transformations",可以通过向upload API添加一个标志来选择打电话。懒转换需要将图像按原样上传到Cloudinary,然后仅当用户请求图像时才转换图像。对给定用户的转换执行一次,缓存并通过CDN传递给后续用户请求。这个转换类型是默认选项,因为它通过在上生成转换来限制带宽使用-要求。让看看示例:复制到剪贴板//上传图片到云cloudinary.v2。上传器.upload('女士.jpg',函数(错误,结果){控制台.log(结果);});复制到剪贴板//请求图像并延迟转换图像cloudinary.url("女士.jpg",//转化{转换:[{宽度:400,高度:400,重力:"面",半径:"最大",裁剪:"裁剪"}]})上载的图像仅在使用cloudinary.url,返回转换后的图像URL。这就是请求在网络中的样子标签:甚至虽然转换后的图像很小(4.2kb),但仍需要976ms才能完成请求。考虑一下,如果在我们的网站的一个页面上有多达50张图片需要这样的转换,那需要多少时间。此外,客户在创建这些图像的1秒内尝试访问这些图像时,由于并发的原因,将得到损坏的图像(错误420)通道。那里在这种情况下,由于高度并发的访问模式,等待第一次访问来创建派生图像或视频不是一个好主意。例如,如果您运行一个新闻站点,并在tweet上发布您的新文章,以供数千用户同时访问,并且文章页面上的图像和视频不是事先创建的,那么这些用户中的许多人可能会遇到并发问题。在这种情况下,第一个用户在访问图像和视频时会遇到延迟,而当这些转换正在创建时,其余用户将得到损坏的图像和视频。重新加载页面可以解决这个问题,但是您可能会因为然后。一个解决这个问题的方法是让编辑在发布之前预览他们的页面。然而,随着响应式设计、实时通信和多个设备访问内容,最好确保图像是在上传。现在让我们考虑一个更好的解决方案:渴望转变。渴望正如名字所说,eager需要在上传过程中转换图像,因此当请求转换时,它们将始终以最佳性能进行优化和交付。因此,当用户请求映像时,Cloudinary不再需要对该映像执行转换,因为它已经在上传。使用对于所有请求,转换任务只执行一次(在上载期间),这样用户就不会体验到任何请求延迟。到执行一个急切的转换,使用eager数组,它接受转换配置对象:复制到剪贴板//上传时执行转换cloudinary.v2。上传器.upload("女士.jpg",//急切的转变{渴望:[{宽:400,高:300,裁剪:"垫"},{宽度:260,高度:200,作物:"作物",重力:"北方"}]},函数(错误,结果){控制台.log(结果);};您可以将任意多个转换对象传递给eager数组。一旦上载和转换完成,将执行回调完成了。你也可以请求图像,但这次,你没有变换:复制到剪贴板//请求图像而不转换图像cloudinary.url("女士.jpg");这就是请求在网络中的样子标签:让的考虑一个比lazy转换示例中的图像更大的图像(22.8k)。图像请求在469ms时完成,比lazy快大约50%方法。转化通过API,URLCloudinary为当今大多数可用平台提供了一个SDK,包括.Net、Node、PHP、Ruby、Python、React和Angular。如果您想直接与API对话,这是可能的。对于急切转换,可以使用eager参数来执行操作:复制到clipboardeager=c_crop,w_400,h_400,g_face/w_50,h_50,c_scale | w|30,h_40,c_crop,g_south该参数接收用管道字符(|)分隔的转换字符串列表。链式转换用斜杠(/)隔开。我现有的图像怎么样?毫无疑问,您的云上已经存储了其他图像。也可以对它们使用渴望转换。Cloudinary允许您使用显式方法:复制到剪贴板//更新现有图像cloudinary.v2。上传器.显式("女士",{渴望:[{width:200,裁剪:"scale"},{宽度:360,高度:200,作物:"作物",重力:"北方"}]},函数(错误,结果){控制台.log(结果);};该方法将现有图像的名称作为第一个参数,然后将选项(它是转换的一部分)作为第二个参数,然后使用回调函数来处理已完成的更新.结论渴望转换提供了更好的性能和更好的用户体验,同时消耗更少的资源。转换只是您可以从Cloudinary获得的众多特性之一。学习更多。这个帖子最初出现在苏格兰威士忌