做网站优化图像的办法

做网站优化图像的办法

创建迅速网站的好办法之一是优化互联网图像。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和页面计数器的形式。这里的规则很简单做网站优化图像的办法做网站优化图像的办法网站网址：