优化网站图像的方法 - 北京传诚信

      优化网站图像的方法

创建快速网站的最佳方法之一是优化网络图像。HTML，CSS，JavaScripts和字体可以相加，但没有什么能像一大堆未经优化的图形那样减慢页面速度。根据我的经验，图像往往占据页面总文件大小的大部分（通常称为“页面权重”）。如果优化图像，从服务器到浏览器的传输将更快地发生。让我们深入研究。

首先使用SVG

可缩放矢量图形（SVG）是一种用于存储矢量图像的XML标记语言。SVG使用一系列称为“向量”的点来映射到二维坐标网格，而不是使用像素来表示图像数据（如更熟悉的JPEG，GIF和PNG文件格式）。

SVG格式最适合像这样的图形。注意大平坦的颜色区域。

SVG非常适合网站，因为它们具有无限的分辨率和非常小的文件大小。换句话说，您可以随心所欲地放大SVG，它们看起来总是很清晰。这是因为SVG文件将图像存储为一系列形成形状的坐标，而不是像素数据。然后，无论其分辨率如何，这些形状都会自动投影到物理像素网格中。SVG主要用于表示由形状组成的图形图像，但它们并不擅长一切。对于像照片或艺术品这样极其高细节的图像，您仍然需要使用使用像素的基于光栅的文件格式。话虽这么说，你应该首先尝试将SVG用于所有图像，并且只有在照片或艺术作品的情况下才应使用其他格式。

重新缩放光栅图像

SVG与分辨率无关，因此无需重新调整。但是，基于光栅的文件格式（如JPEG和PNG）具有以像素表示的绝对分辨率。所有其他因素相同，更多像素通常意味着较慢的页面加载时间。

无论好坏，网络都没有处理像素; 它是一种流动的媒介，从一个屏幕到另一个屏幕看起来不同。有时您需要让浏览器稍微重新缩放图像，以便它在响应式网站设计中工作。但是，如果您发送的像素数据多于设备上的物理像素，并且图像向下缩放，则只会浪费带宽。

在非常至少，让他们永远都不会比您预期要显示在他们的最高分辨率更大，你应该优化图像。这是一个移动目标，这就是SVG如此强大的原因。但是，我一般只担心25“显示器在2560×1440及以下。目前还没有足够的5k iMac来证明任何更大的东西。

选择您的PNG以获得性能

SVG最适合由实心形状和锐利线条组成的图像，而JPEG最适合照片和艺术品。但是，有时图形不具有可用的SVG版本，并且JPEG压缩工件在平坦的颜色区域和尖锐的线条中看起来很难看。您可能还有一个光栅图像，其中有一些透明区域应该让它们的背景透过。在这些情况下，最好的格式是PNG文件，有两种版本，PNG-8和PNG-24。

PNG-8使用最多256种颜色的自适应调色板。其中一种颜色可以用于透明度，但透明度是二进制的（像素是100％透明或100％不透明）。这意味着不透明区域和透明区域之间的任何过渡都将非常清晰，没有部分渐变。如果PNG-8的任何外部像素大部分都是浅色并且放置在深色背景上，则边缘看起来会呈锯齿状。最大的好处是文件大小趋于合理。

PNG-24具有全彩色和全alpha透明度（像素可以部分透明），从而产生精美的透明度。这通常是呈现部分透明照片切口的唯一方式，例如头发或模糊边缘。缺点是这些图像产生任何图像格式的一些最大文件大小。

非常谨慎地使用动画GIF

在20世纪90年代，动画GIF无处不在。他们最近卷土重来，虽然不是旋转LOGO和页面计数器的形式。这里的规则非常简单：动画GIF的文件大小往往很大（通常甚至比HTML5视频大）。如果您想使用内联动画GIF演示超快速概念（例如如何在网站应用程序中使用UI功能），那么请务必密切关注每个GIF如何影响整体页面重量。

逐步加载JPEG

通常从图像顶部开始下载JPEG图像并向下扫描到底部。然而，它们可以制成“渐进式”图像，加载模糊，然后在多次通过中逐渐变得更加清晰。这不会增加页面加载时间，但会增加  感知性能并使网页看起来更快加载。人眼一次只能聚焦在屏幕的一小部分上，因此填充具有大块颜色的区域然后增加其清晰度通常  看起来比允许图像从上到下扫描更快。

还有许多其他技术可以优化网络图像，这些只是少数几种。如果您想分享更多想法，请在联系北京网站建设公司！