【问题标题】:Making my background images load faster让我的背景图片加载速度更快
【发布时间】:2014-12-14 15:41:24
【问题描述】:

http://www.leona-anderson.com

body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}

我在每个网站上都有不同的背景图片,因为它们是 1080p,所以加载需要一些时间。

我使用带有 minamaze 主题的 wordpress 4.0.5。

我发现我使用了预加载 javascript 功能,但在我的首页上,我没有关于其他网站背景图片的信息,所以我希望有人可以为我提供不同的解决方案。

我的图片是大约 1mb 大小的 .png,也许我也可以尝试再压缩一些?

提前致谢

【问题讨论】:

    标签: javascript html image css


    【解决方案1】:

    如果您使用 CSS3 背景渐变而不是大背景图片,您可以大幅缩短网站加载时间。以您的主页背景图像为例,您可以像这样创建一个 background=gradient 并将女士的图像用作背景图像并将其放置在右侧:

    #content {
      display: block;
      height: 1500px;
    }
    body {
      background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
      background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
      background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
      background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
    }
    <body>
      <div id="content"></div>
    </body>

    【讨论】:

    • 我有一个类似的question。我想知道你是否可以看看。
    【解决方案2】:

    我认为要走的路是压缩成 JPEG 文件。您可以在大多数软件中选择压缩程度(我使用 GIMP)。对于背景图片来说,1 Mb 实在是太大了。

    【讨论】:

      【解决方案3】:

      您不应将 .png 用于此类图像。作为一般规则,照片应为 .jpg,图形(例如徽标)应为 .png 索引

      我将文件大小从 1.3MB 减少到 89KB 约 93%,视觉差异几乎不明显。

      这是优化后的图片:Optimized

      这是你的:Original

      【讨论】:

      • 你用什么方法压缩下来的?
      • 我使用 Photoshop 导出为 jpg,质量为 100%。几乎任何库、API 或在线服务都应该达到相同的效果。
      • @GeorgeKormaris 我有一个类似的question。我想知道你是否可以看看。
      【解决方案4】:

      由于你只使用渐变和女人,你可以用 css3 实现颜色渐变,并且只加载女人作为图像:

      CSS:

      body {
        background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, #B200FF , white); /* Standard syntax */
      }
      

      小提琴:http://jsfiddle.net/n4anrzk8/1/

      或者你尝试使用https://tinypng.com/ 来获得更小的 png 文件,如果它必须是一个图像。

      另一种非常糟糕的方法是在第一页加载所有宽度为 0 的图像。它们不可见,但浏览器会将它们保存在缓存中(如果访问者使用浏览器的缓存)。我不推荐这种方法,它只是为了完整性。

      【讨论】:

        【解决方案5】:

        使用https://tinyjpg.comhttps://tinypng.com 压缩您的图像。 始终确保您的图像尽可能无损压缩,这会在加载时间上产生巨大差异。

        【讨论】:

          猜你喜欢
          • 2019-02-15
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-12-24
          • 2017-08-17
          • 2015-08-24
          • 1970-01-01
          相关资源
          最近更新 更多