舟山网站制作公司：Web图像的处理和优化

这是第二部分，网站速度系列，我们仔细观察使用的技术，使网站运行尽可能快，同时仍然保持它的惊人的外观和感觉。

图片可以创造或破坏一个网站，无论是增加一个网站的人文主义感觉，添加动画和鼠标的效果，或最后确定的惊人的设计，只是无法实现的CSS。然而，所有这些图片的价格可能是任何网站中最高的，访问流量的损失。如果一个网站需要很长时间才能加载，或者由于所有的图片而无法使用，那么它的游戏就结束了，因为用户很快就会回到谷歌并再次搜索。

但是，作为网页设计人员，舟山网站制作公司可以使用许多技术来减少加载的图像数量或缩小这些图像的大小。

在我们开始之前，我不打算看SWF，因为它在iPhone/iPod/iPad上不起作用，或者WebP因为它目前在浏览器支持上是超级受限的，或者说Silverlight，因为它需要额外安装一个插件…。。

因此，没有进一步的a-到期，接下来是技术清单(…)。

#1：为工作选择正确的图像类型

目前在网页设计中使用的图像格式有很多：PNG 8、PNG 24、PNG 32、JPG和GIF。它们是广泛存在的，并得到每个浏览器的支持，所有这些都是非常不同的，而且都适合于特定的用途。让我们仔细看看每一个。

GIF~*.gif

• 使用地点：IE6客户端当你需要透明，非复杂的图像少于256种颜色，它可以被动画。

• 限制：最多只能容纳256种颜色。

• 优点：他们的透明度工作在所有浏览器，最小的大小完全空白的图像(请参阅CSS精灵进一步)，非常容易降低颜色深度，使文件的大小更小，并提供了一种动画格式。

• 缺点：图像通常松散的质量时，在GIF格式，因为图像创建包必须编制最接近的颜色匹配。不太适合拍照。如果你不小心的话，动画可能是巨大的。图像可能出现锯齿状，透明有时会在边缘出血。

jpg~*.jpg或*.jpeg

• 使用地点：适用于不需要透明的照片或图像，如背景渐变。

• 限制：没有透明度，不太擅长文字。

• 优点：非常适合拍照，24位颜色提供1600万种颜色.

• 缺点：JPG在创建包含少量颜色的文件时要大得多，它们在文件(Exif)中包含了许多额外的信息，如照相机、ISO和快门速度，这在网络上是不需要的。没有动画支持。

PNG 8~*.png

• 使用地点：任何浏览器，除非IE6需要透明。

• 限制：和GIF一样，最多只有256种颜色。

• 优点：与GIF文件大小相似，但输出更清晰。透明效果很好。优秀的CSS精灵时，只使用256种颜色和减少的颜色深度图像。

• 缺点：IE6不太方便，您需要一个单独的PNG修复来使透明的工作，但这只适用于具有透明度的图像。不太好创建照片质量输出。没有动画支持。

PNG 24~*.png

• 使用地点：高质量的图像，不需要透明。

• 限制：没有透明度支持。

• 优点：24位颜色提供1600万种非常高质量的图像颜色。

• 缺点：没有透明度，通常比JPG更大时，用于照片。

PNG 32~*.png

• 使用地点：高质量的图像，图标和彩色的基础不透明。

• 限制：当涉及到网络的时候，没有一个是真正的。

• 优点：24位彩色和8位处理透明。极佳的图标，梯度和其他图像。容易压碎。

• 缺点：当创建照片图像时，超过大小的KB。

经验法则

因此，舟山网站制作公司要将其归结为一个经验规则，使用JPG作为照片和没有透明的渐变，使用GIF用于IE6透明，对所有其他具有低颜色深度图像和透明的浏览器使用PNG 8，使用PNG 32获得最佳的质量和透明度。

当然，您可以在IE6上使用带有透明性的PNG，但是它需要添加一个.htc文件，可能还需要一个Javascript文件，以使它在所有情况下都能工作，或者只是一个Javascript文件，取决于您在站点上使用的PNG修复程序的哪个版本来使其工作，但是它会减慢加载时间。

#2：使用正确的工具创建一个网络友好型图像

许多设计师和设计工作室使用Photoshop和IlluStrator创建他们的图像，无论是标识，渐变，图标或其他。但这些工具可能是一个伟大的创造，他们有时是真正可悲的输出图像为网络。

通常来自Photoshop的图像比实际质量所需的KB大50%，而且IlluStrator在谈论JPGS时通常也不会更好。最重要的是，他们不支持GIF动画，你的客户可能会想要。因此，与其使用Photoshop附带的网页选项的保存，不如将其保存为PSD并在烟火(或者根据输出介质的不同，可能是IlluStrator)并从那里为Web导出。

烟花是一个优秀的Adobe产品，用于创建Web就绪图像。好吧，我是一个狂热的烟火迷，为了证明这一点，我做了很多测试，结果如下。对我来说，最稳定的表现仍然是烟花，特别是当你看jpg时，IlluStrator是一个远远优于Photoshop的工具，Photoshop在几乎所有的文件格式上都是可怕的。

请随意抱怨我没有使用GIMP或任何其他软件进行比较，如果您愿意，请向我提供结果，我一定会将其添加到此表中。Adobe软件的所有版本都来自CS5，希望CS6会更好。

#3：学习如何以最高的质量输出最低的kb

首先，必须说，没有硬性和快速的规则选择的图像，将给你最好的输出质量，但仍然保持最低的kb的。这都是关于尝试和错误。

好的，这是前面提到的经验法则，例如，如果你处理256种以上颜色的图像时忘记了GIF和Png 8，对于大多数照片中的jpg是最好的，对于具有透明的Png 32的图标总是踢屁股，但是对于没有透明度的渐变，它通常是JPG，对于透明度，它将是Png 32，边框和线条往往有透明的背景，所以GIF，Png 8和PnG 32通常是最好的。

让我们更仔细地看看图像格式的错误选择可能会花费100 KB的大小和可能宝贵的秒加载时间的一些例子。再次，我使用烟花作为工具来创建所有这些图像，因为它的结果是一致的，然后ImageOptim因为压碎。

颜色较少的文本图像

这个非常简单的(非常没有艺术性的)图像非常难看，但会给你一个很好的想法，我试图说明。这是一种经常在网站上用文字创造有意义的感觉的东西。

正如你所看到的，PNG 24在这个图像上获胜(粉碎后，PNG 8在粉碎前)，PNG 8紧随其后，在JPG的另一端表现非常糟糕，不仅在KB图像大小上，而且在图片质量方面。您可以自己查看比较页以查看输出。

照片图像

另一张杰克的照片，这次调整到400 px宽，并格式化成各种不同的文件类型。

这一次，jpg是明确的赢家，当关闭锐化和设置平滑为2，没有任何可察觉的改变图像，我能够删除许多额外的kb的。同样，我做了一个比较页，以便您可以检查输出。

这是烟花出口向导的屏幕截图，它显示了我用来获取最小大小图像的设置。
(单击图像以正确查看它)。

图标

图标在现代网页设计中非常重要，其质量尤为重要。只要有一个难看的RSS图标就能让整个网站看起来很糟糕。在创建图标时，您必须考虑的是它将使用什么类型的背景。如果你不知道它是什么颜色或颜色，那么GIF，PNG 8和PNG 32是你唯一的选择，这意味着你必须考虑有多少颜色你需要在它的创造。如果你想要超过256种颜色，那么PNG 32是你唯一的选择。这是一个Facebook图标，左边是PNG 32，右边是PNG 8。如果您仔细观察，您将看到与PNG 8版本的质量差异，显然有条带。

雪碧中的一些图标

这真的取决于你是否计划有许多颜色。例如，如果你在黑色背景上制作一组只有白色的图标，那么最好使用PNG 8，但是如果你计划在同一个精灵集中使用多种颜色的iPhone图标样式，并且具有背景透明度，那么PNG 32是唯一的方法。

这是用于共享的32pxsprite集，然后按下插件，单击图像以查看它的大小。

背景的梯度

如果没有透明度的话，那么每次都去找Jpeg，那就太完美了。但是，如果您需要有一个透明度，然后选择PNG 32，这将允许最多的颜色变化，因为PNG 8只能做256种颜色。大多数情况下，您还希望将梯度降到1 px宽，这样它就不会占用加载时间，然后使用Repet-x在整个HTML文档中重复梯度。如需示例，请参阅此列表中的第9点。

一些边界线

