首页

NitroPack的功能核心是对图片与页面资源的优化处理，涵盖图像压缩、延迟加载、图像尺寸设置、WebP格式转换等多项速度优化策略。这里先介绍这些优化策略。

（1）Lossy and lossless image compression（有损和无损图像压缩）。图像的无损压缩是指在没有任何图像损失的前提下，降低图像数据量，获得低比特流的图像数据。NitroPack能通过压缩图像，将图片变小（数据量变小而不是尺寸变小），减少页面内容数据，从而提升页面加载速度。

（2）Advanced Lazy loading（高级延迟加载）。NitroPack采用的高级延迟加载技术不仅是针对图像或者视频资源文件的Lazyload，更侧重于对JavaScript代码的延迟加载，以消除阻塞渲染的资源，从而提高网站页面打开的速度和谷歌测速的评分。延迟加载JavaScript，可以优先加载并执行HTML和CSS的代码，有助于浏览器更快地对请求的网页内容进行加载和绘制。

（3）Preemptive image sizing（预先设置图像尺寸）。很多时候建站人员上传的图像并不一定是前端页面展示所需要的真实大小。浏览器为了适配前端展现的内容，会引用原始图像的缩略图，这会造成内容偏移和网页加载速度变缓。NitroPack将上传的原始图像设置成了多个常用的尺寸，根据实际需要进行缩略图资源调用，从而可以加快页面的加载速度。

当我们想让自己的网站在PC端、Pad端和手机端都显示完全相同的一张图片的时候，因为显示设备宽度不同，我们可以预先设置同一张图片尺寸。比如，PC端的一张banner图，常规情况下宽度应该是1920px，显然手机端不可能展示这么宽的尺寸（一般情况下，我们将手机端的设备显示宽度默认为390px），这时候就可以采用Preemptive image sizing功能来规避手机端加载PC端1920px的图像。虽然说自适应框架下也能够正常加载，但加载1920px尺寸的图占用资源较多，加载速度会变得较慢。

（4）WebP conversion（图像的WebP格式转化）。WebP格式是谷歌推崇的格式，也是谷歌联合几大主流浏览器共同定制的图像显示格式。WebP具有较好的清晰度与强大的可压缩性能，理论上能够比JPG格式的图片压缩比增加30% ~ 35%。这也就意味着，图片在不损失清晰度的前提下能够以更小的尺寸进行展示，从而加快网站页面的加载速度。

（5）Adaptive Image Sizing（自适应图像大小）。自适应指我们网站页面在不同宽度的显示器上的尺寸显示自适应。这一点和预先设置图像尺寸略有区别。预先设置图像尺寸强调的是图片文件在不同显示宽度条件下，为了更快地加载需要将主图片文件按等比例压缩成较小的图片资源。而自适应的重点是，图片在任何宽度的显示设备中都可以自适应调整。因为不同型号的手机的显示宽度是不一样的。当我们PC端使用了一张宽度为1920px的banner图之后，我们要想让这张图片的缩略图很好地匹配手机屏幕的显示宽度，图像大小就需要做自适应调整。不过即使NitroPack图像大小自适应调整功能没有起到作用也没有关系，我们的建站主题代码中一般都会有这样的一段代码：

这段代码也能确保我们的相关网页内容和图像自适应我们所使用的显示器宽度。

此外，NitroPack还强调了其他几项比较重要的速度优化策略，包括但不限于内置的全局CDN，专有速度算法，HTML、CSS和JS的文件压缩与优化，关键CSS和DNS预加载等。