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

151 KB并不是今天的互联网速度。您可以在$(document).ready(function(){});块中执行javascript，以确保在获取背景之前加载文档，以便在需要时加快页面渲染。

我发现此resource by google指的是how to optimize images with photoshop

上的链接断开

Answer 2

使用您需要的东西。没什么。

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

指南只是......对大多数情况有用的非特定建议。您需要权衡特定于您的情况。您的网站有效需要什么？您将失去多少用户，因为他们无法（或者不会）加载您的巨型网站？你有一些引人入胜的内容吗？

现在，开始优化。在大多数情况下，当你进入过度优化领域时，我不会按照你在问题中提出的建议行事。但是，有很多很好的理由（例如移动设备），您可能希望至少有两个版本的内容可用。（而且，不要让我开始使用＆＃34;视网膜＆＃34;分辨率图像。）

您开始使用正确的图片格式吗？使用JPEG作为照片，PNG用于您需要无损或具有Alpha通道的任何内容。我认为你会发现PNG上的一些比特深度的兼容性问题。

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

2 个答案: