如果你在LQIP上搜索Google，你会看到很少的相关文章，很少的指南，也绝对没有Wikipedia的文章。在这篇文章中，我们将讨论我们从社区收集到的关于LQIP的一些反馈，并基于Cloudinary服务的内置功能提出一些建议并公开讨论。具体地说，我们将解释LQIP是什么，它们在哪里最适合使用，以及如何利用它们来加速页面加载和优化用户体验。网络研讨会LQIP背景LQIP最初是为了使网页能够有序地正确地加载，同时在实际图像的加载过程中，生成非常小的、低质量的图像来代替内容。从用例的角度来看，LQIP最好与JavaScript惰性加载结合使用。然后，一个两难的问题出现了：我们是否应该添加更多的JavaScript来帮助图像更快地加载，而实际上是在加载图像之前我们需要等待的同一个JavaScript呢？有点鸡毛蒜皮情况。那个当前的选项这种情况类似于今天关于使用现有技术实现响应图像的辩论：在性能和可伸缩性方面，哪个选项是最实际的，以及JavaScript是否可以发挥任何相关的作用。以下是选项：利用HTML5的图像属性，如srcset和size，使图像具有响应性。也就是说，始终信任浏览器根据图像密度做出正确的决定，这实际上导致对诸如设备像素比（DPR）之类的元素完全缺乏控制。由于不同浏览器对srcset的处理方式不同，因此很难扩展和提供一致的跨浏览器体验。此外，将内联HTML代码应用于每个图像都是一项劳动密集型的工作。实现Google的HTTP客户端提示（服务器端），这在某种程度上被吹捧为图像优化策略自动化的圣杯。目前，客户端提示只支持Chrome和Opera浏览器，因此不是一个理想的跨浏览器选项。我们Cloudinary一直在监视新的和令人兴奋的技术，当然也在关注客户提示。一旦在其他主流浏览器上运行，客户端提示很可能成为新的黄金标准。虽然可能不是最理想的解决方案，但最强大的候选方案仍然是基于JavaScript的客户端响应库，因为它可以获取所有相关的图像信息，例如精确的宽度和高度、视口、浏览器的用户代理和DPR，并将这些细节传递给Cloudinary。然后Cloudinary会动态地将主图像转换为完美的大小和特性，而不考虑设备、窗口大小、方向或分辨率。要了解更多关于响应图像和调整网站图像以适应多个屏幕大小的过程，不管您喜欢的选项是什么，请查看免费的Cloudinary工具responsive Image Breakpoints发电机LQIP选项给定上述选项，JavaScript是否是允许加载临时图像占位符的最佳解决方案背景图片还在预装吗？当然，有很多东西可以让JavaScript变得非常可靠，也许最适合用户体验。你猜对了：又是LQIP。提供占位符直到原始图像被预加载，然后用实际图像交换占位符也是可以实现的JavaScript.Let我们来看看目前LQIP的一些可用选项：对于响应式设计和响应图像，显示空白而不是图像占位符不是一个选项。布局的改变和内容的改变对用户体验和性能都是有害的。另一种选择是通用的图像占位符，但它们看起来既不定制也不暗示内容仍在加载。一个更好的选择是一个简单的纯色图像（可能基于所发现的调色板中的主要颜色），在主图像预加载时用简单或渐变选项填充。有趣的事实：Cloudinary会自动检测并映射出调色板和主要颜色（即使是高级搜索），这样您就可以动态地执行这些转换。使用可缩放向量图形（SVG）对象作为预览图像，也称为SQIP，如以下代码所示：复制到剪贴板

640，：crop=>"缩放"）PHP:复制到剪贴板cl_image_tag（"string_1.jpg"，数组（"width"=>640，"crop"=>"scale"））Python:复制到剪贴板CloudinaryImage（"string_1.jpg"）.image（width=640，crop="scale"）节点.js：复制到剪贴板cloudinary.image（"string_1.jpg"，{width:640，裁剪："scale"}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.width（640）.crop（"scale"））.imageTag（"string_1.jpg"）；JS:复制到剪贴板cloudinary.imageTag（'string_1.jpg'，{width:640，crop:"scale"}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"string_1.jpg"，{width:640，裁剪："scale"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Width（640）.Crop（"scale"））.BuildImageTag（"string_1.jpg"）Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.width（640）.crop（"scale"））.generate（"string_1.jpg"）；iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setWidth（640）.setCrop（"scale"））.generate（"string_1.jpg"）！，cloudinary:云数据库）LQIP版本：相同大小，压缩质量，灰度效果，优化WebP格式URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_640/e_blur：1000，q_1，f_auto/e_灰度/string_1。jpgRuby:复制到剪贴板cl_image_tag（"string_1.jpg"，：transformation=>[{:width=>640，：crop=>"缩放"}，{：效果=>"模糊：1000"，：质量=>1}，{:effect=>"灰度"}])PHP:复制到剪贴板cl_image_tag（"string_1.jpg"，数组（"transformation"=>数组(数组（"width"=>640，"crop"=>"scale"），数组（"效果"=>"模糊：1000"，"质量"=>1），数组（"effect"=>"灰度"）)))Python:复制到剪贴板CloudinaryImage（"string_1.jpg"）.image（转换=[{'width'：640，"裁剪"："缩放"}，{'效果'："模糊：1000"，‘质量’：1}，{'effect'："灰度"}])节点.js：复制到剪贴板cloudinary.image（"string_1.jpg"，{转换：[{width:640，裁剪："scale"}，{效果："模糊：1000"，质量：1}，{效果："灰度"}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.width（640）.crop（"缩放"）.chain（）.效果（"模糊：1000"）。质量（1）.chain（）.effect（"灰度"））.imageTag（"string_1.jpg"）；JS:复制到剪贴板cloudinary.imageTag（'string_1.jpg'，{转换：[{width:640，裁剪："scale"}，{效果："模糊：1000"，质量：1}，{效果："灰度"}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"string_1.jpg"，{转换：[{width:640，裁剪："scale"}，{效果："模糊：1000"，质量：1}，{效果："灰度"}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.Width（640）.Crop（"缩放"）.Chain（）.效果（"模糊：1000"）。质量（1）.Chain（）.Effect（"灰度"））.BuildImageTag（"string_1.jpg"）Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新的