3

我为旅游行业建立了响应式网站,我们的客户肯定想要追随拥有巨大照片幻灯片来炫耀他们当地的趋势。这些幻灯片占据了浏览器的整个宽度。

我正在为上传到这些幻灯片的图像寻找推荐的最大像素宽度(仅供参考,我正在使用插件 Camera for WordPress)。一位客户最近问我这个问题,因为他担心加载时间,我之前当然也考虑过这个问题,但还没有得出一个可靠的结论(而且我在搜索的时间里还没有找到任何东西已经)。例如,在一个网站上,我上传了每张 1700x565 像素的照片。但是每个文件都超过 200K!诚然,我可能会更好地优化它,但你只能优化到某个点而不会损失质量。

我有两个担忧:

1) 那些使用非常大的分辨率(如 1920 像素或更大)的用户呢?当照片以从 1700 像素到 1920 像素(或其他)的分辨率响应增长时,它会变得像素化。

2) 桌面用户的加载时间如何?(我根本不打算为移动设备加载幻灯片,所以这不是问题)。我不想得到一个非常糟糕的谷歌页面速度分数。

有没有关于这个问题的最佳实践?有这方面的文章可以参考吗?

4

1 回答 1

0

很惊讶这没有得到回答,但我会尽力而为。

在我的培训中,网络和代码图像优化的经验法则是上传首选图像大小并使用媒体查询调整每个设备(更多信息在这里:https ://developer.mozilla.org/en-US /docs/Web/Guide/CSS/Media_queries)。

通常,我被教导将文件大小保持在 50-70kb 左右(取决于格式),但数字越小越好。Shopify 关于图像优化的文章说得最好:

http://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips#axzz2hk4NxlaN

希望这有帮助!

于 2013-10-14T23:37:56.530 回答