优化网站图像的方法

2019-04-17    分类: 网站建设

优化网站图像的方法


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


网站建设-www.cdcxhl.com" alt="优化网站图像的方法-北京网站建设-www.cdcxhl.com" src="/upload/pic5/6369342435710937509035466.png" />


首先使用SVG

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

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

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


重新缩放光栅图像

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

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

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


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


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

网页题目:优化网站图像的方法
网站网址:https://www.cdcxhl.com/news16/79566.html

成都网站建设公司_创新互联,为您提供定制开发小程序开发品牌网站设计建站公司网站排名用户体验

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站托管运营