如何优化图像以实现更好的网页设计和SEO

无论您是拥有网站，在线商店还是希望看起来令人惊叹的常规网站，都需要花一些时间来优化您上传的每张图片。

当我们谈论如何为网络“优化”图像时，您可以通过三种方式考虑这一点：1.使它们看起来很好 2.使它们快速加载 3.使搜索引擎易于索引。 大多数帖子只是涉及一个方面或另一个方面，但在这篇文章中我会全部介绍它们。更好的是，您可以使用免费，易用的工具优化图像 - 无需Photoshop。（在这篇文章中，我将主要演示Pixlr的免费网页版本，这是一个很好的基本照片编辑工具。如果你对其他工具感兴趣，请查看我们的文章如何在没有Photoshop的情况下编辑照片）。

1.从高质量图像开始 储蓄摄影：您不必是专业摄影师在您的网站上使用伟大的照片。每天似乎有更多高质量的照片网站，你可以在那里下载商业用途的免费照片。 当您从其中一个网站下载图像时，它可能是一个非常大的JPEG文件。要为您的网站优化它，您需要缩小尺寸并上传较小的版本（以下更多内容）。不过那没关系。从大照片开始是理想的，因为您总是可以将较大的图像缩小。 拍摄你自己的（更好的）照片：当然，你不能使用照片作为一切（比如团队或产品的照片）。如果你需要拍摄自己产品的照片，有一些简单的技巧可以让你的照片看起来更加明亮，更专业，即使没有花哨的相机设备。 图形：如果您正在寻找更基于图形的东西，那么您可以使用大量新的免费在线工具来构建自己的图表或带有字体叠加的照片。 2.使用正确的文件类型：JPEG或PNG 对于图像，您最有可能遇到JPEG（或JPG）或PNG。各有利弊，但在大多数情况下，您可以记住以下内容： 照片应保存并以JPEG格式上传。此文件类型可以以相对较小的高效文件大小处理照片中的所有颜色。通过使用JPEG，如果您将照片保存为PNG，则会得到比较大的文件。 图形，特别是那些使用大而平坦的颜色区域的图形，应保存为PNG。这包括大多数设计，信息图表，包含大量文本的图像以及LOGO。PNG的质量高于JPEG，但通常也会带有更大的文件大小。PNG处理颜色和文字区域，线条清晰，因此您可以放大而不会丢失任何质量。它们还支持透明背景（如果您使用LOGO，则需要它）。如果您有选择，我们建议将PNG保存为“24位”而不是“8位”，因为它们具有更好的质量和更丰富的支持颜色。 如果您使用带有文字的照片怎么办？如果图像的大部分是照片区域，则可以使用JPEG。 大多数照片程序允许您选择JPG或PNG，方法是转到“另存为”，“导出”或“保存为WEB格式”并选择您喜欢的类型。 您可以将PNG转换为JPEG，但不会通过将JPEG转换为PNG来优化任何质量。例如，如果您只将自己的LOGO作为JPG，则需要直接与设计人员联系，并从原始设计程序中请求PNG，而不是尝试从JPEG中对PNG进行逆向工程。 3.调整图像大小以优化页面速度和外观 使用Web图像，您希望在大小和分辨率之间找到适当的平衡。分辨率越高，文件大小越大。 在印刷领域，高分辨率图像是一件好事。但在网络上，巨大的图片可能会降低网站的网页速度。这会损害用户的体验，最终会损害您的搜索引擎排名。对于移动访问者来说，大图像和缓慢的加载时间尤其令人讨厌 ?。 有时您会想要在您的网站上使用大型照片，例如您的背景或人物形象。如果你使用低质量的图像并尝试将其吹得足够大，它看起来会很模糊。

