分辨率的圖像

-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

分辨率的圖像

回答

相關問題