从表面上看，为网络保存图像是一个相当简单的过程。然而，如果你深入挖掘，你可能会错过大量的信息和技术。本文将主要关注Photoshop的“保存为Web &设备”命令的不同功能，以及一些与保存图像为Web使用优化相关的最佳实践。
我们将开始极为基本的所有初学者，但将有大量先进的信息为经验丰富的老兵谁工作专业网页设计团队，随着我们的进步。
在保存之前
为网络准备图片并不是从保存开始的。在进入Save for Web对话框之前检查一些东西是一个好主意。首先，你得看看你的图像模式．
在设计网页或任何其他屏幕媒体时，你需要确保你的图像是RGB格式的。传统上，CMYK只用于打印。这是因为用光创造颜色和用墨水模拟颜色之间有根本的区别。打印机只使用含有四种颜色(青色、品红、黄或黑)中的一种的小点来制造其他颜色的错觉，而屏幕能够产生数百万种颜色。此外，RGB是一个添加系统，这意味着更多的颜色的结果是白色的。
相反，CMYK是一个减法系统，这意味着缺乏任何颜色的是白色(大多数纸的颜色)，添加颜色接近黑色。添加系统能够在更宽的光谱上产生更明亮的颜色。这里的关键信息是，对于屏幕图形，你不能打败RGB图像．
在项目的一开始就记住这一点，特别是如果你正在用Photoshop制作网页图像。从RGB工作区开始要比使用CMYK并稍后转换好得多，CMYK可以创建斑驳的渐变和柔和的颜色。Photoshop的Save for Web命令会根据你在对话框中的选择自动将CMYK图像转换为适当的颜色系统，但在进入对话框之前，你肯定想知道并考虑图像的原始颜色模式。
如果您不知道给定图像的颜色模式，请查看图像>模式下的菜单栏。你要考虑的第二件事是原始图像的大小．如果你的图片太大，点击“保存为网页”会给你这样的警告:
从本质上说，Photoshop告诉你，你的图像对于大多数web使用来说太大了，而且比创建的保存为web命令要处理的还要大。
如果你点击“继续”，Photoshop实际上会进行保存。但是，由于文件的大小，对话框和包含的命令可能会非常缓慢，这取决于您的计算机系统资源。在进入Save for Web对话框之前减小大文件的大小是一个好主意，可以防止出现任何问题。
进入另存为网页对话框
一旦你有了你的颜色模式和图像的大小，按Cmd/Ctrl + Shift + Alt + S在你的键盘上打开保存为Web和设备对话框。
如果你不熟悉这个对话框，一开始它会让你觉得有点不知所措。事实上，即使你是一个久经考验的Photoshop专业人士，但不拥有CS4，事情将看起来有点不同，因为Adobe已经完全重新设计了这个菜单。
这里的所有内容都很重要，但您会发现有几个最常使用的关键特性，如下所示。
图像大小
在窗口的右下方，你应该看到一个标记为“图像大小”的区域。这一节非常简单，就像它在之前版本的Photoshop中所做的一样。
您可以选择使用像素的高度/宽度来设置尺寸，或者直接输入您希望图像的原始大小的百分比。
当你调整这些数字时，请注意你的图像预览，因为它会更新以反映这些变化。
重采样的质量
本节最复杂的部分是质量下拉菜单。如果你打开它，你会看到你可以选择最近的邻居，双线性，双三次的，双三次的顺畅,或双三次的尖锐．这些都反映了不同的像素插值方法。
仅使用基本插值调整图像的大小只会增大/减少像素数据，并可能产生一些非常糟糕的结果。为了防止这种情况发生，Photoshop试图操纵像素的解释方式，以改变图像的大小。不幸的是，没有对每一张图片的最佳解决方案，Photoshop也没有足够的智能来决定哪种模式对给定的图片是最好的。
缺省情况下，选择“Bicubic”。这对于大多数初学者来说已经足够好了，实际上也是最复杂的方法。然而，如果你真的想学习最大化你的产出，看看下面每种方法的优缺点的简短解释。
最近的邻居:这个设置是最基本的插值模式，试图通过上面提到的简单放大或缩小像素数据来保留图像中的硬边。如果你的图像不包含很多渐变，这可能是好的，但如果你显著地改变了图像的大小，这将产生一个过度别名，像素化的图像。双线性:比“最近邻”稍微智能一点，使用最近的4个像素的加权平均值来增加像素的数量。
这种方法产生了抗锯齿效果，消除了粗糙的像素化边缘，但可能产生模糊的图像结果。双三次的:双三次是最复杂的方法，从最近的16个像素采样。与双线性方法一样，这种方法可以防止任何不必要的伪象。
在Photoshop中有三个版本的双立方方法:双立方，双立方平滑器和双立方整形器。为了得到什么时候使用它们的提示，我们将看看Photoshop的另一部分。关闭“另存为网页”对话框，进入菜单栏图像>大小>图像大小。
现在看看“resample”下拉菜单，你会发现一些熟悉的选项。
这一次，我们看到每个选项(除了双线性)都有一个关于何时使用它的小提示。现在我们可以看到每个Bicubic选项都有一个强度:Bicubic最适合创建平滑的渐变，Bicubic smooth最适合放大，Bicubic Sharper最适合缩小。
在“另存为Web”对话框中调整图片大小时，请始终记住这些提示。但是，不要盲目地遵循它们，而不检查每个选项的结果来决定哪个选项最适合特定的图像。
文件类型和图像质量
在靠近窗口右上角的地方，您将找到选择您想要输出的文件类型的设置，以及与输出质量相关的各种选项。
当你调整这些设置时，你显然想要关注你的图像预览，但与图像的外观一样重要的是直接在预览下面的有关图像大小和大约加载时间的信息。
记住，总有一个质量和文件大小之间的权衡．
作为一个初学者，你可能会倾向于选择质量而不是大小，追求最大化，但这是一个很大的错误，会导致你的网站加载非常慢。正如你在上面的图片中看到的，默认情况下我的文件大小接近1.3 MB。这比大多数网页图片更可取。
只需要进行一些大小和质量调整，我就可以轻松地将其降低到20 KB左右(一个更可取的大小)。
文件类型选项
有三种主要的文件类型，我们想要专注于保存为网页优化的图像:GIF, JPG和PNG．每种文件类型都有自己的优点和缺点，在保存图像时了解并牢记这些是非常重要的。我们从最复杂的开始:GIF．
使用gif
动图由于其相对较小的文件大小，在简单的基于网络的图形中很受欢迎。然而，动图被限制在仅仅256种颜色因此应该有选择地使用。许多设计师会指出，照片不应该被保存为动图，因为需要数百万种颜色来重现“现实生活”场景。
这绝对是正确的，但并没有给你在所有非摄影元素上使用GIF的自由。例如，我们目前使用的“六次修改”图形是在Photoshop中创建的，因此它不是照片，但它仍然是一个非常糟糕的GIF文件的候选人。查看下面使用GIF压缩的文本高亮的特写:
正如您所看到的，即使启用了最高数量的颜色，从白色到红色的渐变也是相当斑驳的。
然而，这绝对不能排除GIF作为一种有用的文件格式。很多时候，你会保存一个图像，比如一个可能只有少数几种颜色的标志。任何大面积的纯色和非常小的渐变都应该作为GIF看起来很棒．
例如，如果我们的图像看起来更像下图，我们将有更多的自由来选择使用哪种文件类型。
正如你所看到的，上面的图像相当简单，甚至不需要完整的256种颜色。在保存为Web对话框中选择GIF作为文件类型，您将有几个选项来选择您想要使用的颜色，从2到256。
显然，两种颜色对于创建一个漂亮的图像来说太少了。然而，256看起来有点多余，因为我们的16色版本是如此的好。这个版本只有7K，而类似质量的JPG将把我们推到16K的两倍多。
其他减少GIF文件大小的方法包括减少或消除抖动，调整调色板设置(感知、自适应等)和增加有损压缩。要完成这些选项还需要多写几段，所以我鼓励您在观察文件质量和大小的同时调整这些设置，以尝试找到理想的结果。
使用jpg
正如我之前提到的，在处理包含复杂效果的照片或图形时，jpg是最好的选择像阴影，渐变等。因为JPG中可使用的颜色范围很广，所以您不必担心选择调色板的问题。这只需要调整基本的质量设置。
要调整图像质量，可以使用右边的“质量”滑块，或者左边的当前下拉菜单(从低到最大)。再一次,记住注意你的图片预览和文件大小当你抽样不同的设置。正如你在下面的图片中所看到的，在最低和最高的设置之间有很大的质量范围。
注意，随着质量的下降，不仅是硬边受到影响，而且渐变也会受到影响。从一种颜色到另一种颜色的优雅的退化变成了一种杂乱的、清晰可识别的颜色步骤。然而，在最大的尺寸下，我们正在推90K，这对于这个小图像来说是有点不必要的。
你会发现最好的解决方案几乎总是在最低和最高设置之间的某个地方。尽量找到最低质量的设置，不会显著降低图像的视觉细节。提示:在保存JPG文件时增加“模糊”选项，可以减小文件的大小。
但是，只在不会显著降低图像质量的情况下进行。
使用png
Photoshop在处理png时提供了两个选项:PNG-8和PNG-24。如果你打开PNG-8选项，你会发现它们和我们看到的动图选项非常相似。我们再次回到选择颜色的数量，最多256。这意味着PNG-8仅限于与gif文件相同类型的简单文件。有时在GIF上使用PNG-8可以在几乎相同的质量下获得更小的文件大小。最好两种都试一试，看看哪一种效果更好。PNG-24提供的图像质量更高。
png -24保留了大部分原始PSD图像质量，处理透明度比GIF好得多。
正如上图所示，阴影质量相当高，放在HTML文件的坚实背景上看起来也不错。然而，使用png有两个很大的缺点。
首先是文件大小;注意，对于550px宽的PNG上面的文件大小为40.9K。对于大多数现代互联网连接来说，这不算太糟，但它比同等的JPG或GIF文件要大得多，而且会让拥有大量图片的网页陷入困境。使用透明png的最后也是更严重的缺点是，并非所有主流浏览器都支持它。
几乎每一个专业的网页设计师都意识到了这一点，他们要么无视所有不更新浏览器的用户而忽略它，要么完全避免使用png，要么想出一些聪明的方法来欺骗浏览器，如IE6，使其屈服。无论你选择哪种生活方式，在留下任何访客之前一定要做出明智的决定。如果您已经有了一个网站，可以使用谷歌Analytics或其他类似工具来跟踪不支持png的浏览器所获得的访问者百分比。
这让你能够做出最适合当前用户基础的决策。
视图模式
到现在为止，你可能会对保存图片到网上的众多选项感到有点不知所措。您可能会认为在不同的选项之间切换太费时了，而且在不保留每个选项的一个版本的情况下，准确地比较这些选项几乎是不可能的。幸运的是，Photoshop允许您同时看到多个选项，从而缓解了这些问题。
在保存为Web对话框的左上角，你会注意到四个标签，分别是原始、优化、2-Up和4- up。这些常常被设计师忽略，但在决定给定图像的优化设置时非常有帮助。
原始和优化
查看原始和优化选项卡将给你一个单一的图像预览。主要的区别是，Original允许您查看未更改的PSD，而Optimized允许您查看用当前设置保存后的图像。
采用两页装和4
这两个选项卡可以让你在不丢失设置的情况下尝试不同的选项，从而使为网络保存图像变得容易得多。它们的工作方式完全相同，不同的只是你可以尝试的选项的数量。
每个预览显示你的文件类型，大小，质量和近似加载时间的图像与设置有关的选择。
如果您通过单击预览来选择它，您可以使用上面讨论的所有方法在右侧更改它的设置。然后，您可以选择另一个预览并更改其设置，以便快速进行视觉比较。你可以比较不同的文件类型(JPG, PNG, GIF等)或在给定的文件类型内，并限制变化的质量设置。
如果你在做后者，Photoshop可以通过自动填充每个窗口的不同设置来自动完成任务，这样你就可以看到你想走的方向。
首先选择您认为需要的文件类型，例如:JPG。然后按照上图找到保存为Web窗口右上方的下拉菜单。
点击这个，然后下到“重新填充视图”。这将自动用包含各种质量设置的JPG填充每个视图。只要找到一个最能接受的图像清晰度和文件大小，调整设置，直到你满意。这种方法使初学者更容易获得设置的感觉，而无需花费大量时间逐一挖掘。
使用切片
在Photoshop中处理大部分初始布局的Web设计师通常有两种工作方式。他们要么从布局中提取图像，然后单独裁剪/保存它们，要么使用Photoshop内置的切片工具来选择和保存图像的不同部分。如果你是那种经常使用切片的设计师，在保存为Web对话框中有很多选项可以加快你的工作流程。
使用位于左上角的切片选择工具(C)，你可以选择要处理的单个切片(按住shift键可以选择多个切片)。使用此方法，您可以更改每个片的设置。这意味着如果你想让你的页眉图像是GIF，但你的页脚图像是JPG，这就像选择每个切片和分配文件类型一样简单。
完成后，点击“保存”按钮，弹出保存对话框。在这里，您可以决定是否要将图像中的所有切片保存为单独的文件，还是只保存您所选择的那些。一次性导出所有切片允许您在一个步骤中完成从PSD布局中收集所需的所有图像的壮举。
如果您正在处理一个复杂的网站设计，这可以为您节省大量的时间。
输出HTML
我们将要讨论的最后一个特性是将Save for Web对话框与slice结合使用，以输出实际的HTML文件。首先，将PSD切片并打开“保存为Web”对话框。在你为每个切片设置好之后，回到窗口右上角的下拉菜单，点击“Edit Output settings”。
这应该会打开一个窗口，让您可以选择调整HTML、切片、背景和保存文件的设置。
使用这些选项，您可以调整是否要输出xhtml、希望使用什么颜色的背景、希望使用什么命名约定等。这些选项大多数都很简单，不需要进一步解释，但我还是建议你选择“生成CSS”，而不是在切片菜单下的“生成表”。除非你真的想创建一个表格，否则现代的web标准不鼓励使用表格来生成网页布局。
最后，要将切片的PSD导出为HTML文档，点击“保存”并选择导出“HTML和图像”选项。不要指望用这种方法在Photoshop中建立一个完整的网站。它只是为了帮助导出图像并在HTML中标记它们。如果你在Photoshop中做大部分布局，使用导出HTML选项可以节省你设置初始HTML文件的大量时间。
缺点是，要以您喜欢的方式组织代码，需要进行大量的清理工作。因此，大多数经验丰富的程序员都宁愿完全跳过这个方法，从头开始编写代码，但我鼓励您尝试一下，看看是否可以以任何方式改进您的工作流。
结论
上面的信息足以让你开始成为一个Save for Web专家。我希望你学到了一两个你不知道的关于Photoshop的“保存为Web &设备”对话框的东西。请在下面的评论区告诉我们你对这篇文章的看法。
另外，对话框中还有很多我们没有提到的功能，所以你可以随意指出上面没有提到的你经常使用的功能。这些技能对于设计师来说是很重要的，因为它们可以在任何行业的网站上使用房地产网站当地餐馆!
相关内容
- 8个优化图片的优秀工具
- 如何使用MooTools自动配图文字
- 15个让设计师在线获得免费库存照片的最佳地点
- 搜索引擎优化的图像
- 相关类别:网页设计而且Web开发
