注册 登录

图片较多的网站,如淘宝京东、美丽说花瓣、QQ空间、百度图片等都采用哪些技术优化图片展示?

鲁强 2020-02-27 00:00:41 203 5 seo优化 搜索引擎
图片较多的网站,如淘宝京东、美丽说花瓣、QQ空间、百度图片等都采用哪些技术优化图片展示?
5 个回答
30天前
云储存
30天前

网站图片优化一直以来都是网站优化的一个重点,好多站长都没有重视这一点,以为控制图片的大小以及质量就行了,反正搜索引擎不能识别图片;其实实际不是这样的,搜索引擎也都专门编写了针对图片的蜘蛛程序,虽然不能直接识别图片,但是能够识别对图片注释的代码,这有利于蜘蛛抓取,能够帮助网站关键词排名,网页图片优化做的比较好,页面加载速度也会有所提高,用户体验度也会更好。那么如何做图片的优化呢?

1.插入图片的Alt标签

图片Alt标签是目前公认对图片优化最重要的,它往往决定了图片的排名位置。首先,Alt标签是搜索引擎判断图片内容的重要因素,其次Alt标签的文本内容会在图片无法读取的时候得以显现。所以建议每一张图片必须添加Alt标签,Alt标签在写法上要包含关键词,同时自然的描述图片内容。

2.将多个页面用到的背景图片整合成一张

将多个页面上用到的背景图片合并成一个大的图片在页面中引用 ,可以有效的减少向服务器的请求次数,减小图片体积(注意图片不要过大)。

3.使用css、iconfont代替图片

可以使用css中的before或after来绘制一些相对简单的图片,或者用iconfont字体图标库来代替图片,iconfont字体图标可以随时放大或缩小图片且不失真。

4.图片的延迟加载

当图片较多的情况下,可以考虑使用js技术使一部分图片先加载,当用户滚动浏览器滚动条时加载其他图片,不滚动不加载。

5.使用瀑布流技术

监听窗口滚动情况,当已经加载的图片的最后一张快要进入窗口的时候,开始加载下面的图片。

假设所有的图片地址已经存在一个json数据中,每次读取10张图片地址,加载它们之后,插入到现有的瀑布流末尾。

如此往复,直到加载完所有图片。

推荐阅读:

如何理解js高程里的document对象是HTMLDocument的实例?

JavaScript / ES6新关键词 let 是否在任何情况下都优于 var?

30天前
研究过花瓣网的前端 除了@learnshare提到的图片压缩等等 瀑布流展示是必不可少的 否则大量的dom会很快用光内存 另外图片的懒加载也是一个很常见的手段
30天前

没有类似网站的开发经验,不过还是说一下自己的一些理解。

首先,图片会有一些压缩。对于电商类的展示性图片,压缩比例可能不是很高,因为需要尽量保证图片的清晰度和分辨率;对于花瓣来说,图片可能尽量不压缩,因为这是用户自己存储的东西,任何压缩都会是破坏性的;而 QQ 空间,它会进行降低分辨率的压缩,就是你上传了一张 1080p 的图片,可能被转成 480p 的来存储和展示;对百度来说,它可能只存储一张图片的缩略图(低分辨率版本),用来展示搜索结果。等你查看大图的时候,回去原始地址加载图片。

然后,图片等静态文件会通过 CDN 来缓存,使用户能够从最佳、最近的服务器上下载该文件,从而提高加载速度。

另外一点,关于存储的,可能跟加载的关系并不算大,但仍然是影响性能的关键因素之一。服务器上存储的图片,会尽量,就是说同一个文件不会存储两次或多次。拿花瓣来说,可能同一幅图有几千上万个用户都采集过,但服务器上并不会给每个人都存一份同一幅图片,而只会存储一个文件。当这些用户请求这张图片时,他们得到的都是同一个文件。这种方式在一定程度上可以减少服务器的存储压力,从而提高数据存取的性能。(当然,具体各家有没有做成这个样子,或者做得如何,我们并不清楚)
30天前

直接回答题主的问题。

前端图片优化的方案:

1.使用base64编码代替图片2.合并图片sprite3.图片延迟加载4.使用css、svg、canvas或iconfont代替图片5.加载对应尺寸图片6.预加载7.更好的图片格式

我们拿淘宝网来做案例分析:

1.使用base64编码代替图片

场景:将图片转换为base64编码字符串inline到页面或css中,适用于图片大小小于2KB,页面上引用图片总数不多的情况。

2.合并图片sprite

场景:将多个页面上用到的背景图片合并成一个大的图片在页面中引用 ,可以有效的较少请求个数。但是合并的大图也不要太大。比如淘宝首页的这个sprite图片

我们打开这个图片看一下

3.图片延迟加载

场景:对应图片比较多的页面,可以考虑通过js来实现图片的延迟加载,先让一部分图片优先请求下来,当用户滚动页面的时候进一步加载图片。我们看一下淘宝首页的实现,你打开chrome控制台,然后滚动页面,就会发现新的滚动就会导致大量图片的新请求

4.使用css、svg、canvas或iconfont代替图片

场景:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。使用css,svg,iconfont减少图片尺寸,请求数据少。

5.加载对应尺寸图片场景:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量 。查看淘宝首页图片的网络加载,会通过cdn技术,加上对应要加载的图片参数,比如60x60,加载需要的尺寸。
6. 预加载场景:默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签。我们在查看淘宝网的前端代码可以看到前端加上了dns-prefetch,因为前端静态资源的域名和主域名http://taobao.com不一致
7.更好的图片格式

场景:使用webp、bpg、sharpP等新图片格式来替代原始格式,这些具有更好的压缩比。我们看淘宝这边,部分图片使用了webp格式,WEBP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍,而绝大部分的网络应用中,图片都是静态文件。

大淘宝基本把我所列举的优化方式都用上。具体项目中根据自己的使用场景选择你需要的优化图片优化方案即可!

相关问题

最新问题

最新文章