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

我的网站主页上有一个巨大的图像，

1366*690px

我意识到这是一个巨大的图像，并决定考虑加快加载时间

我先把它看了一遍

然后我编写了一些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>

变量宽度=$（窗口）.width（）；
//尝试通过提供动态海报尺寸来降低带宽使用率和加载时间
如果（width320&&width800&&width1024&&width151 KB）不适合当今的互联网速度。您可以在
$（document）.ready（function（）{}）；
块中执行javascript，以确保在获取背景之前加载文档，从而根据需要加快页面呈现速度

我发现这是指
上的一个断开的链接，请使用您所需的。仅此而已

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

指导方针只是…对于什么对大多数人有效，没有具体的建议。你需要权衡你的具体情况。你的网站需要什么才能有效？你会失去多少用户，因为他们无法（或不会）加载你的巨大网站？你有没有一些吸引人的内容可以让人们留在你身边

现在，先谈一下优化。在大多数情况下，我不会按照你在问题中的建议去做，因为你正在进入过度优化的领域。但是，有很多很好的理由（比如移动设备），你可能希望至少有两个版本的内容可用。（而且，甚至不要让我开始使用“视网膜”分辨率图像。）

您使用的是正确的图像格式吗？使用JPEG处理照片，使用PNG处理任何需要无损或具有alpha通道的内容。我想您会发现PNG上的某些位深度存在兼容性问题。
您忘记了它应该是
）
最后，谢谢。另外，根据谷歌的统计，一个平均网站的大小为320kb，这张图片并没有给我一个超过平均值的好机会：（“我记得我在什么地方读到过，把图片分成两部分可以加快页面速度”–在大多数情况下，情况并非如此；相反。这会增加额外HTTP请求的开销，在许多情况下，这两个映像的文件大小也可能大于原始映像的文件大小，因为将其拆分很可能会降低所应用压缩机制的效率。延迟映像加载下载jQuery之前的艺术时间可能会延迟很多时间。我会将脚本移动到尽可能高的位置，并删除依赖项，以便它可以并行下载。如果可能，响应CSS会很好。你应该考虑在用户端缓存它或将它存储在本地存储中……这包括处理头和cookie。
<= 320px                         ||   15.1 KB
>  320px   &&   <= 800px         ||   67.8 KB
>  800px   &&   <= 1024px        ||   101  KB
>  1024px  &&   <= 1280px        ||   142  KB
>  1280px                        ||   151  KB