如何修复模糊图像

Question

我使用bootstrap创建了这个测试着陆页：http://ubersnap.netai.net 如果您访问该网站并查看iPhone截图，您会发现屏幕上的文本几乎无法读取。

然而，如果您只是调整浏览器窗口大小并将窗口最大化到其原始大小，它就会100％清晰。

为什么会发生这种情况？有没有办法使图片在第一次加载时就变得清晰，而不是调整浏览器窗口大小？

该图片是GIF格式，如果这有任何区别的话。

- AspiringDeveloper

Answer 1

尝试使用以下CSS使您的图像边缘清晰。

.crisp-edges {
    image-rendering: -moz-crisp-edges;
    /* Firefox */
    image-rendering: -o-crisp-edges;
    /* Opera */
    image-rendering: -webkit-optimize-contrast;
    /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* IE (non-standard property) */
}

- Vicky

---

不仅仅是边缘模糊，整个图像都不清晰。 - AspiringDeveloper

Answer 2

刚刚偶然发现了this。

第一个修复方法对我有效：

img {
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

- Rob K

Answer 3

你需要为不同的屏幕尺寸设置不同的图片。有许多方法可以实现，最简单的方法是使用媒体查询，并拥有相同图像的不同尺寸/版本。

摘自smashingmagazine.com的一些示例代码：

/* default screen, non-retina */
.hero #cafe { background-image: url("../img/candc970.jpg"); }

@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    .hero #cafe { background-image: url("../img/candc290.jpg"); }
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    .hero #cafe { background-image: url("../img/[e-mail]"); }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    .hero #cafe { background-image: url("../img/candc538.jpg"); }
}

- Ally Rippley