大家知道，图片对于一个网站而言是很重要的页面元素，如果一个网站没有任何图片，那页面看上去就很单调。但是，如果一个网页上图片过多也会影响网页的加载速度。像现在的商城首页、图床类网站因其图片较多，所以必须要对页面做一些优化处理，否则网页加载速度是很慢的。
图片资源过多为什么会影响网页加载速度？当大家请求了一个页面后，服务器响应了，浏览器拿到服务器端发送过来的页面文件后会进行解析和渲染。此页面中的所有静态资源（如：CSS文件、JavaScript文件、图片、Flash、音频、其它文件）都要从远程服务器下载到本地临时文件夹中。图片资源要经历 请求 >>下载>>渲染>>显示 这几个过程，所以图片资源过多时，下载是需要时间的，自然会影响网页的最终渲染时间。
另一方面，浏览器对于静态资源请求也是有并发限制的，超过限制数目的请求会被阻塞。所以静态资源过多的话，排队下载的资源也较多，看上去网页加载就显得很慢。
上图就是不同浏览器的并发请求数限制一览表。
图片资源较多的网站如何优化？对于图片资源较多的网站、图床类网站有不少方法可以优化，下面列举一些常用的优化措施供大家参考下：
1、图片资源惰性加载
大家只加载当前屏幕可视区域内的图片即可，如果图片不在当前屏幕可视范围之内就不加载，这样每次加载的图片数量很少，就加快了网页的渲染速度，同时也是按需加载。
2、图片资源使用多个单独的域名访问
上面说到了每种浏览器都是有并发数限制的，大家将图片资源分布在不同的域名部署访问，这样可以一定程度上突破同域名下的并发数限制。当然了，域名不是越多越好，建议拿1~3个域名来作为图片资源专属域名即可。
3、使用CDN对图片静态资源加速
CDN本身就是一种分布式部署方案，CDN在全国各地各种网络环境下都部署有节点，能保证用户“就近读取”所需的资源，从而加快资源的下载速度。
4、服务器端开启GZip压缩
GZip即要服务器端支持又要浏览器能支持GZip，好在现在主流的浏览器都支持GZip压缩。GZip号称能在原文件的基础上再压缩50%以上。
5、图片一定要适当裁剪
经常看到这种极不合理的现象：网页中某区域明明只需要200x200px的图片，但是加载的却是1024x768px 这种超大像素的图片，像素越大，图片物理尺寸越大，这样加载不慢才怪。
所以对于图片而言，一定要适当裁剪！调用区域需要多大的图片就加载多大的图片，通过服务器端完全可以实现图片的动态裁剪。载剪后的图片物理尺寸会变小，加载速度会快很多。
以上就是偶的观点，对于这个问题大家是怎么看待的呢？欢迎在下方评论区交流 ~ 偶是科技领域创作者，十年互联网从业经验，欢迎关注偶了解更多科技知识！css曲线动画，css文字过多，图标作为背景css，表格加边框的css，css div 中图片居中，css项目符号为实心矩形，在线查看css兼容网站