优化网站图像的方法
创建快速网站的最佳方法之一是优化网络图像。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图像并向下扫描到底部。然而，它们可以制成“渐进式”图像，加载模糊，然后在多次通过中逐渐变得更加清晰。这不会增加页面加载时间，但会增加? 感知性能并使网页看起来更快加载。人眼一次只能聚焦在屏幕的一小部分上，因此填充具有大块颜色的区域然后增加其清晰度通常? 看起来比允许图像从上到下扫描更快。
还有许多其他技术可以优化网络图像，这些只是少数几种。如果您想分享更多想法，请在联系北京网站建设公司！