在html5中減少繁重圖像的加載時間

我想在網站中加載沉重的圖像。我曾嘗試使用photoshop - > posterize方法來減少重磅文件的大小，然後使用一些聯機工具來減小png文件的大小，而不會影響圖像的文件大小。我也有人嘗試過預加載圖片，但他們仍然花費相當多的時間來加載。在html5中減少繁重圖像的加載時間

任何人都可以請建議我一些方法來減少在網站上的PNG圖像加載時間，所以他們，他們加載速度快嗎？

非常感謝提前！

我們在談論什麼文件大小？根據具體情況，10MB需要幾秒鐘的時間才能加載。 – Smamatti 2012-03-08 12:53:52

你在你的PNG中使用透明度嗎？如果沒有，你是否考慮切換到JPG格式？ – 2012-03-08 12:54:19

嘗試張貼並保存爲網頁 – 2012-03-08 12:57:44

嘗試使用XHR和一些服務器技巧進行預加載。或使用webp格式。

2012-03-10 05:30:24 micgdev

解決了這個問題..我已經使用這些圖像的jpg格式，並使用css3提供了圓角的cornors。感謝幫助！我需要支持主流瀏覽器.. webp無法解決我認爲正確的問題？ – 2012-03-28 12:46:23

您的問題必須在別處。

最多79kb x 5小於1/2 a MB。這隻會導致連接速度緩慢。

我建議你安裝YSlow（http://developer.yahoo.com/yslow/）。它分析網頁並建議基於高性能網頁的一組規則來提高其性能的方法。

2012-03-10 05:38:15

有一個很好的JS腳本，以減輕圖像的預加載：https://github.com/jussi-kalliokoski/html5Preloader.js

也知道，那適當的緩存是沉重的網站必須的。谷歌有一個很好的介紹，爲此：https://developers.google.com/speed/docs/best-practices/caching

爲避免您的網站上閃爍的圖像，快速加載時間加載低分辨率的圖像，拉伸到全尺寸，並取代高分辨率圖像加載時。爲了改善光學性能，您還可以在低分辨率圖像上放置網格。

這對訪問者來說非常整齊，減少了等待時間。

2012-05-03 16:05:18 blacktea

根據你有什麼服務器，我使用圖像gen爲我所有的.net網站。

<img src="/ImageGen.ashx?image=/images/an-image.png&amp;width=50&amp;height=50" width="50" height="56" alt="">

2012-05-18 17:10:11

Photoshop的海報效果不會幫助你; PNG不使用調色板（除非您選擇PNG-8）。您可以使用文件 - >導出爲Web導出一個較小的PNG（或一個GIF）。如果您的圖像包含alpha信息，但是如果您爲Web導出，它將會丟失。 PNG-8和PNG-24都具有指數透明度。

2012-06-13 22:19:05 Bob

@ShrutiJakhete你可以在你的HTML5中使用延遲加載Jquery。在您向下滾動頁面之前，視圖端口外部的圖像將不可見。因此它會減少加載時間。檢查了這一點http://www.appelsiini.net/projects/lazyload

2012-06-22 06:53:15

即使你遵循所有/一些以前的建議，一個很好的插件到您的工作流程是通過所有的PNG通過PNGoptimizer。

這是一個簡單的拖放程序，可以從您的PNG中去除不必要的信息。根據圖像類型的不同，節省的尺寸在5-10％和70％之間變化。

2012-07-15 23:28:07 NiloVelez

回答