图像优化是一门科学，它涉及到在保持高视觉质量的同时，借助于不同的技术和算法本文中，我们将研究如何在Ruby中执行和实现图像优化。然而，在我们开始之前，让我们先来看看为什么图像优化如此重要。网络研讨会图像优化的重要性有很多原因可以用来优化图像。但让我们来看看其中三个主要问题：带宽-用户实际上会注意到他们在不同网站上花费的数据量。带宽要花钱。优化你的图像将节省大量的带宽，这将减少用户浏览你的网站的成本，并将你的托管计划的成本降到最低。下载时间-让用户等待几秒钟或几分钟来加载页面的用户可能不会再次访问该页面。不优化图像会增加网页加载时间，这反过来又会阻止用户访问您的平台。存储空间-减少的图像大小将自动减少所需的存储空间量。考虑这个典型的场景：一个用户上传一个5MB大小的图像，然后，你的网站通过将其减少到2MB来优化图像，而不会丢失图像的质量。存储100张这样大小的图像只需要200MB的存储空间，而不是原来大小的500MB。你刚刚削减了300MB的存储空间。此外，您还必须处理每个图像的几个因素，包括：质量格式元数据大小和调整大小在RubyPietPiet中优化图像是优化图像的宝石。在引擎盖下，它使用optipng和jpegoptim。你可以这样安装：复制到剪贴板gem安装图你可以使用它：复制到剪贴板优化（'/图像/狗.jpg’)这将优化图像，但不输出任何内容。添加选项：verbose=>正确：复制到剪贴板优化（'/图像/狗.png'，：verbose=>true）输出将是生成：复制到剪贴板处理：狗.png340x340像素，4x8位/像素，RGB+alpha输入IDAT大小=157369字节输入文件大小=157426字节尝试：zc=9 zm=9 zs=0 f=1 IDAT尺寸=156966zc=9 zm=8 zs=0 f=1 IDAT尺寸=156932选择参数：zc=9 zm=8 zs=0 f=1 IDAT尺寸=156932输出IDAT大小=156932字节（减少437字节）输出文件大小=156989字节（437字节=减少0.28%）您可以使用Piet将24/32位PNG图像转换为淡显（8位）PNG。转换可以显著减小文件大小并保留完整的alpha tra透明度：复制到剪贴板Piet.pngquant公司（'/a/path/where/you/store/the/file/to/convert'）查看文档了解更多信息options.Image_optimThis选项是一个综合优化gem，它利用了几个实用程序，如jhead、jpegoptim、jpeg recompress、jpetran、optipng、pngcrush、pngout、pngquant等。安装宝石：复制到剪贴板gem安装映像优化在ruby应用程序中，可以调用它：复制到剪贴板图像优化=ImageOptim.new图像优化=ImageOptim.new（：pngout=>错误）图像优化=ImageOptim.new（：尼斯=>20）你可以优化图像：复制到剪贴板图像_优化图像('狗.png')请查看文档，以了解可用于的各种选项小魔术师Ruby gem是ImageMagick的包装器。它允许您访问所有ImageMagick选项。将gem添加到Gemfile中，如下所示：Copy to clipboard宝石"迷你魔术"调整图像：复制到剪贴板图像=最小图像：图像.打开("狗.jpg")图像.path#=>"/var/folders/k7/6zx6dx6x7ys3rv3srh0nyfj00000gn/T/magick20140921-75881-1yho3zc.jpg公司"图像.调整大小"300x300"图像.格式"巴布亚新几内亚"图像.写入"输出.png"它将生成一个调整大小的图像副本。您可以通过不调用write方法来修改原始图像。查看文档了解使用mini的更多优化选项_马奇克。云迪纳里：一个简单的优化选择使用Cloudinary，您可以快速、轻松地优化图像，而不考虑编程语言。默认情况下，Cloudinary会自动对所有转换后的图像执行某些优化。它集成的、快速的CDN交付也有助于快速将所有图像资源提供给用户。云状优惠：自动品质和编码：使用q帴auto参数，根据特定的图像内容、格式和浏览浏览器选择最佳质量压缩级别和最佳编码设置。结果是图像具有良好的视觉质量和减小的文件大小。为示例：URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/q帴auto/woman.jpgRuby：复制到剪贴板cl\U图像标记（"女人.jpg"，：质量=>"自动"）PHP:复制到剪贴板cl\U图像标记（"女人.jpg，数组（"质量"=>"自动"）Python:复制到剪贴板云图像（"女人.jpg）.image（质量="自动"）节点.js：复制到剪贴板cloudinary.image("女人.jpg"，{质量："自动"}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.quality（"auto"））.imageTag（"女人.jpg");JS:复制到剪贴板cloudinary.imageTag('女人.jpg'，{quality:"auto"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image("女人.jpg"，{质量："自动"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Quality（"auto"））.BuildImageTag（"女人.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.quality（"auto"））.generate（"女人.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setQuality（"自动"））.generate（"女人.jpg")!，cloudinary:云数据库）你也可以用q_汽车：最佳，q_自动：低，q_汽车：好或问_自动：eco to调整您的图像。自动转换：fu auto参数使Cloudinary能够分析图像内容并选择要传递的最佳格式。例如，它可以自动将图像以WebP的形式传送到Chrome浏览器或JPEG-XR到internetexplorer浏览器，同时对所有其他浏览器使用原始格式。Cloudinary使用füu auto和q_auto，通常仍然会向相关浏览器提供WebP和JPEG-XR，但如果质量算法确定为最佳。调整大小以及使用w和h参数裁剪图像：使用url中的width和height参数，可以使用Cloudinary:URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_0.5/sample.jpgRuby：复制到剪贴板cl\U图像标记（"示例.jpg"，：width=>0.5，：crop=>"缩放"）PHP:复制到剪贴板cl\U图像标记（"示例.jpg"，数组（"宽度"=>0.5，"裁剪"=>"缩放"））Python:复制到剪贴板云图像（"示例.jpg"）.image（width=0.5，crop="缩放"）节点.js：复制到剪贴板cloudinary.image("示例.jpg"，{width:"0.5"，crop:"scale"}）Java:复制到剪贴板cloudinary.url（）.transformation（新转换（）.width（0.5）.crop（"scale"））.imageTag（"示例.jpg");JS:复制到剪贴板cloudinary.imageTag('示例.jpg'，{width:"0.5"，裁剪："scale"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image("示例.jpg"，{width:"0.5"，crop:"scale"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Width（0.5）.Crop（"scale"））.BuildImageTag（"示例.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.width（0.5）.crop（"scale"））.generate（"示例.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setWidth（0.5）.setCrop（"缩放"））。生成（"示例.jpg")!，cloudinary:云数据库）URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/h_200/sample.jpgRuby：复制到剪贴板cl\U图像标记（"示例.jpg"，：height=>200，：crop=>"缩放"）PHP:复制到剪贴板cl\U图像标记（"示例.jpg，数组（"高度"=>200，"裁剪"=>"缩放"））Python:复制到剪贴板云图像（"示例.jpg）.image（height=200，crop="scale"）节点.js：复制到剪贴板cloudinary.image("示例.jpg"，{height:200，裁剪："scale"}）Java:复制到剪贴板cloudinary.url（）.transformation（新转换（）.height（200）.crop（"scale"））.imageTag（"示例.jpg");JS:复制到剪贴板cloudinary.imageTag('示例.jpg'，{height:200，裁剪："scale"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image("示例.jpg"，{height:200，裁剪："scale"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Height（200）.Crop（"scale"））.BuildImageTag（"示例.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.height（200）.crop（"scale"））.generate（"示例.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setHeight（200）.setCrop（"scale"））.generate（"s"）