对于边框和线条的规则与上面的渐变相同。如果没有透明度，那么每次都选择Jpeg，它几乎总是完美的。但是，如果你需要一个透明，然后选择PNG 32(或PNG 8，如果你不需要很多颜色)。第9点将有更多关于渐变、边框和线条的信息。

#4：在使用前粉碎这些图像

大多数图片在文件中都有额外的“绒毛”。以jpeg为例，它提供了使用…的摄像机、快门速度、iso、焦距、照相机的所有细节。等。所有文件都在Exif格式中。所有这些都是不需要的，只会给文件大小增加额外的字节。在某种程度上，所有的文件格式都是如此，正因为如此，已经开发了许多不同的应用程序来去除图像中的“绒毛”。

离线工具

麦克: ImageOptim可能是在MAC上使用的最佳工具，因为它处理GIF、Jpeg和PNG。它所做的就是将5个不同的工具打包在一个方便的GUI中，以探索您的图像并使它们尽可能小。

pc: 压碎如果您喜欢命令行，并且使用了大量的PNG，那么就很方便了。

还有一座山Jpegtran用于图像粉碎的应用程序，或对Mac和PC的操作。

在线工具

西姆斯是一个允许您直接上传或通过URL上传的Yahoo项目。它提供，如果可能，较轻的图像，以取代您已经上传或在一个现有的网页上的图片。

旁白将试图缩小任何上传的图像文件的大小。它与PNG，Gif和Jpegs一起工作。

如果您碰巧使用了没有在这里列出的任何脱机或在线工具，请进行评论，以便共享它们。

#5：使用CSSSprite处理图像

CSS精灵是加快网站速度的关键工具之一，如果你以前没有使用过它们，那么很容易让你的头脑清醒。简单地说，CSS精灵是包含许多不同图像的图像。它们可以是徽标，按钮，菜单项…任何你喜欢的。雪碧图像可以用于鼠标过载效果，标准链接按钮，甚至背景输入样式。

CSS精灵之所以如此重要，是因为它们基本上减少了连接到服务器的数量。不管您的图片有多小，如果有很多，那么需要很长时间才能下载它们，因为浏览器只能同时下载有限的数量。使用CSS精灵下载一张将被多次使用的图像，从而实现1次连接，使浏览器可以免费下载其他内容。

这里有3种在屏幕上显示CSS精灵的不同方法(参见这里的演示)。

i)图像替换，使用Display：None隐藏文本

<h1 id="logo"><a href="#"><span>Logo words</span></a></h1>

#logo a {background: transparent url(sprite.png) no-repeat -111px 0;height:60px; width:120px;display:block}#logo span {display:none;}

这种技术在大约5年前非常流行。一些设计师仍然使用它，因为它可以让Google在站点的第一个H1中找到可见的文本。

缺点是，当Facebook分享你的网站时，它的标志不会被Facebook发现，所以你必须添加一些头部代码，这样Facebook才能获得你喜欢的图像。

(Ii)同时使用缩进和溢位。

<ul><li><a href="#" class="facebook">Share on Facebook</a></li><li><a href="#"  class="twitter">Share on Twitter</a></li></ul>

.facebook {background: transparent url(sprite.png) no-repeat 0 0; height:24px;width:24px; text-indent:26px; overflow:hidden;display:block}.twitter {background: transparent url(sprite.png) no-repeat -25px 0; height:24px;width:24px; text-indent:26px; overflow:hidden;display:block}

同样，这为Google保留了要在HTML标记中找到的原始文本，并保存了显示：None。所以，减少代码来实现这一点。我们这次要做的是告诉文本出现在A标签的块区域之外，在那里我们设置了溢出文本和块空间之外的内容，这样就根本不出现了。

(Iii)使用带有空白图像的IMG标记

<a href="#" ><img src='blank.gif' alt='descriptive words for google' 
   height='60' width=60 class='foursquare' /></a>

.foursquare {background: transparent url(sprite.png) no-repeat -50px 0;}

精灵也可以使用内联样式编写，下面是使用内联样式的IMG标记版本。

<a href="#" ><img src='blank.gif' alt='descriptive words for google' style='background: transparent url(sprite.png) no-repeat -50px 0;' height='60' width='60' /></a>

