1

我有一个巨大的图像加载在我的网站主页上，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）的数量有关，而且我不希望降低图片质量太多，您认为网络可以接受多少？我当前的位深度是 24，是不是太多了？

你会如何为网络优化这样的图像？

4

2 回答 2

0

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

我通过 google 找到了这个资源，它指的是关于如何使用 Photoshop 优化图像的断开链接

于 2014-05-12T01:08:09.117 回答
0

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

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

指导方针就是……对最有效的方法的非具体建议。您需要权衡您的具体情况。您需要什么才能使您的网站有效？您将失去多少用户，因为他们无法（或不会）加载您的巨型网站？您是否有一些引人入胜的内容可以吸引人们？

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

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

于 2014-05-12T02:21:10.110 回答