优化网站图像的办法

2019年05月14日 标签: 博中网投诚信者app 网站建设 网站图像


      优化网站图像的办法


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


优化网站图像的办法-重庆网站建设-www.ccxcn.com


首先使用SVG

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

SVG格式最恰好像这样的图形。留意大平坦的颜色区域。

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


重新缩放光栅图像

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

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

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


优化网站图像的办法-重庆网站建设-www.ccxcn.com


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


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

? 本文链接地址:/design/4257.html ? 转载请注明出处,谢谢。