因此，您可以保存CSS，这是方便的，当您处理许多精灵与许多图像上的每一个。例如，与我的插件共享和遵循，我使用这种风格，因为我有大约70个图标每套和5套不同的大小，提供350额外的CSS语句，所有需要一些独特的CSS。这并没有提到插件提供的26个不同的图标集。这将导致总共有9100条额外的CSS语句放在CSS文件中。那不是好事吧？
因此，在这种情况下，我选择直接在HTML中添加一些额外的内联样式，而不是在外部CSS文件中添加9100个额外的CSS语句。

关于这个方法，需要注意的是使用blank.gif，它延伸到满足IMG的大小，而CSS背景图像则来自于sprite。因此，理论上，有两个图像加载，以实现这一点。

下面是用于上述示例的sprite文件：

它是用丰都项目雪碧发生器。在构建精灵时要记住的几件事是，您应该始终水平地构建它们，因为它通常更快(根据Yahoo测试)，并且始终保持图标之间的空间尽可能小。

下面是一组来自Fondu Sprite生成器的sprite文件针对手工制作的精灵的示例：

	大小(以字节为单位)	粉碎后尺寸
方渡水平	14，797字节	8738字节
方圆垂直	14，940字节	8706字节
水平手制png 8	3 227字节	3，012字节
水平手制png 32	9，791字节	8，856字节
垂直手制png 8	3，188个字节	2，972字节
垂直手制png 32	9，818字节	8 705字节

您会注意到，ProjectFondu的雪碧生成器没有做最好的工作，因为24 px图标可以更有效地打包在水平版本上。这是因为我在同一组中使用不同大小的图标。如果它们都是相同的高度和宽度，它会有一个更好的输出。

换句话说，如果你是一个总速度螺母，一定要考虑手的建设和尝试垂直和横向的安排，但要注意，你将需要计算出你自己的CSS。

您还会注意到，Png 8版本在这一场合是足够的。如果有更多的精灵使用更多的颜色，那么情况就不会是这样了。

#6：掌握背景图像、背景重复和背景位置。

在制作精灵时，很容易为每个图像制作非常长的CSS语句，其中每一行看起来都是这样的：

.item1 {background:transparent url(sprite.png) no-repeat 0 0;height:24px; width:24px; }.item2 {background:transparent url(sprite.png) no-repeat 0 25px;height:24px; width:24px; }.item3 {background:transparent url(sprite.png) no-repeat 0 50px;height:24px; width:24px; }

在这样的情况下，编写以下内容的效率要高得多：

.item1, .item2, .item3 {background-image:url(sprite.png);background-repeat:no-repeat; height:24px; width:24px;}.item1{background-position:0 0}.item2 {background-position:0 25px}.item3 {background-position:0 50px}

或者，如果您足够幸运地拥有您想要显示在同一个列表中并使用IMG标记的所有精灵：

li.sprite img {background-image:url(sprite.png);background-repeat:no-repeat;}.item1{background-position:0 0}.item2 {background-position:0 25px}.item3 {background-position:0 50px}

#7：它必须是一幅图像，还是CSS来做这个工作？

好的，这确实违背了整篇文章的本质，但是要检查您是否可以单独使用CSS来实现您想要实现的目标。例如，你能用DIV和正确的CSS获得你想要的背景色吗？如果可以的话，它将是更少的字节和更少的文件使用。

请记住，仅用CSS创建的渐变会减慢页面的加载时间。

#8：使用数据URI映像

最近，舟山网站制作公司将图像作为数据元素直接输入到内联样式代码、srcURI或css中已成为一种时尚。对于那些不知道数据URI图像是什么的人，它们是base 64编码的图像，就像保存在数据库中但直接输入到HTML或CSS中的图像一样。

它们可以用来减少下载图像所需的连接数量，并且强烈推荐专门为移动设备开发的人。但是对于我们这些需要跨浏览器开发的凡人来说，我们应该避开他们，因为他们不会在IE7以下的任何东西上工作，而且在IE8中只能达到32K。他们也可以比使用单一图像完成同样的任务大1/3，用gzip将其带回到2%或3%。其优点是它们使用的连接较少，因此加载时间更快。

不过，如果你还对他们感兴趣，请看这个维基百科页面.

在我看来，只有移动开发者才会考虑这个问题。所以，也许你想研究一下在一个移动主题中的CSS包含，在其中你想要一些图片。

#9：双倍，高音和更多；更多关于背景定位，大小和重复的艺术。

CSS精灵不仅限于图标和菜单的项目，还可以应用于线条、边框、阴影和背景渐变。它所需要的是一些分层的诀窍，你可以重复使用相同的图像多次。这一次在构建你的精灵时，你必须考虑的唯一件事是，它们是否会被用来在一条水平或垂直的线上显示事物。

当构建垂直定向雪碧以显示将在水平线上重复的项目时，您想要放进去的主要内容是背景梯度、任何水平线样式，最后是任何阴影效果。

以这个html为例

<div class='gradient'></div><div id='wrapper'>
   <div class='box'> 
   	<h1>Andy Killen</h1>
   	<hr class='top-line' />
   	<h2>Speed demon of the internet</h2>
	<hr class='alert'/>
	<p >Available for consultancy, talks, training or performing site speedup's</p>
	<ul>
		<li>telephone: +31 653678603</li>
		<li>email: <a href="mailto:andy@phat-reaction.com">andy@phat-reaction.com</a></li>
		<li>website: <a href="http://phat-reaction.com">phat-reaction.com</a></li>
		</ul>
	</div><hr class='shadow'/></div><div class='reverse-gradient'></div>

…和CSS：

h2,hr,html,body {margin:0;padding:0;position:relative;border:0}.gradient,hr,.reverse-gradient {background-image:url(horizontal-repeats.png);background-repeat:repeat-x;}.gradient {background-position: 0 0;position:fixed;height:100px;width:100%;top:0;z-index:-1}#wrapper {margin:0 auto;padding: 30px 0;width:400px;z-index:3}.top-line {background-position: 0 -100px;height:10px}.alert {background-position:0 -110px;height:10px}.box {border:solid 1px #ccc;margin:0; padding:10px 20px 0;background-color:white;}.shadow {background-position:0 -120px ;height:25px; }.reverse-gradient {background-position:0 -145px;height:100px;position:fixed;bottom:0; width:100%;z-index:-1}ul {list-style-type:none}a{color:#999}a:hover{color:#000}

(为了增加可读性，增加了许多回车。)
在这里，这一切都是在一个IFRAME：

[iframe_loadersrc=http：/phat-reaction.com/specky/卧式-test.htm高度=375宽度=100%滚动=NO]

在这里使用原始图像，或生成所有渐变和线条的图像。这里.

正如您所看到的，只有少量代码和1.2k大小的图像(没有被压缩)，就有可能在单个文件中都有许多渐变、阴影和线条样式。这将一如既往地加快加载时间，因为每个文件只有一个请求，而在本例中不是5个请求。

当然，这并不局限于水平上显示的东西，它也可以用来建立垂直元素。

#10：别忘了那个偏袒者！

人们往往忘记了偏好图标，但是它是与每一页一起加载的东西。在大多数网站上，如果丢失了，但仍然链接，那么404错误页面显示将导致更多的流量比一个有效的图像，特别是当你考虑到有非常滑稽的404与惊人的图像。

在创建图标时，尽量减少所用颜色的数量，尽量避免最终文件大小远远超过1K。

虽然这可能是诱人和有趣的，尝试抵制诱惑，创建动画GIF图标，如果你想保持一个网站的速度。他们看起来很棒，可以增加你的品牌，但他们不工作的IE和与成本的大小。

减少现有偏袒大小的最佳工具可能是ImageMagick(Mac、PC和UNIX)。使用转换函数从命令行开始，您可以减少颜色，直到找到完美的平衡。

下面是命令行代码的示例，您必须输入命令行代码才能使其工作。

convert -colors 4 favicon.ico new-favicon.ico

这个命令所做的是运行转换命令，并选择调整颜色，然后将颜色的数量减少到4，然后将原始的fericon.ico表示，然后输出带有4种颜色的新版本。

convert -colors 16 favicon.ico new-favicon.ico

这个命令会使它变成16种颜色。试着用2，4，8，16和32种颜色来选择一个能让你的图标看起来很好看的颜色，同时拥有最少的颜色。

#11：记住移动客户端的25K规则

如果出于任何原因，您正在考虑使用任何移动设备，请记住，iPad只能处理25K(281 K缓存总数)和更低的图像缓存。iPhone3G为51 KB(1.05MB)，iPhone 4为102 KB(1.9MB)。所以，如果你正在建造巨大的精灵，你可能想再想一想，把它分成2到3个独立的精灵集。

阅读有关移动设备缓存的更多信息。这里.

#12：不要缩小图像，使用合适的尺寸(甚至放大)

我确信每个设计人员/开发人员都知道这一点，但是…就这样做了。不要把一张大照片放进一个小空间里。所以不要把1024x768的图像放进800 x 600的空间。首先使用合适大小的图像。它只是在下载速度上浪费你的KB。

相反，如果您想要获取一个较小的图像，并使它适合一个更大的空间，那么它将加载非常好，并使页面加载时间非常快。例如，我使用这一技术使640 x 400图像缩放为身体背景图像大小。当然，它在大屏幕上会变得有点块状，但是因为它是背景而不是前景，所以没人介意。

#13：别忘了设定高度、宽度和ALT

设置高度和宽度可以帮助浏览器知道在下载图像之前会有多大的东西，这样页面就可以更快地绘制并呈现给用户。设置Alt文本可以访问图像，验证HTML并帮助Google图像搜索。

img src='image.jpg' width='30' height='40' alt='image description for a blind person'/

#14：在服务器上设置过期日期和ETag

设置图像的过期日期可以通过告诉浏览器图像在一段时间内不会改变而有所帮助。这可以是您喜欢的任何时间段，但请注意，如果您想更改sprite或映像，您还需要更改它的名称，以强制预缓存的浏览器加载新文件，而不是加载旧版本。

配置eTAGS也是值得的，因为他们帮助缓存，他们所做的就是帮助服务器用一个小的头来确认图像或文件没有改变。每个ETag在每个文件中都是唯一的，因此当客户端浏览器请求时，服务器可以控制哪些更改以及哪些更改没有更改。

有关过期标头和eTAGS的更多信息，您需要等待本网站“速度系列”中的“为速度配置服务器”部分。

#15：使用CDN

像以往一样，一个合适的CDN会为你做很多事情。首先，它将减少服务器上的负载，允许更多的浏览器同时连接；其次，它提供了一个更本地版本的图像，因为它将从离用户更近的服务器上提取它们。它也不会传输cookie信息。所有这些使得页面加载速度更快。
看见第一部分用于CDN提供程序列表和更大的概述。

16：CDN没有现金？为服务静态内容而在新域上投资10美元

通过简单地拥有一个2Nd域名也指向您的Web服务器，您将能够在并行下载中提供更多的图像，同时从主地址下载其他内容。

它更好，因为它不传输cookie信息，并且它提供了两倍多的连接一次到服务器。浏览器应该能够在每个DNS地址上只建立两个连接，因此有两个不同的DNS地址会使流量翻倍。大多数现代浏览器可以同时建立6个或更多的连接，所以加倍可以同时下载12件东西。

请记住使用一个完全不同的域名，而不是你正在使用的主服务器的子域，因为你会浪费大量的精力。比如雅虎！使用yimg.com，youtube使用ytimg.com，facebook使用static.ak.fbcdn.net等等。

#17：制作更快的GIF动画

名单上的最后一个是动画GIF，因为它不是由大多数设计师制作的，所以它更像是一个脚注，而不是一个主要的项目。在创建动画GIF时，需要记住一些事情，当您希望它们在KB的…中处于低位时。

• 在动画的每一帧中使用相同的背景。

• 在整个动画中使用相同的颜色。

• 不要用太多的画框。

这里的整个想法是减少颜色的数量，以便GIF可以尽可能小，所以如果您使用动画GIF来表示Ajax操作，那么只使用4帧而不是16帧。如果你在做广告，把你的创意果汁保持在最少的颜色。当然，如果你把你的广告放在别人的网站上，而你只是不在乎；

四舍五入

这是网站速度系列第2部分的结尾，还有更多的事情要做，但是理解这17点会对你的网站速度产生巨大的影响。如果您没有其他任何东西从这，您应该考虑的主要事情是粉碎您的图像，并使用CSS雪碧！哦，不要在Photoshop里制作你的网络图片。

当然，如果您需要更多的个人帮助来使您的网站变得非常快，请不要害怕联系我因为我会很高兴地培训你的团队在最好的技术，或作出改变，你的网站，以使它在前5%的所有网站。