Technology Development

企业互联网营销一站式服务专家

网站建设中,优化网络图像的提示

Web和图形设计人员可以使用几种图像编辑和处理工具,程序和应用程序,并且您可能已经有了自己喜欢的“准备出版”成像工具。这不会是有关各种编辑工具本身的讨论,而是将集中于最佳实践和技术,以优化Web上的图像和图形。

举一个简单的例子,在我介绍为什么和如何优化网络上的图像之前,请看下面的两张图像,而不必看一眼它们的属性,在将它们相互比较时,请注意相似之处和不同之处(单击图片为全尺寸)。

图A

网站建设中,优化网络图像的提示

图B

网站建设中,优化网络图像的提示

图A以基线标准格式以最高质量保存为.jpg图像,文件大小为514KB,宽度为800px。以56.6Kbps的拨号上网速度,大约需要90秒才能完全在浏览器屏幕上呈现此图像。对于使用拨号访问Internet的人员,我深表歉意。 图B是保存为.jpg的同一图像,但是格式设置为5次扫描进行逐行,质量设置为低,并且文件大小仅为800KB时只有59KB。以56.6Kbps的速度拨号时,此图像将只需要大约8秒钟即可完全呈现。

您注意到这两个图像有什么区别?颜色,加载时间,质量,这些都是优化网络图像时要考虑的因素。为了进行比较,我保持图像像素大小一致。但是,要完全优化此图像,除了其他优化因素之外,我还可以减小像素宽度,从而减少其对网页加载的影响。

为什么要优化网络图像?

是什么促使我们注意获得最有利的网络图像的推动因素?优化Web图像的几个原因包括:

带宽和吞吐量:众所周知,带宽多年来一直是流行语,要使Web文档在用户浏览器中尽可能快地呈现,就意味着将图形和图像文件的大小保持在最小。挑战在于如何在保持精简文件大小的同时保持高质量的图形;这两个要素之间的平衡是优化网络图像的关键。 数据存储和空间:尽管数据存储空间和服务器的价格每年都在降低,但谨慎选择限制图像大小。随着站点的增长,它们通常会显示图像数量的稳定增长。例如,我维护的联邦机构Intranet站点子部分的特定图像目录包括18个子目录,其中包含360幅图像,这些存储总共合并了24MB的存储空间,平均每个图像69KB,即实际上,对于典型的优化网络图像而言,它偏重。 降低成本:经过优化的映像加起来减少了服务器和存储空间的需求,减少了带宽和吞吐量的需求,因此降低了托管成本,尤其是在使用第三方ISP或Internet网络解决方案提供商时。 用户体验:在页面加载时间最短的情况下,访问者会享有更好的体验;没有什么比等待等待大量图像的Web文档在浏览器中加载更能激怒访客了。优化的图像有助于将加载时间保持在几秒钟之内。

优化网络图像的提示

图像文件格式:关于文件格式的规则因组织而异,每个Web开发公司通常都有特定的准则。这是三种适用于Web的文件类型。

  • GIF:.gif文件格式实际上是一种位图,由像素正方形组成的网格组成,包括多达256种颜色的透明像素,并且保存了每个像素的数据。这是一种很棒的文件类型,用于保存图形,图表,项目符号,图标,按钮和文本详细信息。

  • JPEG:尽管许多人通常遵循的一般规则是为图像保留.jpg文件类型,为图形,图表等保留.gif文件类型,但是如果您的网站倾斜,我将以.jpg文件类型作为经验法则面向高端摄影画廊或其他高质量的图形设计。此文件类型适用于保存具有数百万种颜色的图像,包括具有各种阴影和渐变的图形。请注意,通常.jpg文件类型的图像要大得多,并且加载时间更长。但是,大多数图像编辑工具都允许您选择.jpg的文件压缩。例如,您可以选择“最大”,“非常高”,“高”,“中”和“低”,因此您可以控制最终文件的大小。要测试图像,请确保将其保存在多个压缩设置下,然后对它们进行质量渲染和加载时间测试。

  • PNG: .png图像文件类型是为响应.gif专利文件类型而开发的,尽管它可以显示比.gif更大的颜色范围,但通常确实会导致更大的文件大小。许多人非常有效地将.png文件格式用于按钮和图标,无论如何它们通常都是小像素尺寸,因此以这种方式使用时它们不会太大。典型的16x16像素.png图标的大小为1KB至4KB,或者48x48按钮的大小为3KB至7KB,因此,以这种方式使用时,它们是最佳的。对于尺寸超过200像素的任何.png图像,您开始会看到更大的文件大小。

保存网络图像:以下是保存优化的网络图像的几条经验法则。

  • 确保已将图像的副本保存为无损版本,这意味着您可以稍后再次回来并根据需要对其进行编辑。例如,.raw,.tiff,.png,.psd文件格式等等。特别是如果在图像或图形文件中添加了几层,即使您的网站上已有一段时间,客户也不知道何时需要在此处更改单词或在此处更改图形元素。

  • 如果是照片,请选择.jpg文件格式以保存最终图像。记住要测试几种质量和压缩设置,直到您在质量和加载时间之间达到最佳平衡。如果您的图像编辑工具允许“渐进式”设置,请使用它,因为它可以使图像在网络上呈现时“模糊”或逐渐显示,而不是逐行显示。渐进设置不会改善加载时间,但是在屏幕上渲染时,确实可以使图像具有更柔和的外观。

  • 如果要将.jpg图像用作Web文档的背景,请使用“中”或“低”压缩设置。否则,对于显示的图像,请将压缩保持在“高”。

  • 如果您可以选择调整图像的“质量”,则使用设置进行适当的更改;同样,请记住在可接受的质量和适当的文件大小之间取得平衡。

文件大小:根据图像的使用,请遵循以下准则以获得最佳文件大小:

  • 对于背景图片,请尝试将文件大小保持在10KB左右或以下。

  • 对于横幅或标题图片,最大文件大小为60KB是可以接受的。

  • 对于高端照片,请尝试将它们最大绝对限制在100KB以内。


智能会议平板 婚姻出轨调查 ad2流量家 网络营销 天马赛车场 快安盛 香港海华设计 辽秦安家 安居乐业网 旭丽置业 婚姻挽回公司 微信会员积分系统 宿州网 成都网站建设 视频素材 欧纷泰 力盛赛车学校 北京网站优化 一度好数码 智轩云 上海顶伯软件 ChinaETL 花呗分期 上海华森消防