图像优化是减少页面加载时间、改善用户体验和降低带宽成本的重要步骤。JPEG格式是控制图像质量的最常用级别。通过降低JPEG质量，比如说降低到90%、80%甚至50%，您将得到更小的JPEG文件。但是图像质量足够好吗？JPEG优化是很棘手的，因为如果质量太低，您将得到模糊的图像，像素化和可见的压缩伪影；如果太高，图像看起来会很好，但花费的时间太长装载。我们我想这将是伟大的，让我们的用户自动优化他们的JPEG图像而不牺牲质量。因此，我们与JPEGmini合作，这是一个在线服务，它巧妙地平衡了减小文件大小和提供高质量视觉效果的需要。JPEGmini的JPEG优化可以将照片的文件大小减少5倍，同时保持照片的原始大小质量。我们我们已经将JPEGmini与我们基于云的图像管理解决方案集成在一起，允许我们的用户通过JPEGmini内置的智能优化即时生成jpeg。继续读下去看看是怎么做到的。优化JPEG图像，同时保持高图像质量CloudDinary是一个基于云的端到端媒体管理解决方案，它自动化并简化了整个媒体资产工作流，从上载到操作再到通过多个CDN。一个我们提供的图像处理方法之一是改变JPEG的质量。让我们拍一张上传到Cloudinary的狗的JPG图像，并将其标识为"happy_dog"，原始图像是2082x2975的高分辨率照片。Is被保存为高质量的JPG格式，重2.5MB，这是一个相当大的数据传输到您的网络或移动观众。云端允许您通过将quality参数（或q（如果在图像URL中指定）设置为1到100之间的值来修改JPG的质量级别。此外，对生成的图像进行进一步的无损优化。下面的代码或动态操作URL将原始图像动态转换为质量为90%的JPEG（为了便于说明，下面的图像被调整为250x358的缩略图）。生成的图像仅重681KB，仅为原始高质量图像的19%大小：URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/q_90/happy_dog.jpgRuby：复制到剪贴板cl\u image_tag（"快乐_狗.jpg"，：质量=>90）PHP:复制到剪贴板cl\u image_tag（"快乐_狗.jpg，数组（"质量"=>90）Python:复制到剪贴板CloudinaryImage（"快乐_狗.jpg"）.image（质量=90）节点.js：复制到剪贴板cloudinary.image（"高兴吗_狗.jpg"，{质量：90}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.quality（90））.imageTag（"快乐_狗.jpg");JS:复制到剪贴板cloudinary.imageTag（"快乐_狗.jpg'，{quality:90}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"高兴吗_狗.jpg"，{质量：90}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Quality（90））.BuildImageTag（"快乐_狗.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.quality（90））.generate（"快乐_狗.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setQuality（90））.generate（"快乐_狗.jpg")!，cloudinary:云数据库）在上面的例子中，我们使用了90%的质量，这是相当高的，并确保了良好的视觉效果。但是，对于像上面这样的照片，你可以设置一个较低的JPEG质量级别，而从原稿到肉眼都无法分辨。使用Cloudinary的新JPEGmini附加组件，您可以为您的特定照片应用JPEG优化，并尽可能提高质量已上载。正在应用JPEGmini优化只需在生成图像URL的代码中将quality参数设置为JPEGmini即可。下面的操作URL和代码使用JPEGmini优化上传到Cloudinary的图像，同时通过CDN传递结果。最终得到的照片只有425KB重。这意味着与90质量的JPG相比，我们节省了近40%的文件大小，或者比原始照片节省了80%以上。在整个站点中，这可以显著改善用户体验并最小化带宽costs.urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/s----tvnvzodR--/q_jpegmini/happy_dog.jpgRuby：复制到剪贴板cl\u image_tag（"快乐_狗.jpg"，：quality=>"jpegmini"，：sign_url=>true）PHP:复制到剪贴板cl\u image_tag（"快乐_狗.jpg，数组（"quality"=>"jpegmini"，"sign\u url"=>true））Python:复制到剪贴板CloudinaryImage（"快乐_狗.jpg）.image（quality="jpegmini"，sign_url=True）节点.js：复制到剪贴板cloudinary.image（"高兴吗_狗.jpg"，{quality:"jpegmini"，sign_url:true}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.quality（"jpegmini"））.signed（true）.imageTag（"快乐_狗.jpg");JS:复制到剪贴板cloudinary.imageTag（"快乐_狗.jpg'，{quality:"jpegmini"，signUrl:true}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"高兴吗_狗.jpg"，{quality:"jpegmini"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Quality（"jpegmini"））.Signed（true）.BuildImageTag（"快乐_狗.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.quality（"jpegmini"））。签名（true）。生成（"happy_狗.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setQuality（"jpegmini"））.generate（"happy"）_狗.jpg"，signUrl:true）！，cloudinary:云数据库）如您所见，生成的照片看起来与原始照片完全相同，而原始照片的重量要大得多。上面的缩略图是由Cloudinary动态生成的，通过指定宽度和高度参数-这是自动为您的网站或移动应用程序创建大图像缩略图的简单方法。请注意，由JPEGmini优化的250x358缩略图只有15.9KB，这意味着与相同缩略图的90质量版本（重30.2KB）相比，节省了几乎50%的文件大小，而结果似乎与人类相同眼睛。确保所有图像的高视觉质量减小文件大小，因此，改善用户体验和降低带宽成本是一个重要目标。确保所有照片都能清晰地显示出来。JPEGmini的JPEG优化降低了JPEG的质量和图像大小，但仅限于JPEG在人眼看来仍然不错的程度。它分析每个图像并找到保持该特定图像良好外观所需的质量阈值，并将该质量级别应用于图像。例如，下面的图片被上传到Cloudinary，ID为"blue_nusky"。此图像为310x207，重87.1KB.urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/blue逯sky.jpgRuby：复制到剪贴板cl\u image_tag（"蓝色_天空.jpg")PHP:复制到剪贴板cl\u image_tag（"蓝色_天空.jpg")Python:复制到剪贴板CloudinaryImage（"蓝色_天空.jpg"）.image（）节点.js：复制到剪贴板cloudinary.image（"蓝色_天空.jpg")Java:复制到剪贴板cloudinary.url（）.imageTag（"蓝色_天空.jpg");JS:复制到剪贴板cloudinary.imageTag（蓝色）_天空.jpg'）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"蓝色_天空.jpg")反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.BuildImageTag（"蓝色_天空.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.generate（"蓝色_天空.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.生成（"蓝色_天空.jpg")!，cloudinary:云数据库）尝试将图像转换为质量为80的JPEG确实可以将文件大小减小到17.5KB，这样可以节省原始文件大小的80%。然而，结果看起来还不够好。天空的渐变有一些"噪音"，白线和文字也是如此。URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/q逯80/blue_sky.jpgRuby：复制到剪贴板cl\u image_tag（"蓝色_天空.jpg"，：质量=>80）PHP:复制到剪贴板cl\u image_tag（"蓝色_天空.jpg，数组（"质量"=>80））Python:复制到剪贴板CloudinaryImage（"蓝色_天空.jpg80（图像质量）节点.js：复制到剪贴板cloudinary.image（"蓝色_天空.jpg"，{质量：80}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.quality（80））.imageTag（"蓝色_天空.jpg");JS:复制到剪贴板cloudinary.imageTag（蓝色）_天空.jpg'，{quality:80}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"蓝色_天空.jpg"，{质量：80}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板转换质量