那么如何在尺寸和质量之间取得适当的平衡？首先，重要的是要理解，在图像方面，“大小”是一个相对术语。打印所需的内容通常远远大于网站所需的内容。跟踪什么可能有点困难，所以这里是构成“大小”的三个主要方面的概述： 文件大小：文件在计算机上占用的字节数。这可能会减慢您网站的速度。一张15MB（兆字节）的照片非常庞大。一张125KB（千字节）的照片更加合理。如果您的文件大小非常大，则表明图像尺寸太大或分辨率太高。 图像大小：图像的实际尺寸（以像素为单位）。您可能认为传统的打印照片为4×6,5×7或8×10。但在网络上，高度和宽度以像素为单位进行测量。例如，网站上的典型图像可能是795×300像素。 分辨率：从打印世界遗留下来，分辨率是图像的质量或密度，以每英寸点数（dpi）为单位。专业打印机可能要求图像至少为300dpi。但大多数计算机显示器显示72dpi或92dpi，因此高于此值的任何东西都会过度杀伤并使您的图像不必要地变大。当设计程序具有“为Web保存”选项时，这意味着将其保存在网络友好的低分辨率下。 如何找到图像的文件大小，图像大小和分辨率？ 您可以在计算机上找到文件大小和图像大小。如果您在PC上，右键单击图像文件，选择“属性”，然后选择“摘要”选项卡。在Mac上，按住Ctrl并单击图像文件，然后选择“获取信息”。 查找分辨率需要更高级的照片程序，如Photoshop，但大多数基本图像编辑程序将自动以较低的，网络友好的dpi保存图像。 备忘单用于图像大小，文件大小和分辨率 既然您已经了解了描述图像大小的不同方法，请记住以下几条经验法则： 大图像或全屏背景图像不应超过1MB。 大多数其他小型网页图形可以是300KB或更少。 如果您使用的是全屏背景，我们将建议您上传宽度为2000像素的图像。 如果您有此选项，请始终“保存为网络”，这将为您的图像提供网络友好的解决方案。 您可以将较大的图像缩小，但要使较小的图像变大则非常困难。“如果你有一个100×100像素的图像，你想将它变成一个令人惊叹的2560×1440 网页横幅，那么生成的图像将变得无法直视。“ 如果您的图片对您的网站来说太大，您会怎么做？ 如果你有一个漂亮的数码相机，你可能会拍摄比你的网站需要大几兆字节的照片。来自高质量网站的图片也往往带有大文件大小。如果您的图像超过1MB，您可以执行以下操作： 调整图像大小。如果您的照片宽度为5000像素，则可以轻松将其调整为2000像素宽，1200像素宽，甚至更小，具体取决于您计划在网站上使用它的方式。这将显着减少文件大小。调整大小时，请确保保持比例相同，这样就不会扭曲图像。 降低分辨率。照片程序会自动将您的图像分辨率降低到“网络友好”的大小（分别为72dpi和92dpi）。您也可以使用Photoshop中执行此操作。您还可以在许多照片程序中“另存为”，然后从那里调整质量级别。 4.使图像具有相同的大小和样式 如果使用一致的样式和大小/比例，网页上的图像看起来会更好。在页面上排列文本和其他信息时，一致性也会有所帮助。 好的，既然您的照片已调整大小并且看起来很棒，那么如何针对搜索引擎优化它们呢？ 5.正确命名图像文件以帮助您的SEO 大多数人对他们的文件名不太了解。他们可能会将照片称为“Photo1.jpg”或“Screen Shot 2017-06-02 at 3.41.15 PM”。如果这听起来很熟悉，请花点时间重命名图像，然后再将其上传到您的网站。为什么？因为这样做会给你的SEO带来提升。 这样想吧。当搜索引擎扫描您的网站时，它可以读取您的文字，但无法查看图片中的内容。文件名提供有关图像中的内容的信息，以便搜索引擎可以正确解释它。 文件名也成为图片网址的一部分，因此用简单的英文命名文件会使您的网址更容易导航和解释。将图像上传到您的网站后，其文件名是公开的。因此，不要将它们命名为任何令人尴尬或秘密的东西。 为了保持一致性，请使用小写字母和数字0-9。不要引入标点符号或空格。并且最好使用连字符而不是下划线。 6.填写您的标题和替代文字 一旦人们将图像上传到照片元素，他们经常忘记填写其他信息。但就像文件名一样，这个信息为您提供了一些额外的SEO果汁。 普通访问者不会看到Alt标签（或替代文字），但它们可以让搜索引擎了解每个图像的基本概念。因此，一旦您将图像添加到您的网站，请务必使用描述照片所显示内容的短语填写“替代文字”字段，最好使用有针对性的关键字。（替代文本还可以帮助视障用户使用基于音频的软件浏览您的网站，因此这是一种改善网站可访问性的好方法。）以下是编写好的alt标签的一些提示。 文件名和alt标签对于产品页面的SEO尤为重要。如果它有意义，还要为图像添加标题，因为人们倾向于阅读照片标题而不是其他任何内容。 注意：填写alt标签，名称和标题对SEO有好处，但不要尝试关键字的东西。您只想用简单的英语准确描述图像 - 添加不相关或重复的关键字会让您受到搜索引擎神的惩罚。 7.将图像放在相关文本附近 选择与文本所说内容相关的图像，而不是完全偏离的图像。被相关信息（具有相关关键字）包围的图像将更好地排名。 此提示还可以帮助您避免库存照片陈词滥调。如果您的网站是关于教育的，那么您不会因为拍摄苹果照片而获得任何搜索引擎优化效果。但是，教师，学生和教室的照片对读者来说会更有趣，而且与您的主题更相关。 摘要：优化网站图像以获得质量和SEO 让我们来看看网站上的一些例子。我在一个网站上找到了一张咖啡杯的照片。当我下载它时，名称是“fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg”，它是2509 x 1673像素。它的大小是586KB。并不是很糟糕，但仍然比我在网页上显示一张小照片所需要的要大得多。因此，要优化此图像，我会执行以下操作： 将图像重命名为更有意义的内容。也许像make-believe-coffee-cappuccino.jpg名称会更适合，或者其他。 使用像Photoshop这样的工具来调整大小并将其裁剪到我想要的大小。在这个例子中，我选择了1000×760。如果你想要一个正方形，你可以做1000×1000。 确保它是正确的文件大小。一旦我将它裁剪到我想要的尺寸并保存行啊来，那么文件大小就是完美的！ 使用照片元素将其上传到网站，不要忘记填写Alt Text！我还添加了一个很好的标题。 虽然这个清单可能看起来很多，特别是如果你上传了很多图像，一旦你习惯了这个过程，你会变得越来越快。（您可以将此页面加入书签，以便您可以参考它）。 此外，通过这些步骤将使您的图像看起来更好，帮助您的网站加载更快，并最终有利于您的SEO。立即进入正确的习惯，您将获得整个网站的好处。

如何优化图像以实现更好的网页设计和SEO由东莞网站设计编辑 https://www.bb620.com/sm/news/8675.html如需转载请注明出处

韶关网站建设 茂名网站建设 中山网站建设 广东网站建设 SEO外包网站建设 关键词优化网站建设 东莞建网站 东莞建站费用 东莞网页制作 东莞做网站公司 东莞网站优化 东莞做网站 东莞响应式网站 东莞网页设计

黔东南苗族侗族自治州装修公司 宜宾装修公司 定西装修公司 盐城装修公司 茂名装修公司 阿拉尔装修公司 忻州装修公司 德州装修公司 临沂助孕 潮州助孕 温州助孕 连云港助孕 北海助孕 开平助孕 镇江助孕 芜湖助孕