Question

我对这段代码感兴趣：

.gallery {
    width: 100%;
    margin: 5px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

    .gallery > div {
        position: relative;
        float: left;
        padding: 5px;
    }

        .gallery > div > img {
            display: block;
            width: 150px;
            height: 150px;
            transition: .1s transform;
            transform: translateZ(0);
        }

        .gallery > div:hover {
            z-index: 1;
        }

            .gallery > div:hover > img {
                transform: scale(2.5,2.5);
                transition: .3s transform;
            }

.cf:before, .cf:after {
    display: table;
    content: "";
    line-height: 0;
}

.cf:after {
    clear: both;
}

本网站：gtmetrix.com告诉我需要将图像从4128x2322调整为150px-150px，但在.gallery > div > img我有height: 150px和width: 150px;。

如何降低质量？我想在我的网站上加快速度。

Answer 1

如果您已托管，请尝试this site

Answer 2

您的问题似乎已被编辑，现在它是如何减少图像尺寸的？我尝试过CSS，但它仍然很慢。＆＃34;，是吗？

嗯，你试过通过css减小大小，但CSS只定义了显示的内容。客户端仍然需要首先下载整个大型4128x2322图片，然后将其调整为150x150以将其显示在屏幕上。

您需要做的是更改服务器上的实际源图像。 4128x2322绝对是一个非常大的网站分辨率。我不知道您的网站或图片的托管位置，但基本上您需要在托管的任何位置打开图片文件并编辑图片以缩小图片大小，例如通过GIMP。

这有意义吗？

Answer 3

我认为你不明白真正的问题。要使图像加载速度更快，您需要缩小图像文件大小，而不是图像显示大小。

我的意思是，当您更改CSS上的大小时，您只会更改屏幕中图像的大小，但为了显示浏览器需要下载完整文件并将其大小调整为最终大小。

在您的情况下，图像尺寸为4128x2322（约1200万像素），这太大了。你需要使用图像编辑器来缩小图像大小，有几个免费的，如Irfanview或Paint.net

css

3 个答案: