今日推荐:7款图片内存优化工具
当需要对图片进行内存优化又不影响图片的高清度时,我们需要根据特定情况借助一些图片优化工具。
推荐的7款图片内存优化工具有:
(二)图片需要优化的参考依据是什么?
一、 谷歌页面速度洞察
采取google pagespeedinsights在线网址检测网站速度得分,里面会有关于各项性能的建议,包括需要优化的图片
二、谷歌灯塔
Google Lighthouse如何将图像标记为可优化的?
Lighthouse收集页面上的所有JPEG或BMP图像,将每个图像的压缩级别设置为85,然后将原始版本与压缩版本进行比较。如果潜在节省量为4KiB或更大,则Lighthouse将图像标记为可优化。
谷歌灯塔和google页面速度洞察测试的结果是一样的,区别是谷歌灯塔是chorme插件,google页面速度洞察是在线网址。
(二)如何优化图像? 优化图片内存大小的几种方式:
一、使用映像CDN
内容交付网络或CDN由全球范围内的一系列服务器和存在点组成,这有助于缩短页面加载时间,并通过使内容离用户更近来减少内容的下载时间。用最简单的方式,CDN可以解释为您网站的一组镜像,其托管方式是将内容从距离他们最近的服务器提供给您的目标受众。
CDN包括图像CDN, JS CDN, CSS CDN。
映像CDN可以分为两类:自我管理和第三方管理。
自我管理的映像CDN:对于拥有易于维护自己的基础架构的工程人员的站点,自我管理的CDN可能是一个不错的选择,Thumbor是当今唯一可用的自我管理映像CDN。
第三方管理的影像CDN:第三方映像CDN提供映像CDN作为服务。就像云提供商免费提供服务器和其他基础架构一样;
图像CDN专门从事图像的转换,优化和交付。您也可以将它们视为用于访问和操作网站上使用的图像的API。对于从图像CDN加载的图像,图像URL不仅指示要加载的图像,还指示尺寸,格式和质量等参数。这样就很容易为不同的用例创建图像的变体。切换到映像CDN可以节省40-80%的映像文件大小。
二、压缩影像:
使用工具压缩图像:
工具1:imagemin (付费)
支持多种图像格式,并且易于与构建脚本和构建工具集成
工具2:https://squoosh.app/ (免费)
推荐使用这几种图片格式:browser png, jpeg xl,mozJpeg,
压缩后清晰度和大小对比:
三、用视频替换GIF动画:
用视频替换GIF动画,以加快页面加载速度,视频格式推荐mp4和webm。
可使用FFmpeg创建webm视频,WebM视频比MP4视频小得多,但并非所有浏览器都支持WebM,因此生成这两者是有意义的。
Gif, mp4, webm 视频格式大小对比:
动画gif具有自动播放功能,视频通过video元素<video autoplay loop muted playsinline></video> 也可实现自动播放。
另外,该<video>元素需要一个或多<source>个子元素,这些子元素指向浏览器可以选择的不同视频文件,具体取决于浏览器的格式支持。同时提供WebM和MP4,这样,如果浏览器不支持WebM,它就可以退回到MP4。
四、延迟加载图像:
延迟加载是一种根据需要而不是预先加载资源的策略。这种方法在初始页面加载期间释放了资源,并避免了加载从未使用过的资产。
使用lazysizes延迟加载图像。lazysizes是最受欢迎的用于延迟加载图像的库。它是一个脚本,可以在用户浏览页面时智能地加载图像,并确定用户不久将要遇到的图像的优先级。
添加lazysizes方法:
-
将lazysizes脚本添加到您的页面。
-
选择您要延迟加载的图像。
-
更新这些图像的<img>和/或<picture>标签。
五、提供响应式图像
向移动设备提供桌面大小的图像可能会比实际需要多使用2-4倍的数据。代替“一刀切”的图像处理方法,而是为不同的设备提供不同的图像大小。
两种最流行的图像大小调整工具是Sharp NPM软件包和ImageMagick CLI工具。
Sharp的软件包是自动调整图像大小的一个不错的选择(例如,为您网站上的所有视频生成多种尺寸的缩略图)。它可以快速,轻松地与构建脚本和工具集成。
另一方面,ImageMagick便于一次性调整图像大小,因为它完全从命令行使用。
这两个都涉及到开源代码,偏技术,就不多做讨论了。Thumbor(开源)和Cloudinary等图像服务也值得一试。
六、提供尺寸正确的图片
Lighthouse可以轻松识别大小不正确的图像。运行性能审核(Lighthouse> Options> Performance),然后查找适当大小的图像审核的结果。审核会列出需要调整大小的所有图像。
没有按比例缩小图像,却将其添加到页面中。该图像看起来不错,但是却浪费了用户的数据并损害了页面性能。
有两种类型的CSS单位用于指定HTML元素(包括图像)的大小:
绝对单位:无论使用哪种设备,使用绝对单位设置样式的元素将始终以相同的大小显示。有效的绝对CSS单位示例:px,cm,mm,in。
相对单位:使用相对单位设置样式的元素将以不同的大小显示,具体取决于指定的相对长度。有效的相对CSS单位示例:%,vw(1vw =视口宽度的1%),em(1.5 em = 1.5倍字体大小)。
图像大小调整两种方法:“好的”和“更好的”。
两者都将提高性能,但是“更好”的方法可能需要更长的时间来理解和实施。但是,它也会网站带来更大的性能改进。
-
好的方法:
相对单位:将图像调整为适合所有设备的尺寸。
绝对单位:调整图像大小以匹配其显示尺寸。
-
更好的方法:
相对单位:使用响应图像提供不同的图像以显示尺寸。
对于较小的设备而言,在所有设备上均可使用的图像将不必要地过大。响应图像技术,特别是srcset 和尺寸,允许你指定多个图像版本和设备,选择适合它的工作原理最好的大小。
绝对单位:使用srcset和大小属性来提供不同的图像以不同的显示密度。
“显示密度”是指不同的显示器具有不同的像素密度的事实。在所有其他条件相同的情况下,高像素密度的显示器将比低像素密度的显示器锐利。
如果要调整许多图像的大小,使用脚本或服务来自动执行该过程更为方便。
七、使用WebP图像
WebP图像比JPEG和PNG图像小(通常将文件大小减少25-35%)。这样可以减小页面大小并提高性能。
-
YouTube发现,切换到WebP缩略图可使页面加载速度提高10%。
-
当Facebook切换到使用webp格式时,比jpeg文件节省了25-35%,比png格式文件节省了80%。
WebP是JPEG,PNG和GIF图像的理想替代品。此外,WebP提供无损压缩和有损压缩。在无损压缩中,不会丢失任何数据。有损压缩会减小文件大小,但会以降低图像质量为代价。
如下图所示,webp格式的图片,size大都是20KB以内。
将图像转换为WebP的方法:
人们通常使用以下方法之一将其图像转换为WebP:cwebp命令行工具或Imagemin WebP插件(npm软件包)。如果项目使用构建脚本或构建工具(例如Webpack或Gulp),则Imagemin WebP插件通常是最佳选择,而对于简单项目或仅需转换图像一次,CLI是一个不错的选择。
将图像转换为WebP时,可以选择设置各种压缩设置-但是对于大多数人来说,唯一需要关心的就是质量设置。可以在0(最差)到100(最好)之间指定质量等级。在图像质量和文件大小之间选择正确折中方式。
扩充:
Joomla:JCH Optimize,jQuery Easy插件可在保持质量的同时压缩图像。
Magento:优化图像的第三方Magento扩展。
WordPress图片优化插件:
Smush – Lazy Load Images, Optimize & Compress Images
WP-Optimize – Clean, Compress, Cache.
EWWW Image Optimizer
Imagify – Optimize your Images & Convert WebP
图像优化WordPress插件,该插件可在保持质量的同时压缩图像。
本篇文章来源于微信公众号: 海外SEO营销资讯平台