Question

我有两张图片logo.png和logo-mobile.png。

徽标基本上是两个单词，一个用彩色书写，另一个用另一种颜色书写。为简单起见，我们将其称为“两个单词＆＃34;”，其中＆＃34;两个＆＃34; logo.png为白色，logo-mobile.png为黑色，而＃34; 字＆＃34;在两个徽标中保持原始的蓝色。

我这样做的原因是在桌面上我正在进行幻灯片放映（我使用桌面的background-image: url("url/to/image.png")加载图片）在徽标所在的标题中（没有导航栏，因为它＆＃39;只是一页）在移动设备上我不想加载幻灯片（你知道，每张图像1MB或更多），所以我只是将背景颜色设置为白色。现在，如果你还记得我所说的logo.png以及＆＃34; Two＆＃34;是白色的，好吧......我不能用这个作为徽标，因为＆＃34; Two＆＃34;变得不可读，因此第二个标志。

我对这个问题的第一个解决方案非常简单，我创建了一个

<div class="heading-logo"></div>

并且它的css是

.heading-logo{
    background-image: url("../images/logo.png");
}

在移动媒体查询中，我使用logo.png更改logo-mobile.png。问题解决了吧？错误（ISH）！我有我想要的徽标，但我没有<img>标记，其中包含alt属性和title，所以如果某人禁用图片，他们将看不到任何内容！

现在我们进入我目前正在使用的第二个解决方案。

<div class="heading-logo">
    <img class="image-logo" src="./images/transparent.png" alt="Two Words" title="Logo">
</div>`

基本上我正在加载一个＆＃34;功能＆＃34;的透明图像。作为徽标，实际上将真实徽标设置为div的背景。

我正在考虑使用的最后一个解决方案是创建两个<img>标签并相应地隐藏/显示它们。

<div>
    <img class="image-logo" src="./images/logo.png" alt="Two Words" title="Logo">
    <img class="image-logo-mobile" src="./images/logo-mobile.png" alt="" title="">
 </div>`

但是这样我总是加载两个徽标，这是我想要避免的。同时我使用的解决方案也加载了两个图像，因此它们非常相似（但不是真的）虽然性能明智，但由于transparent.png的权重小于两个徽标图像，所以它的速度要快一些。 / p>

问题是，哪一个更好的解决方案SEO明智和性能明智？如果您有两个徽标，一个用于移动设备，另一个用于桌面设备，这三个解决方案中哪一个是更好的选择？

我查看了this one which is basically my third approach（so is this one）或one that focuses more on the SEO aspect of the logo等答案，但没有人直接回答我的问题。

此外，如果这不是提出此问题的正确位置，请告诉我，我会将其删除。

Answer 1

使用媒体查询的第一种方法是获得更好性能的更好方法

基于设备显示徽标时的更好方法（移动版和桌面版）

1 个答案: