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

Question

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

我先在smash .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)和applha有关的东西我不希望把图像质量降低太多，你认为网络可以接受多少?我当前的位深度是24，是不是太大了?

你还会如何优化这样的网络图像?

Answer 1

用你需要的。仅此而已。

如果你的网站有内容需要1MB的图片来达到目的，那就这样吧…使用它。如果您可以使用50KB的版本，因为它不是您的内容的中心，那么就走这条路吧。

指导方针就是……不具体的建议，什么是最有效的。你需要权衡一下你的具体情况。你需要什么才能使你的网站有效?你会失去多少用户，因为他们不能(或不愿)加载你的大型网站?你是否拥有吸引人的内容?

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

你使用正确的图像格式开始吗?对于照片使用JPEG，对于任何需要无损或有alpha通道的内容使用PNG。我想你会在png上发现一些位深度的兼容性问题。

Answer 2

151 KB对于今天的网速来说并不是那么多。您可以在$(document).ready(function(){});块中执行javascript，以确保在获取背景之前加载文档，以加快页面渲染速度。

我发现这个资源由谷歌，指的是一个破碎的链接如何优化图像与photoshop