把照片放在網站上使用燈箱

我正在爲一個學校組織製作一個網站，該網站上會有很多活動的照片。我使用的是燈箱，所以圖片將以幻燈片形式顯示，並且我更改了圖片的尺寸，因此幻燈片上的「當前」圖片不像原始圖片那麼大。我仍然發現從打開圖片或轉到下一張圖片延遲約5秒鐘。我想知道是否有辦法實現更快的加載時間，甚至是我沒有考慮的另一種方法。把照片放在網站上使用燈箱

我爲我的網站使用了xhtml，css和php。

來源

2012-07-10 user977151

你是如何改變尺寸的？你實際調整了圖像的大小，還是隻在HTML/CSS中添加了寬度和高度屬性？ – 2012-07-10 10:39:13

您應該在頁面加載時預加載圖像。 – 2012-07-10 10:44:52

我只是放一個寬度和高度屬性，所以最好實際調整它的大小？這似乎需要一些時間手動調整每張圖片的大小而且我不確定您的意思是預加載 – user977151 2012-07-10 14:03:31

不好意思回答，但我不能寫評論現在...

我做它的其他方式，上傳後，我重新採樣圖片大圖和縮略圖。

當然，您可以每次重新採樣圖片，但這是有道理的原因，爲什麼您必須等待這麼久，並且如果您在一個時刻有很多訪問者，那麼它對於服務器來說是很多工作。

所以對我來說最好的方式就是說，最大的圖像是640x480 max，然後在上傳到這個尺寸後保存圖片，然後按照相同的比例重新採樣。從你的文章，我不知道你是否調整大小/重新採樣圖像，以及在HTML中，通過設置高度和寬度，或在PHP中，以及多久。

來源

2012-07-10 10:49:50 Arxeiss

我不確定你的意思。你的英語有點難以理解。我猜你的意思是你保存它們後將你的圖片設置爲640x480大小。我沒有這樣做，所以我會嘗試，但我仍然困惑你重新取樣的意思。 – user977151 2012-07-10 14:07:20

是的，你理解正確。當用戶上傳圖片時，我重新採樣它，只保存更小的圖片，當然，您甚至可以保存原始圖片。重新採樣是調整圖片大小的更好方法。比文字更好的例子是：[看這裏]（https://www.dropbox.com/sh/64c05q8bh65rzsy/YV8O1CWiny）左下角是圖片名稱（調整大小/重新採樣） – Arxeiss 2012-07-10 14:28:07

假設您在服務器上有一張照片，其大小爲8000x6000。其大小可能是10 MB。

現在讓我們假設你想顯示在網頁這個形象，像這樣做：

<img src="largeImage.jpg" width="800" height="600"/>

瀏覽器會下載大量圖像（10 MB），這需要時間一大堆，然後將其重新調整到800x600的內存以顯示在網頁上（這會消耗內存和CPU時間）。總時間：25秒。

現在假設您將此圖像調整爲800x600並將此尺寸的圖像放在服務器上。然後，顯示與

<img src="smallImage.jpg" width="800" height="600"/>

圖像的小圖像看起來相同的用戶訪問你的網頁，但瀏覽器將只需要下載一個小圖像，這將是像100 KB大（100次小於大圖像）。下載圖像所花費的時間也將被除以100（0.25秒），瀏覽器將不必加載和調整內存中的巨大圖像（較少的內存，較少的CPU時間）。您的圖像幾乎可以立即看到。

有許多工具（我自己使用Irfanview），它們能夠拍攝大量圖像並一次調整大小。你應該這樣做。

來源

2012-07-10 15:27:14

所有瀏覽器將圖片大小調整爲800x600？ – user977151 2012-07-12 08:01:37

他們這樣做，如果你告訴他們用'width =「800」height =「600」' – 2012-07-12 08:10:47

把照片放在網站上使用燈箱

回答

相關問題