多语言网站:如何优化图像以实现更好的网页设计和SEO?
2018-11-06
无论您是拥有博客,在线商店还是希望看起来令人惊叹的常规多语言网站,都需要花一些时间来优化您上传的每张图片。

当我们谈论如何为网络“优化”图像时,您可以通过三种方式考虑这一点:1)使它们看起来很好,2)使它们快速加载,以及3)使搜索引擎易于索引。

大多数帖子只是涉及一个方面或另一个方面,但在这篇文章中我会全部介绍它们。


多语言网站优化图像


1.从高质量图像开始


储蓄摄影:您不必是专业摄影师在您的网站上使用伟大的照片。每天似乎有更多高质量的照片网站,你可以在那里下载商业用途的免费照片。我们的一些最爱是:

  • Pixabay
  • Unsplash
  • 谷仓图片
  • PicJumbo
  • SplitShire
  • 小视觉

当您从其中一个外贸网站下载图像时,它可能是一个非常大的JPEG文件。要为您的网站优化它,您需要缩小尺寸并上传较小的版本(以下更多内容)。不过那没关系。从大照片开始是理想的,因为您总是可以将较大的图像缩小。(使小图像变得不那么好)。

拍摄你自己的(更好的)照片:当然,你不能使用照片作为一切(比如团队或产品的照片)。如果你需要拍摄自己产品的照片,有一些简单的技巧可以让你的照片看起来更加明亮,更专业,即使没有花哨的相机设备(比如这个关于创建自己的灯箱的教程)。

图形:如果您正在寻找更基于图形的东西,那么您可以使用大量新的免费在线工具来构建自己的图表或带有字体叠加的照片。我们爱Canva和PiktoChart。如果您正在寻找徽标,我们建议您查看99designs  或designonclick。

2.使用正确的文件类型:JPEG或PNG


对于图像,您最有可能遇到JPEG(或JPG)或PNG。各有利弊,但在大多数情况下,您可以记住以下内容:

  • 照片应保存并以JPEG格式上传。此文件类型可以以相对较小的高效文件大小处理照片中的所有颜色。通过使用JPEG,如果您将照片保存为PNG,则不会得到可能获得的巨大文件。


  • 图形,特别是那些使用大而平坦的颜色区域的图形,应保存为PNG。这包括大多数设计,信息图表,包含大量文本的图像以及徽标。PNG的质量高于JPEG,但通常也会带有更大的文件大小。PNG处理颜色和文字区域,线条清晰,因此您可以放大而不会丢失任何质量。它们还支持透明背景(如果您使用徽标,则需要它)。如果您有选择,我们建议将PNG保存为“24位”而不是“8位”,因为它们具有更好的质量和更丰富的支持颜色。


使用正确的文件类型:JPEG或PNG

左:照片通常应保存为JPEG格式   右:图形和徽标应保存为PNG


如果您使用带有文字的照片怎么办?如果图像的大部分是照片,则可以使用JPEG。


大多数照片程序允许您选择JPG或PNG,方法是转到“另存为”,“导出”或“保存为网络”并选择您喜欢的类型。还有像Zamzar这样的免费在线工具,可以为您转换文件。


您可以将PNG转换为JPEG,但不会通过将JPEG转换为PNG来优化任何质量。例如,如果您只将自己的徽标作为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保存图像。Pixlr的免费网页版本以72dpi呈现您的图像,Canva让您“保存为网络”,它为您提供92dpi的PNG。

备忘单用于图像大小,文件大小和分辨率


既然您已经了解了描述图像大小的不同方法,请记住以下几条经验法则:

  • 大图像或全屏背景图像不应超过1MB
  • 大多数其他小型网页图形可以是300KB或更少
  • 如果您使用的是全屏背景,Jimdo的客户支持团队建议您上传宽度为2000像素的图像。
  • 如果您有此选项,请始终“保存为网络”,这将为您的图像提供网络友好的解决方案。
  • 您可以将较大的图像缩小,但要使较小的图像变大则非常困难。正如Pixlr的支持中心所说的那样,“如果你有一个100×100像素的图像,你想将它变成一个令人惊叹的2560×1440 YouTube横幅,那么生成的图像将变得像素化并且匆匆......如果你想到它就音量而言,你不能把一加仑水装进游泳池。“


如果您的图片对您的网站来说太大,您会怎么做?


如果你有一个漂亮的数码相机,你可能会拍摄比你的网站需要大几兆字节的照片。来自高质量网站的图片也往往带有大文件大小。如果您的图像超过1MB,您可以执行以下操作:

  • 调整图像大小。如果您的照片宽度为5000像素,则可以轻松将其调整为2000像素宽,1200像素宽,甚至更小,具体取决于您计划在网站上使用它的方式。这将显着减少文件大小。调整大小时,请确保保持比例相同,这样就不会扭曲图像。


  • 降低分辨率。像Pixlr和Canva这样的照片程序会自动将您的图像分辨率降低到“网络友好”的大小(分别为72dpi和92dpi)。您也可以使用'save for web'选项在Photoshop中执行此操作。您还可以在许多照片程序中“另存为”,然后从那里调整质量级别。


  • 通过像TinyPNG或TinyJPG这样的免费程序运行您的图像。两者都会显着减少文件大小而不会影响质量。


使用Pixlr可以轻松调整图像大小

使用Pixlr可以轻松调整图像大小。原始照片是6302×4789像素和16.2MB,远远超过我的网站所需。使用Pixlr,我将其缩小到1000×760像素,从而产生更小,更友好的文件大小(132KB - 完美!)。

4.使图像具有相同的大小和样式


