在网页中更快加载图片

在网络应用程序中，当我点击应从服务器加载图片的链接时，由于图片大小约为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

在网页中更快加载图片

回答

相关问题