分辨率的图像

-2

我有这个代码galary：分辨率的图像

.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到150像素，150像素，但在.gallery > div > img我有height: 150px和width: 150px; 。

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

来源

2017-08-31 Vladutoiu Sebastian

你说你的网站是加载“硬”，你的图像加载“硬”。我猜猜英语不是你的第一语言，但这个术语“硬”没有任何意义。你能否试着更好地解释你的意思是“硬”？ – jsherk

@jsherk加载非常慢。我现在在000webhost.com上托管，并且是相同的。 –

这不是一个CSS问题。这是您的实际图像文件，分辨率太高/太大。您需要在服务器上预先处理/调整它们的大小。 – Pac0

看来你的问题是编辑，现在则是“如何降低我的图片的大小？我通过CSS尝试，但它仍然缓慢。”，是这样吗？

那么，你试图通过CSS来缩小尺寸，但CSS只是定义了如何显示。客户端仍然必须首先下载整个大型4128x2322图片，然后将其大小调整为150x150以将其显示在屏幕上。

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

这有道理吗？

来源

2017-08-31 21:25:42 cpury

我明白了。谢谢。 –

如果你已经主持它，尝试this site

来源

2017-08-31 20:12:10 Junior

谢谢。这个网站告诉我为什么加载这么慢。 –

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

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

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

来源

2017-08-31 21:36:57

分辨率的图像

回答

相关问题