在网页中更快地加载图像答案

【问题标题】：Loading images Faster in Webpage在网页中更快地加载图像
【发布时间】：2022-05-05 20:59:29
【问题描述】：

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

设置高度和宽度有一种解决方案，但我们无法为图像设置高度和宽度。我们该如何解决？

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

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

【问题讨论】：

我不明白。但是为什么不能指定高度和宽度？
您应该像使用缩略图一样使用较低分辨率的图像，并且仅当用户单击它或将鼠标悬停在它上面时才显示全分辨率图像......无论您的应用程序需要什么。这样您就不会加载大量用户甚至不感兴趣的大文件。
即使您在屏幕上调整图像输出的大小，您仍然会加载完整的图像大小。
如果您不能降低质量，那么我建议您将图像分成几个较小的图像，然后像拼图一样拼凑在一起。 Fireworks 是一个很好的程序。
“有一种解决方案可以设置高度和宽度，但我们无法为图像设置高度和宽度。”，我无法理解如何通过设置高度来更快地加载图像宽度？

标签： jquery html image twitter-bootstrap-3

【解决方案1】：

有几个解决方案可供探索用于管理大图像：

尝试减小文件大小（恕我直言，3-5MB 太高了）：

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

你也可以探索：

使用 CDN 提供图片（以允许并行加载）
使用像Cloudinary/IMGIX 这样的服务可以让你动态选择你想要的图片尺寸

【讨论】：

Offcourse 加载这么大尺寸的图像肯定需要很多时间，我使用 JPEG 压缩，这使我的图像比实际尺寸小 60%..

【解决方案2】：

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

另外，还有一个重要的附加好处：搜索引擎通过 HTML 中的内容来衡量页面加载速度，而不是 jQuery 事后加载的内容。这意味着当 Google 测量您网站的加载速度时，页面速度结果看起来会好很多。这是怎么做的：

首先：从您的 HTML 中删除所有大图像（我的图像恰好在一个无序列表中）：从您的 HTML 中删除所有大图像

其次：添加一个 jQuery sn-p 将它们添加回 HTML，在页面上的所有其他内容加载后：

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

完成：D

【讨论】：

【解决方案3】：

为您的图像使用 HTTP 缓存标头。一旦加载的图像将不会在 HTTP 缓存标头定义的缓存到期之前重新加载。

【讨论】：

.png、.jpg 和 .gif 图像在保存在文件中时已被压缩。使用 gZip 将无济于事。

【解决方案4】：

尝试在document 加载时使用容器元素的background-image 属性加载图像；设置容器元素 display:none 。这应该在浏览器中缓存图像，消除在实际click 时向服务器请求图像的额外请求 - 图像已经加载到document 中，在“链接”或button 上的第一个click 之前缓存在浏览器中。在“链接”的click 或button 上，切换具有id 的容器元素的display 属性与button 的className 相同，在"block" 、"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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

如果你真的不能减小图像文件的大小，那么动态加载图像：

https://github.com/pazguille/aload

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

【讨论】：

【解决方案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。这方面有很多好的网站。谷歌上榜： 3 Ways to Preload Images with CSS, JavaScript, or Ajax

如果您将这两者和压缩结合起来，您可能会有一个可行的解决方案。但是如果没有工作样本就很难说。固态硬盘

我还想看看： Best Practices for Speeding Up Your Web Site 参考优化内容，特别是缓存。

【讨论】：

【解决方案8】：

看到亲爱的关注这个网址：Website Performance Checker

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

【讨论】：

【解决方案9】：

您可以寻求像谷歌那样（仍然如此）的解决方案，通过移动浏览，您基本上设置了一个代理，它可以

Gzip（在代理上）
使用其他协议（例如 spdy）

Here是google做的数据压缩：

否则，如果您无法更改图像，并且无法以任何方式降低质量，并且无法更改服务器（并且建议的 javascript liberays 还不够），那么您似乎别无选择。但是，由于您只指定它应该在 5 秒内完成（对于 wiki 示例，这大致转换为 10 mbit 的下载量），那么您的图像太多，或者所需的互联网速度非常低。

【讨论】：

【解决方案10】：

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

【讨论】：

请提供更多信息。这更像是评论而不是答案。虽然您的建议可能会解决 OP 的问题，但目前尚不清楚如何或为什么。文档中的解释、来源和引用，以阐明应如何提供答案。

【解决方案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 中继器控制的代码，我希望这能让您了解更快的加载；）始终尝试动态加载它；）动态加载图像可以获得最佳结果，因为事实是您无法减小大小;)

【讨论】：

【解决方案12】：

提示：

如果图像在多个页面中是通用的，您可以使用 CSS Image Sprite 东西，这将减少往返次数，并且为了更快地交付图像，您可以使用 CDN。
如果图片是随机的，请尝试异步加载图片，这不会终止 UI/UX。
将图像转换为 png 然后使用它们，或者您可以尝试上述新的 WebP。

【讨论】：

【解决方案13】：

您可以通过 Photoshop 使图像渐进。您应该另存为 web 并选中渐进式复选框。更多细节描述here。

【讨论】：

【解决方案14】：

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

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

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

以下 sn-p 显示了如何将图像的宽度从 10800 像素减小到 400 像素（请参阅宽度参数），从而将文件大小从 5.9 MB 减小到 6.3 kB（减少约 99.9%）。您所要做的就是添加原始图片的 URL。

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

【讨论】：