在網頁中更快加載圖片

在網絡應用程序中，當我點擊應從服務器加載圖片的鏈接時，由於圖片大小約爲3MB - 5 MB，我們無法縮小尺寸由於圖像分辨率問題。在網頁中更快加載圖片

有一種方法可以放置高度和寬度，但我們無法爲圖像添加高度和寬度。我們如何解決它？

我加載從服務器的圖像轉換成格狀

<div> 
 
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg"/> 
 
</div>

來源

2014-10-17 sasi

我不明白。但是爲什麼不可能指定高度和寬度？ – Fergoso 2014-10-17 05:18:31

您應該像使用縮略圖一樣使用較低分辨率的圖像，並且只顯示完整分辨率的圖像，如果用戶點擊它或鼠標懸停在它上面......無論您的應用程序需要什麼。這樣你就不會加載大量用戶甚至不感興趣的大文件。 – 2014-10-17 05:27:06

即使你調整了屏幕上的圖像輸出，你仍然在加載完整的圖像大小。 – 2014-10-17 05:29:32

有一對夫婦的解決方案，探討管理大型圖像：

儘量減低文件大小（3-5MB太高恕我直言）：

刪除所有元數據
減少分辨率/象素密度
縮小圖像
使用JPEG壓縮的高度/寬度
使用GZIP壓縮你的服務器

您也可以瞭解一下：

使用CDN服務的圖像（允許並行加載）
像Cloudinary/IMGIX允許您動態地選擇使用服務想要的圖片尺寸

來源

2015-05-22 07:06:28 Sam

Offcourse載入這麼多大小的圖像definitly需要很多時間，我去與JPEG壓縮，這使我的圖像到其實際大小的60％.. – sasi 2015-05-29 07:28:03

使用HTTP緩存頭爲你的形象。一旦加載的圖像在HTTP Cache Header定義的緩存過期之前不會重新加載。

來源

2014-10-17 05:41:01 Touhid

.png，.jpg和.gif圖像在保存在文件中時已經被壓縮。使用gZip將無濟於事。 – 2015-05-28 18:00:48

嘗試壓縮圖像的大小因爲大圖需要時間來上傳。
使用jpg/jpeg文件或zip文件上傳。

來源

2015-05-22 09:05:55

感謝Sonam，JPEG壓縮解決了我的問題 – sasi 2015-05-29 07:29:31

如果你真的不能減小圖像文件的大小，然後動態地加載圖像：

https://github.com/pazguille/aload

至少在圖像被下載頁面響應用戶的輸入。

來源

2015-05-22 10:23:18

嘗試通過利用容器元素的background-image屬性加載document時嘗試加載圖像;設置容器元素display:none。這應該在瀏覽器中緩存圖像，消除了在實際的時候需要服務器對圖像的附加請求click - 圖像已經加載到document，緩存在瀏覽器中，在「鏈接」或button上的第一個click之前緩存。在click的「link」或button上，切換display容器元素的屬性id與className相同點擊button"block","none","none";在「鏈接」button的每個click上顯示，不顯示圖像。

var buttons = document.querySelectorAll("button[class^=img]"); 
 

 
Array.prototype.slice.call(buttons) 
 
.forEach(function(elem, index) { 
 
    document.getElementById(elem.className) 
 
    .style.display = "none"; 
 
    elem.onclick = function(e) { 
 
    var img = document.getElementById(elem.className); 
 
    img.style.display = (img.style.display === "none") ? "block" : "none"; 
 
    }; 
 
});

body { 
 
    width: 1800px; 
 
    height: 1600px; 
 
} 
 
div[id^="img"] { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
div[id="img-1"] { 
 
    background-image: url(http://lorempixel.com/1800/1600/cats); 
 
} 
 
div[id="img-2"] { 
 
    background-image: url(http://lorempixel.com/1800/1600/technics); 
 
}

<button class="img-1">image 1</button> 
 
<button class="img-2">image 2</button> 
 
<div id="img-1"> 
 
</div> 
 
<div id="img-2"> 
 
</div>

來源

2015-05-22 15:30:04 guest271314

我相信別人給你如何優化圖像下載一些很好的答案。我的回答側重於其他可以對網頁產生重大影響的方面。

用php預載圖片的尺寸與服務器。

<?php 
list($w,$h) = getimagesize("enu_20150522_1.jpg"); 
echo('<img src="http://myserver.com/enu_20150522_1.jpg" width='.$w.' height='.$h.'>'); 
?>

這不會提高速度，但它會允許瀏覽器在img下載時填充頁面的其餘部分。它會看起來更快。有時候知覺可能是現實。

另外，使用CSS或Javascript等預先加載圖像。我會用Javascript。這裏有很多很棒的網站。 Google上的頂級廣告： 3 Ways to Preload Images with CSS, JavaScript, or Ajax

如果您將這兩項功能與壓縮功能結合使用，則可能有一個工作解決方案。但是如果沒有有效的樣本，這很難說。 SSR

我也想看看： Best Practices for Speeding Up Your Web Site 參照優化內容，特別是緩存。

來源

2015-05-24 23:55:10 StainlessSteelRat

它是如何工作的我們將從HTML中刪除圖像，然後將它們放回到使用jQuery。就那麼簡單。這將使圖像加載後，所有的其他內容的已完成

另外，還有一個重要的額外好處是，搜索引擎通過什麼在你的HTML，jQuery的加載後不是衡量你的網頁載入速度事實。這意味着，當Google測量您網站的加載速度時，頁面加速結果看起來會更好。這是如何做到這一點：

首先：從你的HTML中刪除所有的大圖像（我的圖片正好是在一個無序列表）：從你的HTML 刪除所有的大圖像

其次：添加一個jQuery的片段，將它們添加回HTML，一切都在頁面上的其他人後，已加載：

[js] 
$(window).load(function(){ // This runs when the window has loaded 
var img = $(「「).attr(‘src’, ‘YourImagePath/img.jpg’).load(function() { 
$(「#a1″).append(img); 
// When the image has loaded, stick it in a div 
}); 
var img2 = $(「「).attr(‘src’, ‘YourImagePath/img2.jpg’).load(function() { 
$(「#a2″).append(img2); 
}); 
});[/js]

完成：d

來源

2015-05-25 00:02:38

感謝Adarsh，JPEG壓縮解決了我的問題。 – sasi 2015-05-29 07:28:44

看見親愛按照這個網址：Website Performance Checker

粘貼您的域名或網址和測試您的網站，然後找到你的圖像鏈接，點擊它右鍵單擊保存並上載再次。您的圖像文件大小將自動縮小，但圖像質量會很好。

來源

2015-05-28 10:40:10 Rajnish

您可以簡單地使用Microsoft Office Picture Manage，這樣您就可以將圖片大小調整爲文檔而不會失去質量，請嘗試！

來源

2015-05-28 22:41:15 Mrfrog

請提供更多信息。這更像是評論而不是答案。雖然你的建議可能解決OP的問題，但不清楚如何或爲什麼。應提供解釋，來源和文檔中的引用以闡明如何回答這個問題。 – tpie 2015-05-29 04:34:14

你可以去像谷歌沒有（仍然沒有），用手機瀏覽，在那裏你基本上設置一個代理的解決方案，它可以

Gzip已它（對代理）
使用其它協議（SPDY如）

Here是數據壓縮谷歌所做的：

否則，如果你不能改變的形象，你不能減少qualit以任何方式，如果你不能改變服務器，（和建議的JavaScript解放不夠），那麼它聽起來像你沒有任何選擇。但是，由於您只指定它應該在5秒內完成（這大致意味着維基例子的下載量爲10 mbit），那麼您要麼有太多的圖像，要麼所需的網速很低。

來源

2015-05-28 23:28:30 Kmtdk

嘗試加載它動態使用返回代碼在你的cs文件這種作爲

.ASPX

<asp:Repeater ID="Repeater1" runat="server" Visible="True"> 
    <ItemTemplate> 
     <a><asp:Image ID="Image1" runat="server" Width="1200" Height="300" ImageURL='<%#Eval("ThumbnailPath")%>' class="slide" /></a> 
    </ItemTemplate> 
    </asp:Repeater>

.CS

GallerySTR = ConfigurationManager.ConnectionStrings["PPDB"].ConnectionString; 
    GalleryCN = new SqlConnection(GallerySTR); 

    string LoginQuery = "SELECT * FROM Albums"; 
    GalleryCN.Open(); 
    GalleryCMD = new SqlCommand(LoginQuery, GalleryCN); 

    GalleryDA = new SqlDataAdapter(GalleryCMD); 
    GalleryDS = new DataSet(); 
    GalleryDA.Fill(GalleryDS); 
    Repeater1.DataSource = GalleryDS; 
    Repeater1.DataBind();

這是使用ASP.NET我的代碼Repeater COntrol我希望這給你一個更快的加載的想法;）總是嘗試加載它動態加載圖像動態提供最好的結果因爲事實是你c ANNOT縮小體積;）

來源

2015-05-29 02:18:43

提示：

如果圖像是常見的幾頁中，你可以使用CSS圖片雪碧的事情，這將減少往返次數和圖像的快速交貨您可以使用CDN。
如果圖像是隨機嘗試異步加載圖像，這不會殺死UI/UX。
將圖像轉換爲png然後使用它們，或者您可以嘗試新的WebP如上所述。

來源

2015-05-29 05:32:01 Ranvir

你可以讓你的圖像漸進的Photoshop。您應該保存至網頁並檢查漸進複選框。更多細節描述如下here。

來源

2015-05-29 06:10:06 ggdev

在網頁中更快加載圖片

回答

相關問題