让您的网站Retina友好有利于SEO?

2019.09.08 - 象牙白

利于SEO

Retina显示屏是Apple推出的一个现代关键词,与iPhone 4一起推出。视网膜显示屏的目标是在如此小的空间内产生包含如此多像素的图像,人眼无法检测到单个像素; 至少,不是在标准手机使用距离。从那时起,Apple就在其手机,平板电脑和MacBook中加入了视网膜显示屏。

从那时起,这个概念 – 高dpi屏幕 – 已经在整个电子行业中占据了一席之地。在非Apple电脑中,它是HiDPI。对于电视,它是4K。它已经成为一个有争议的问题,因为许多技术分析师都在研究数学,并证明,在正常视力下,HiDPI显示器充其量几乎不可见。

仍然,Retina显示器仍然存在,这是网站管理员必须考虑的事情。越来越多的网络用户是移动用户,甚至PC用户 – 通过Apple的MacBook和第三方4K显示器 – 将开始使用HiDPI显示器。

HiDPI的定义
Retina显示器和HiDPI屏幕的定义依赖于DPI或PPI的概念。DPI或Dots Per Inch最初是印刷术语。DPI越高意味着图像越平滑。PPI是每英寸像素数,与显示屏相同的度量标准。Apple的Retina显示器为其HiDPI设定了最低标准:

•小型设备(如iPhone)至少具有326 PPI。
•中型设备(如iPad和其他平板电脑)至少具有264 PPI。
•较大的屏幕(如MacBook)至少具有220 PPI。

请注意,这与屏幕的软件屏幕分辨率几乎没有关系; 它主要是硬件指标。高DPI测量确实意味着一定的最小分辨率。

有关不同设备,DPI及其分辨率的有趣比较,请查看。结论很有意思,它们表明HiDPI在智能手机和其他小型设备中显而易见且有用。

设计差异
设计换的差分
不幸的是,对于高PI屏幕,需要更新许多旧式Web标准。例如,在Web上选择任何小位图或JPG图像。为了说明的目的,在100×100范围内的东西。将图像缩放至200%变焦。它看起来模糊,对吗?它失去了一些清晰度,一些细节。这正是视网膜显示器正在发生的事情。您的网站规模正在扩大,以便以设备的正常分辨率进行查看。某些方面(如大多数字体)不受影响。其他人,如图像,最终看起来模糊。如果您使用包含文本的图形或需要清晰可见的小图形,则这是一个特殊问题。

当然,Retina显示器还不是那么常见。只有极少数网络用户拥有这样的高分辨率显示器。然而,随着越来越多的设备采用HiDPI显示器,随着时间的推移,这个问题只会越来越严重。现在最好调整您的网站,以便尽可能少的用户体验您最糟糕的情况。您可以采取的一些步骤:

• 将SVG用于图像。SVG是可缩放矢量图形,它们就是这样; 可伸缩矢量。这意味着无论它们的大小如何,它们都清脆明亮,没有锯齿状的边缘。它们非常适合徽标和图标,但由于矢量图形本身的性质,它们不适用于照片。
• 使用CSS3。CSS3是另一种新标准,只有最现代的浏览器才支持,但它非常适合Retina显示屏。CSS3效果允许您创建渐变,图形和按钮,就像矢量一样,因为它们是在设备的比例上而不是根据源图像呈现的。它们还通过本地生成来减轻服务器上的负载,而不是从服务器调用映像。
•使用CSS图像替换。如果您拥有巨大的高分辨率图像,它可以在Retina显示屏上完美运行。另一方面,它对于标准显示器来说太大了。你有两个选择; 使用较大的图像并在浏览器中缩放它,或使用CSS检测用户显示的大小并调用适当的图像。如果文件大小相似,则第一个选项有效,但在图像完全不同的情况下会变平。第二种选择适用于大多数图像大小不同的情况,浏览器缩放会显着降低您的网站速度。
•使用32×32 Favicon。太多的网站忘记更新他们的图标,而他们正在使他们的网站Retina准备好。如果你记得这么做,这是一个简单的解决方案。

目前,Retina显示器的设计还没有真正优雅而简单的解决方案。你需要为所有东西维护两组图像,使用巨大的图像并在浏览器中缩放它们或者专门用于向量。

对SEO的影响
谷歌 – 犯规 – 护理 – 约视网膜兼容性
现在提出一个大问题; Retina设计对SEO有什么影响?

目前,答案是; 不多。谷歌并不关心Retina兼容性,它现在的技术太小了。如果他们确实关心 – 他们可能会这样做,就没有办法告诉谷歌的算法究竟是什么 – 这是一个小问题,惩罚或利益将是不明显的。他们关心你有一个移动网站,但他们并不太关心Retina。

所以在地面上,现在忽略你设计中的Retina显示不会对SEO产生影响。至少,不是直接的。由于某些原因,您可能会发现自己拥有相当大一部分的Retina流量,因此当您远离充满模糊图形的网站时,您可能会逐渐失去用户。

那另一边呢?可以为Retina设计会损害您的SEO吗?在这种情况下,答案是合格的。这一切都取决于你的设计方式。首先,它取决于您如何编码图像选择。

如果您使用高分辨率图像并通过HTML,CSS或JavaScript缩小图像,则会给用户计算机带来额外的压力。显示缩放图像需要几毫秒的时间,并且最初下载该图像需要更多时间和带宽。

看看这是怎么回事?如果您使用效率低下的代码来显示大量图片,则会增加网站加载时间。网站加载时间是一个重要的搜索引擎优化因素,所以如果可以的话,你会希望避免增加它们。

这值得么?你是否应该为Retina设计尽管网站速度较慢的潜在风险?这一切都取决于您的网站以及您对高分辨率图形的依赖程度。除非您正在大量显示照片,否则您最多可能会在几毫秒内处理时间变化。如果您的用户支持,您甚至可以使用CSS3弥补一些加载时间。

最重要的是,它现在可能不是设计Retina显示器的关键,但在你的下一次重新设计中,你当然应该。视网膜显示器只会越来越普遍,问题会越来越大,就像移动流量本身一样。

- END -

42
0

为什么Google会在您网站上排名错误的网页?

排名错误的网页

Retina显示屏是Apple推出的一个现代关键词,与iPhone 4一起推出。视网膜显示屏的目标是在如此小的 […]