javascript - 更快地加载大图像

标签 javascript html css image optimization

加载大图像的一些技巧是什么?我看这个网站:

http://vivianoheatingandcooling.com/wp-admin

还有这个

http://iplanwebsites.com/404

这两个都是相当大的图像,但加载速度非常快。我也见过会做广告的网站,其内容的两边都有 2 张大图片:

http://www.gamefaqs.com/

GameFAQs 经常这样做。他们在做什么来如此快速地将这些大图像加载到他们的页面内容等之上?除了为网络优化而保存之外,我还缺少一些技巧吗?

最佳答案

图像优化是一个关键,另一个关键是设计使优化有效。对于照片来说这并不容易,但您可以处理照片以更好地优化它。

就跳跃的绵羊而言,图像实际上非常小,分辨率很高。它的分辨率为 550 x 1900,重量仅为 150k。考虑到几乎所有正在加载的内容,对服务器的请求很少,几乎没有任何开销......这将在大多数正常的互联网连接上加载得非常快。

另一张图片是GIF格式的颜色很少的图片。如果您的调色板相对有限,您可以获得非常高分辨率的 PNG 和 GIF 图像,并获得非常小的文件。这就是这些格式的亮点——在这种情况下,图像应该是png格式。作为 png,由 pngcrush 处理,它只有 40.5kb 而不是 62kb。

是的,图像优化和减少开销(仅加载用户在每个 View 中需要的内容)是快速加载大图像的重要步骤。

关于javascript - 更快地加载大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8141316/

相关文章:

javascript - 如何避免 NodeJs、Express 中的 If else hell

javascript - 使用重组时在哪里设置 `setInterval`?

html - 将按钮分配给输入字段

html - 如何在 html 中使用文本自动空格声明

html - 粘性导航栏页脚 CSS 不起作用

css - 将对象放置在定义的形状上

javascript - 克隆音频源而无需再次下载

javascript - AngularJs ng-href 动态链接的范围未更新/工作

Html.BeginForm 不会返回 POST 操作结果 - RAZOR

css - 手机/平板设备上的字体粗细不正确