无论您是从头开始构建新站点还是改造现有站点，挑选媒体和准备网站图像都可能是一项艰巨的任务。您应该寻找哪些图像？你在哪里可以找到它们？是否有您应该遵循的网站图片尺寸指南？网站的理想图像分辨率是多少？只需在搜索中输入一些信息，南京网站建设我们就可以回答这些问题（以及更多问题），并让您准备好选择和添加将推动您的在线形象的内容。
内容和图像构成
由于网络几乎是一种严格的视觉媒体，因此您网站上的图像是即时传达大量信息的绝佳机会。以下是一些快速提示，可以充分利用它们：
赞美您的内容
想想图像的目的。是否应该将注意力从文本上移开？或者它会是对某些特定部分的装饰和补充吗？会是背景图吗？
此外，找到与您网站的颜色主题相得益彰的图片，以确保网站在视觉上保持一致。与网站其他部分发生冲突的图像会像大拇指一样突出，但请记住，您通常可以利用这一优势将用户的注意力吸引到特定区域！
避免过于直白
添加带有文字解释您要传达的内容的图像可能很诱人，但图像为您提供了跨越语言障碍进行交流的机会。正如他们所说，一张照片胜过一千个字。
牢记您的用户
人类倾向于关注人（尤其是脸和手），因此与人的图像会引起注意。在选择图像以补充号召性用语或您想引起注意的网站的任何区域时，请记住这一点。
给自己工作的空间
选择主题周围有负空间的图像，尤其是英雄图像或在移动和桌面屏幕上保持全宽的任何图像。负空间是照片中几乎没有重要细节的任何区域，例如天空、阴影或空白墙壁。
您始终可以裁剪图像，但添加到照片中要困难得多。这就是为什么选择可以裁剪而不会丢失主题的图像非常重要的原因。
从高分辨率图像开始将为您的网站提供最佳起点。但是，将图像保持在最高分辨率会降低您网站的加载速度并损害搜索引擎优化 (SEO)。为了优化图像，它们需要适当地调整大小、裁剪和压缩。
股票/公共领域/内部摄影
所以，我们很清楚我们要在照片的内容中寻找什么，但是您在哪里可以找到照片本身呢？您可以在网络上使用哪些图像？以下是一些关于您可以从网络上提取的图像类型、如何正确获得许可以及何时可以免费使用它们的快速提示：
库存
非常适合寻找无法与聘请的摄影师一起拍摄的非常具体的图像。但是，人们的库存照片可能会让人觉得不诚实或“上演”，因此通常最好坚持使用至少没有可识别面孔的库存图像。
公共区域
非常适合背景、特定或知名地点和事件的图像。请记住，这些图像在网络上经常使用，因此大量展示它们并不是一个好主意。
内部/聘请摄影
重点突出的图片、与您的业务相关的高度具体的内容或描绘团队成员的图片的最佳选择，因为这些图片对于您的公司和网站来说是独一无二的。看到真实员工的照片会给人一种真实感，即使员工最终会转向其他机会。不利的一面是，这往往更加耗时且昂贵，因为它涉及聘请摄影师、组织员工进行拍摄等。
图像归属和许可
您在网上找到的大多数图像都受版权保护，需要某种许可才能在您的网站上使用它们。不正确地使用图像可能会给您带来大量的责任和法律麻烦，因此对一些常见的图像许可形式以及在哪里可以找到免费和许可图像有一个基本的了解非常重要。
免版权
由创作者提供，没有版权，无需许可或署名即可自由使用（尽管在可能的情况下，将其归功于创作者被认为是最佳做法和礼貌）。
公共区域
创作者对图像的权利已过期，因此无需许可或署名即可自由使用。
免版税
用户支付一次性费用以获得图像的使用权。这是最常见的图库摄影许可形式。
其他权限管理
用户可能需要提供准确的使用情况、副本数量、使用时间以及可能的其他特定信息。版权管理的图像通常用于产品，对买方有更具体的合同和义务。但是，这些通常也专门与一位买家签订合同，并且完全禁止其他人使用这些图片。
图像压缩、分辨率和裁剪
既然我们知道我们在图像内容中寻找什么，在哪里可以找到它们，以及如何浏览一些常见的许可证类型，那么是时候进入技术方面了！通常，当您从股票网站或公共领域资源下载图像时，无论从占用多少存储空间和可见分辨率来看，它都将是一个绝对巨大的文件。因此，您需要了解如何通过考虑文件大小和确定适当的分辨率来优化网络图像。
常用术语
解析度
指图像或屏幕的最大尺寸（以像素为单位）。例如，屏幕的最大分辨率可能是 1920×1080，或者图像可能是 800×600。有时，当提到常见分辨率的计算机屏幕时，这会缩短。例如，1080p、720p 或 4k。
文件大小
硬盘驱动器或存储设备上图像文件的实际大小，通常以千字节 (kb) 或兆字节 (mb) 为单位。分辨率对文件大小有很大影响，因此，通常，更高分辨率的图像意味着更大的文件大小，并且意味着在您的网站上的下载时间更长。
压缩
图像压缩是使用软件在不影响图像质量的情况下减小图像文件大小的过程。并非所有图像在创建时都以完全相同的方式保存，压缩软件旨在以更有效的方式重新创建图像文件，当然不会导致导致文件不可读的错误。
渲染分辨率
渲染分辨率是网络上图像在浏览器中实际显示的尺寸，具体取决于屏幕尺寸。
您通常可以假设图像在台式计算机上具有最高的渲染分辨率，因此我们可以使用 1920x1080px 计算机屏幕上的渲染尺寸（最常见的屏幕尺寸）来确定我们要上传图像的尺寸。
要确定渲染的分辨率，您必须使用浏览器内的开发工具检查网站前端的图像块。
检查 Web 元素以找到您的解决方案
南京网站建设我们经常在客户收集他们自己的内容时使用占位符图像，因此我们假设当前页面上显示了一个图像并且您正在寻找替换它。我们将从我们自己网站上的示例开始：
1. 在谷歌浏览器的全屏浏览器窗口中打开页面，以确保所有内容都以尽可能大的宽度显示。
2. 右键单击图像（或在 Mac OS 上按住 Control + 单击）并从菜单中选择“检查”。
3. 假设没有覆盖图像的 HTML 元素，它应该打开开发者工具窗口或同一窗口中的侧边栏，并突出显示以 <img> 开头的一行 HTML 代码。
4. 在 '<img' 标记之后和之后的结束 '>' 之前，应该有一段代码显示 'src=' 后跟一个超链接。这是图像源，或指向图像文件实际存储在网络上的任何位置的链接。
5. 将鼠标光标悬停在超链接上，它将显示一个窗口，其中显示有关图像的一些信息，包括它的渲染大小和固有大小（存储在网络上的图像的全分辨率）。
现在我们知道了渲染大小，我们有了新图像的目标大小！
检查图像尺寸和分辨率
现在我们有了图像将在页面上显示的最大分辨率，您可以检查已保存到计算机的任何图像的分辨率。
1. 在 Windows 计算机上，右键单击计算机上的文件并选择“属性”。
2. 这应该以 KB 或 MB 为单位显示文件大小，以及图像的当前分辨率（宽 x 高）。
3. 在 Mac OS 计算机上，按住控制并单击图像，然后选择“获取信息”。
4. 图像尺寸将显示在常规选项卡下，分辨率将在“更多信息”选项卡下显示为“尺寸”。
裁剪/调整大小
可以通过多种方式裁剪和调整图像大小，从在线工具到 Mac 或 Windows 计算机上免费提供的大多数图像查看器软件。我将介绍使用 Adobe Spark 裁剪和调整图像大小的步骤，Adobe Spark 是 Photoshop 的创建者提供的一种简化的在线工具。我选择这个工具纯粹是因为它来自一家可靠的公司，它可以在任何计算机上运行，并且可以在spark.adobe.com上免费在线使用。
1、登录后，选择蓝色加号，点击“自定义尺寸图形”开始新项目。在这里，您可以输入您希望图像输出到的宽度和高度（这将是之前的“渲染分辨率”）。输入您想要的尺寸，然后单击“下一步”。
2. 短暂加载后，会弹出编辑器屏幕。单击中间空白区域的中心以选择背景元素。
3. 在屏幕右侧，您会看到一个标有“编辑背景”的侧边栏，带有“选择图像”按钮。单击此按钮打开屏幕左侧的“添加照片”对话框，然后单击“上传照片”按钮。
4. 使用文件选择器选择您想要调整大小或裁剪的图像，然后选择“打开”。
5. 您选择的图像现在应该填充该背景元素，并且它可能会延伸到背景的边界之外（特别是如果您正在进行一些重要的裁剪）。现在应该在屏幕右侧打开“编辑图像”侧边栏，其中包含替换、删除和调整刚刚添加的背景图像大小的选项。您还可以通过在“编辑图像”侧边栏打开时单击并拖动图像来重新定位图像。
6. 将图像放置在您想要的位置后，您可以选择屏幕右上角的“下载”并选择您需要的文件类型（通常为 JPG）。默认情况下，这将被称为“我的帖子”，但您可以通过选择屏幕左上角“我的帖子”旁边的铅笔图标来更新文件名。
您下载的文件现在应该是正确的分辨率，您几乎可以上传它了！
图像压缩
为什么压缩很重要？
我们简要介绍了压缩是什么，但是为什么要在上传图像之前对其进行压缩？特别是如果您已经调整大小并裁剪它们？最后，压缩是可选的，但它是节省图像存储空间并保持网站快速响应的一种快速简便的方法。通常，您可以通过使用压缩工具将未压缩图像文件的存储大小减少 50-80% — 这是一个非常显着的节省，尤其是在较大的站点上。
如何压缩图像
使用在线工具
有许多在线工具和服务可以为您压缩图像，南京网站建设在这边建议大家直接百度搜索一下会有很多结果，大家可以去选择自己适合的。通常，这些在线工具允许您以有限的批次上传图像并返回一个包含新压缩图像的 zip 文件。
这些站点非常精简且易于使用，这使它们成为一次压缩几张图像的好方法。
带插件
对于 WordPress 网站——尤其是有很多不同用户上传内容的网站——插件是一种更全面的压缩解决方案。无需提前压缩图像，Smush 或 EWWW Image Optimizer 等插件可以在上传图像时对其进行压缩。图片压缩插件还可以批量压缩已经上传的图片。
本文地址：
http://www.njanyou.cn/web/5699.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
南京网站制作:用户友好的方式来增强交互式图像
下一篇：
南京网站制作分享9个SEO标题标签最佳实践供大家参考