如果使用一致的样式和大小/比例,网页上的图像看起来会更好。在页面上排列文本,列和其他信息时,一致性也会有所帮助。要了解我们的意思,请查看以下示例。

在第一个,从我们的假设“Make-Believe Coffee”网站,照片是不同的维度。一个是垂直方向,而另一个是水平方向。这使得页面看起来有点混乱。


照片不匹配,大小不同,因此页面看起来有点草率

在此示例中,照片不匹配,大小不同,因此页面看起来有点草率。

在下一个例子中,我使用Pixlr将每张照片裁剪为更均匀的1000×760像素(您也可以使用Jimdo自己的内置Adobe Image Editor进行裁剪)。明亮的白色咖啡杯的顶部照片有点感觉不合适,所以我用一个与我的另外两张照片类似的风格和颜色替换它。我还尝试了Pixlr的效果,并在每张照片上加上一个微妙的叠加(有点像Instagram过滤器),让它们更加一致。一旦我将它们的大小和样式都相同,我就将它们上传到我网站上的Columns元素中。


将每个照片裁剪为相同的尺寸


在这个例子中,我选择了相同风格的照片,并将每个照片裁剪为相同的尺寸。这使我的页面看起来更加一致。

由于照片大小相同,方向相同,所以它们完全适合一列,我的段落在另一列中。无需调整或猜测!


在Pixlr中裁剪图像,使其与我的其他图像大小相同

在Pixlr中裁剪图像,使其与我的其他图像大小相同。

好的,既然您的照片已调整大小并且看起来很棒,那么如何针对搜索引擎优化它们呢?

 

5.正确命名图像文件以帮助您的SEO


大多数人对他们的文件名不太了解。他们可能会将照片称为“Photo1.jpg”或“Screen Shot 2017-06-02 at 3.41.15 PM”。如果这听起来很熟悉,请花点时间重命名图像,然后再将其上传到您的网站。为什么?因为这样做会给你的SEO带来提升。

这样想吧。当Googl扫描您的网站时,它可以读取您的文字,但无法查看图片中的内容。文件名提供有关图像中的内容的信息,以便Googl可以正确解释它(想想eiffel-tower.jpg而不是DSC12345.jpg)。

文件名也成为图片网址的一部分,因此用简单的英文命名文件会使您的网址更容易导航和解释。将图像上传到您的网站后,其文件名是公开的。因此,不要将它们命名为任何令人尴尬或秘密的东西。


为了保持一致性,请使用小写字母和数字0-9。不要引入标点符号或空格。并且最好使用连字符而不是下划线。


6.填写您的标题和替代文字


一旦人们将图像上传到照片元素,他们经常忘记填写其他信息。但就像文件名一样,这个信息为您提供了一些额外的SEO果汁。

普通访问者不会看到Alt标签(或替代文字),但它们可以让搜索引擎了解每个图像的基本概念。因此,一旦您将图像添加到您的网站,请务必使用描述照片所显示内容的短语填写“替代文字”字段,最好使用有针对性的关键字。(替代文本还可以帮助视障用户使用基于音频的软件浏览您的网站,因此这是一种改善网站可访问性的好方法。)以下是编写好的alt标签的一些提示。

文件名和alt标签对于产品页面的SEO尤为重要。如果它有意义,还要为图像添加标题,因为人们倾向于阅读照片标题而不是其他任何内容


不要忘记填写你的Alt Text和标题

不要忘记填写你的Alt Text和标题!

注意:填写alt标签,名称和标题对SEO有好处,但不要尝试关键字的东西。您只想用简单的英语准确描述图像 - 添加不相关或重复的关键字会让您受到搜索引擎神的惩罚。

7.将图像放在相关文本附近


选择与文本所说内容相关的图像,而不是完全偏离蓝色的图像。被相关信息(具有相关关键字)包围的图像将更好地排名。


此提示还可以帮助您避免库存照片陈词滥调。如果您的网站是关于教育的,那么您不会因为拍摄苹果照片而获得任何搜索引擎优化。但是,教师,学生和教室的照片对读者来说会更有趣,而且与您的主题更相关。


摘要:优化多语言网站图像以获得质量和SEO


让我们来看看我的Make-Believe Coffee网站上的一些例子。我在Unsplash上找到了一张咖啡杯的照片。当我下载它时,名称是“fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg”,它是2509 x 1673像素。它的大小是586KB。并不是很糟糕,但仍然比我在网页上显示一张小照片所需要的要大得多。因此,要优化此图像,我会执行以下操作:

  • 将图像重命名更有意义的内容。也许像make-believe-coffee-cappuccino.jpg
  • 使用像Pixlr这样的工具来调整大小并将其裁剪到我想要的大小。在这个例子中,我选择了1000×760。如果你想要一个正方形,你可以做1000×1000。
  • 确保它是正确的文件大小。一旦我将它裁剪到我想要的尺寸并从Pixlr下载它,文件大小就是117KB完美!
  • 使用照片元素将其上传到网站,不要忘记填写Alt Text!我还添加了一个很好的标题。


优化图像


虽然这个清单可能看起来很多,特别是如果你上传了很多图像,一旦你习惯了这个过程,你会变得越来越快。(您可以将此页面加入书签,以便您可以参考它)。

此外,通过这些步骤将使您的图像看起来更好,帮助您的网站加载更快,并最终有利于您的SEO。立即进入正确的形象习惯,您将获得整个网站的好处。本文来源:jimdo

有关多语言网站建设,可以找上海谷擎客服:17721188551(微信同步)
想拥有这样的外贸网站吗?
详情欢迎致电谷擎建站专家:400-7766-880
产品目录