使用 css 和 html 缩放背景图像

Question

我很难用 css 和 html 正确缩放我的图像。 CSS看起来像这样：

@media (max-width: 979px) {
.header-wrapper {
height: 388px;
background: url("../images/taikuri.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

那么html看起来是这样的：

<header id="header" class="header">
<div class="header-wrapper"> <img src="./imag/taikuri.jpg"  
 alt="taikureita" width="2050" height="812"/>

我想以某种方式缩放图像以获得更快的加载速度。 GTmetrix 页面测试给了我这个建议： 以下图像在 HTML 或 CSS 中调整大小。提供缩放图像可以节省 49.1KiB（减少 69%）。

我还没有找到正确的方法，所以我不得不寻求帮助。

Answer 1

您尝试做的是减小图像的文件大小，以便更快地加载。

您在问题中发布的解决方案试图做的是减少图像的显示宽度和高度，因此它在屏幕上显示为更小的宽度和高度。但是，仍然会加载同一张图片，但文件大小很大。浏览器只是为您缩小了它的外观。

查看您的代码，您将背景图像设置为与您写入 html 的图像相同的内容。这没关系，因为图像会缓存，但只是为了让您知道您基本上将图像嵌入两次。

这样想：我有 200 磅。如果我给自己拍照并缩小它，我在现实生活中仍然是 200 磅。这就是你想要做的。但是...如果我减轻了一些体重，那么我在现实生活中会更小，如果我坐在你身上也不会那么痛。这就是你要问的怎么做。有意义吗？

在这种情况下，请在 photoshop 中打开图像，制作副本，将其调整为更小的宽度（您可以从图像 > 图像大小执行此操作）并启用包含纵横比控制。上传该图片并改用它。

另一个更好的选择是

1. 从您的 html 中删除您的 <img>，因为它重复且很大。您可以在 CSS 中重新创建缩放效果。
2. 设置更多媒体查询以使用不同媒体宽度的不同图像。

我看到您已经在使用这个最大宽度为 979 像素的大图片了。如果是这种情况，请设置一个宽度为 979 像素的图像并在此媒体查询中使用它。如果您需要变大，请创建具有更高 jpg 压缩率的更大图像并创建更大的媒体查询来处理它，类似于以下代码（注意我将您的图像重命名为设置不同图像的示例）：

@media (max-width: 979px) {
    .header-wrapper {
        height: 388px;
        background: url("../images/taikuri_979w.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

这是第二个媒体查询，图片更大。请注意，我添加了一个 padding-top 作为具有最小高度的百分比，以便顶部区域将分别缩放到浏览器的宽度）：

@media (min-width: 1000px) {
    .header-wrapper {
        height: auto;
        min-height:388px;
        background: url("../images/taikuri_really_big.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-top:35%;
    }
}

如果您没有 Photoshop，则可以使用以下服务调整图像大小：http://www.picresize.com/ 我从来没有使用过这个，但它看起来像你想要的。此外，如果您使用的是 Mac，预览应用程序会调整图像大小。不过，不知道 Windows 或 Linux 上可能有什么，抱歉！

Answer 2

使用 CSS 缩放图像不会提高加载速度。 这是因为您的浏览器不会以您在 CSS 中指定的大小下载图像。浏览器会以全尺寸下载图像，然后以您在代码中指定的任何尺寸显示图像。

您应该查看tinypng.com 或compressor.io 来压缩您的图像。这将帮助您提高加载速度。压缩图像，使其文件大小更小。它将占用更少的硬盘空间，并且服务器传输给用户的空间也更少。

Answer 3

您可以在页面加载后使用 javascript 加载图像，并在