Question

在Web应用程序中，当我点击应该从服务器加载图像的链接时，由于图像的大小约为3MB - 5 MB，因此需要花费太多时间，因为图像分辨率，我们无法缩小尺寸问题

有一种解决方案可以放置高度和宽度，但我们无法为图像添加高度和宽度。我们如何解决它？

我正在将服务器中的图像加载到div中，如

＆＃13;

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

＆＃13;

Answer 1

有许多解决方案可供管理大型图像：

尝试降低文件大小（3-5MB过高恕我直言）：

删除所有元数据
降低分辨率/像素密度
降低图像的高度/宽度
使用JPEG压缩
在您的服务器上使用GZIP压缩

您还可以探索：

使用CDN提供图像（以允许并行加载）
使用Cloudinary / IMGIX等服务动态选择您想要的图像尺寸

Answer 2

工作原理   我们将从HTML中删除图像，然后将它们放回使用jQuery。就那么简单。   这将允许在所有其他内容完成后加载图像


PLUS，还有一个重要的附加好处：搜索引擎可以根据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

Answer 3

为图像使用HTTP缓存标头。一旦加载的图像在高速缓存到期之前不会重新加载，如HTTP Cache Header所定义。

Answer 4

尝试使用容器元素的document属性加载background-image时加载图像;设置容器元素display:none。这应该在浏览器中缓存图像，在实际click - 已经加载到document的图像中消除对图像服务器的额外请求，在第一次click开始之前在浏览器中缓存＃34} ;连结＆＃34;或button。在click的＆{34;链接＆＃34;或button上，切换display属性，其中id与className点击的button相同"block" 1}} "none"，click之间;在每个button链接＆＃34;显示，而不是显示图像。 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"; }; });。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 5

尝试压缩图片的大小，因为大图片需要时间上传。
使用jpg / jpeg文件或zip文件上传。

Answer 6

如果您真的无法缩小图像文件大小，请动态加载图片：

https://github.com/pazguille/aload

在下载图像时，至少该页面将响应用户输入。

Answer 7

我相信其他人已经就如何优化图像进行下载给出了一些很好的答案。我的回答主要集中在可能对网页产生重大影响的其他方面。

使用带服务器的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 参考优化内容，特别是缓存。

Answer 8

请参阅尊敬的关注此网址：Website Performance Checker

粘贴您的域名或网址并测试您的网站，然后找到您的图片链接并点击它右键单击保存并再次上传。您的图像文件大小将自动缩小，但图像质量将是完美的。

Answer 9

你可以通过移动浏览找到像谷歌这样的解决方案（仍然如此），你基本上可以设置代理，这可以

Gzip it（在代理上）
使用其他协议（spdy eg）

Here是google所做的数据压缩：

否则，如果您无法更改图像，并且无法以任何方式降低质量，并且如果您无法更改服务器（并且建议的javascript自由组合不够），那么听起来您没有任何选择。但是，由于你只指定它应该在5秒以内完成（大概翻译为wiki示例的10 mbit下载），然后你有太多的图像，或者所需的互联网速度非常低。

Answer 10

您可以简单地使用Microsoft Office Picture Manage，这样您就可以将图片调整为文档大小而不会失去它的质量，试试吧！

Answer 11

尝试使用.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我希望这能让你对更快的加载有所了解;）总是尝试动态加载它;）加载图像动态地给出最好的结果因为事实是你无法减小尺寸;）

Answer 12

<强>提示：

如果图像在多个页面中很常见，您可以使用 CSS Image Sprite 这样可以减少往返次数，并且可以使用 CDN 来更快地传送图像。
如果图片是随机的，请尝试异步加载图片，这不会杀死UI / UX。
将图片转换为 png 然后使用它们，或者您可以尝试新的WebP，如上所述。

Answer 13

您可以通过photoshop使图像渐进。你应该保存为web和检查渐进复选框。更多细节描述为here。

Answer 14

您必须大大减小文件大小。如您所建议，最简单的方法是降低图像的分辨率。

在Web服务器环境中，您有两个选择：

在图形编辑器（例如Gimp）中手动打开图像，使用“保存为网络”选项，并根据需要设置图像的尺寸和质量。
在服务器上设置批处理图像处理软件，并执行一些定期触发的作业，以对您的所有图像运行并针对所有可能的设备类型将其缩放为一堆较小的分辨率。
让图像请求通过tiny.pictures之类的实时图像优化服务运行。他们（分别为免责声明：“我们”）实时获取原始的巨大图像，对其进行缩放和优化，然后将其传递回您的访问者。您可以将所需的尺寸设置为URL参数（这可能是您的第一个主意，尽管通常的Web服务器无法做到）。

以下代码段显示了如何将图像的宽度从10800px减小到400px（请参见width参数），从而将文件大小从5.9 MB减小到6.3 kB（减少约99.9％）。您所要做的就是在原始图像的URL前面加上

。

<img src="https://tiny.pictures/api/demo/?width=400&source=http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg" alt="World map">

在网页中加载图片更快

14 个答案: