javascript - 减少图像加载时间和带宽使用的最有效方法

Question

我有一个巨大的图像加载在我的网站主页上，1366*690px我意识到这是巨大的，并决定考虑加快加载时间。

我首先通过 Smush.it 运行它

然后我编写了一些 JavaScript 代码来根据浏览器分辨率动态加载不同的图像:

<img id="poster" src=""/>

<script type="text/javascript">
    var width = $(window).width();

    //Attempt to lower bandwidth usage and load times by delivering a dynamic poster size
    if(width<=320) {
        $("#poster").attr('src', 'theme/images/poster/width320.jpg');
    } else if(width>320 && width<=800) {
        $("#poster").attr('src', 'theme/images/poster/width800.jpg');
    } else if(width>800 && width<=1024) {
        $("#poster").attr('src', 'theme/images/poster/width1024.jpg');
    } else if(width>1024 && width<=1280) {
        $("#poster").attr('src', 'theme/images/poster/width1280.jpg');
    } else {
        $("#poster").attr('src', 'theme/images/poster/width1366.jpg');
    }
</script>

我现在正在寻求有关如何进一步加快该过程的建议，我想我记得在某处读过，将图像分成两部分会加快页面速度，这不是为什么在从图像中制作渐变时，你把它们设为 1px 宽？(并重复)？

当前文件大小(按浏览器宽度)如下所示:

<= 320px                         ||   15.1 KB
>  320px   &&   <= 800px         ||   67.8 KB
>  800px   &&   <= 1024px        ||   101  KB
>  1024px  &&   <= 1280px        ||   142  KB
>  1280px                        ||   151  KB

注意:所有这些图像在 css 中的宽度均为 100%

我还知道一些与位深度(8,16,24,32)和aplha有关的东西 我不想将图片质量降低太多，您认为网络可以接受多少？我当前的位深度是 24，这太多了吗？

您还会如何针对网络优化此类图像？

Answer 1

使用你需要的东西。仅此而已。

如果您的网站包含需要 1MB 图像才能达到其目的的内容，那就这样吧...使用它。如果您可以使用 50KB 版本，因为它不是您内容的核心，那么就走这条路。

指南只是...对于最有效的方法的非具体建议。您需要权衡您的具体情况。您的网站需要什么才能有效？您将失去多少用户，因为他们无法(或不会)加载您的巨型网站？您是否有一些引人注目的内容可以吸引人们的关注？

现在解决这个问题，继续优化。在大多数情况下，我不会做您在问题中建议的事情，因为您正在进入过度优化的领域。但是，有很多充分的理由(例如使用移动设备)您可能希望至少有两个版本的内容可用。 (而且，甚至不要让我开始研究“视网膜”分辨率图像。)

您一开始就使用正确的图像格式吗？对于照片使用 JPEG，对于需要无损或具有 Alpha channel 的任何内容使用 PNG。我认为您会发现 PNG 上的某些位深度存在兼容性问题。