如何优化图像以实现更好的网页设计和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
搜索引擎优化效果。但是，教师，学生和教室的照片对读者来说会更有趣，而且与您的主题更相关。
摘要：优化网站图像以获得质量和SEO
让我们来看看网站上的一些例子。我在一个网站上找到了一张src="/upload/pic19/”，它是2509 x 1673像素。它的大小是586KB。并不是很糟糕，但仍然比我在网页上显示一张小照片所需要的要大得多。因此，要优化此图像，我会执行以下操作：
如何优化图像以实现更好的网页设计和SEO
文章源于：/news28/207678.html

成都网站建设公司_创新互联，为您提供外贸网站建设、动态网站、定制开发、静态网站、网站设计、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联