如何在高分辨率屏幕上更清晰地显示你的Logo

您的标志在iPad视网膜显示屏幕上看起来模糊和像素化吗？为什么你最喜欢的顶级博客的Logo看起来更清晰？这是在高分辨率屏幕上显示更清晰Logo的秘诀。

我用一个iPad屏幕截图来显示Logo的模糊。

这是另一个iPad屏幕截图，却显示的更清晰。

大多数Logo在桌面或笔记本电脑上看起来很清晰，并且在iPad上模糊，因为iPad在高分辨率显示器中以更多的像素包装。我们现在做的是使用相同Logo的2张图像，浏览器根据屏幕分辨率决定使用哪个Logo。

在我们网站的顶部，我们说我们加载一个名为logo.png的文件，它是200像素宽和30像素高，以显示这样的Logo

现在我们还为浏览器提供了一个两倍大小的图像的路径，称为logo2x.png，宽度为400px，高度为60px。现在我们使用这个魔术代码，这使得srcset元素成为可能。

srcset代码允许浏览器显示更大的图像并将其打包在较小的图像空间中，当被调用时！现在iPad加载更大的图像而不是标准Logo，并显示更清晰的图像。尝试使用您的徽标，并惊讶于一个简单的代码如何使您的网站设计有所不同。