25. 图片裁剪

本教程最新版为 8.x,当前版本已放弃维护,请阅读最新版本!

说明

网页上图片的大小,也是一个需要我们特别关注的点,尤其是在没有使用 CDN 的情况下。

下面分享一个故事:

几十个人的微信群里一朋友分享了自己新开发的网站,打开时发现巨慢无比,以为是自己网络又抽风了,刚好电脑在身边,快速打开 learnku.com 测试下,打开速度还挺快,排除网络线路问题。

使用浏览器打开朋友的网址,下意识地使用 Chrome 开发者工具查看请求,发现第一屏加载了一张图片,竟然有 8M ,并且页面上还有其他四张照片,加起来也要 12M,整个页面光加载这些高清照片就要花费 20M,都能够上一个十分钟的分辨率一般的微电影的体积了。

询问了下网站带宽,得到的回复是:2M(个人网站,很正常),也就是说理论下载速度是 256Kbit/s,一个访问需要 78.125 秒才能下载完。 基本上就是有一个人访问网站,其他人就无法访问,只能等。

以上是作者经历的一个真实的例子,相信你的身边也没少出现这样的事情。

优化的原则

100kb 原则

图片,尤其是访问量较大的页面的图片,都要严格控制图片大小。有个标准就是...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0

暂无话题~