双十一互动图片和文字的处理方案

原创
2023/12/15 16:20
阅读数 17





一张图片值千言万语,一张经过优化的图片,才能真正地提升我们的网页速度,从而给我们更多的图片插入机会去吸引用户,让网页更加生动。


背景


在本次双十一幻想岛活动中,图片的处理是统一进行处理的,通过这个方法,所有的图片几乎都进行了图片处理,当部分的图片转为webp,或者增加压缩参数之后,大小能够非常显著地缩小,能够提高运行时的性能。

当涉及到在网站上使用图像时,选择适合不同机型的图像格式非常重要。图像格式可以影响网站的加载速度和性能,并且可以显着影响用户体验。

PNG(Portable Network Graphics)是一种无损图像格式,通常用于图像需要透明背景的情况。它支持高质量的图像压缩,但文件大小较大,加载速度较慢。相比之下,JPEG是一种有损图像格式,适用于包含大量颜色细节的照片。它可以在保持图像质量的前提下减小文件大小,但可能会损失一些细节。

WebP是由Google开发的图像格式,结合了有损和无损压缩算法。它可以显著减小图像文件的大小,提高网站的加载速度。与PNG和JPEG相比,WebP格式可以在更小的文件大小下提供相同的图像质量。因此,将图像格式从PNG或JPEG转换为WebP可以帮助我们以更高效的方式适配不同机型。

然而,非常值得注意的是,并不是所有设备都适合webp,所以这一次我们的图片处理主要就是结合了webp转换+CDN压缩和裁切来做的。

图片处理逻辑


在图片处理的时候,首先是CDN的一些基本参数的调整。


  图片缩放裁剪


按长边缩放,不改变图片原有的长宽比,不对图片做裁剪
仅支持图片原尺寸宽度以内以 10 为单位的等比缩小,即 10x10 - 400x400
图片 URL 结尾拼接_200x200.jpg
例如: https://s.alicdn.com/@img/imgextra/i4/O1CN01aPJNdW23khevc9KZv_!!6000000007294-2-tps-404-94.png_200x200.jpg

  图片质量调整


png 图片不支持质量调整

示例:https://s.alicdn.com/@img/imgextra/i4/O1CN01aPJNdW23khevc9KZv_!!6000000007294-2-tps-404-94.png_q30.jpg

当前支持的值:

  1. _q30.jpg

  2. _q50.jpg

  3. _q60.jpg

  4. _q75.jpg

  5. _q80.jpg

  6. _q90.jpg

  7. _q95.jpg


webp 格式转换

只需要在图片 URL 拼接 _.webp 就可以实现 webp 格式转换

示例:https://s.alicdn.com/@sc01/kf/H358e118c7fba46deb45690f0e483bdf5E.jpg_300x300.jpg_.webp

此外还有一些圆角裁切等等规则,在此处并没有被用到。

除开基本参数的调整,我们还针对是否本地已有缓存,对于高低端机的自定义配置放进去图片处理的流程,这样就是一个比较完整的能够用于项目中的处理了。

  关于图片的一些学习经验


  1. 有透明就png, 没有就jpg。(极少部分如果透明的PNG太大,可以考虑切一部分图片出来,然后加上使用CSS来实现整个效果
  2. 怎么样切一张最适合的图片? 如果是简约矢量图,切成PNG会更加节省空间,如果是色彩多的,jpg则是更优的选择
  3. 对于一张尺寸中等的图片,心理价位一般要小于155k。如果大了,可以考虑压缩,或者转换jpg,或者q90等等方案来降下来。
  4. base64是一种内嵌的方法。不需要请求。太小的可以直接base64,或者是可以作为离线的兜底方案

关于使用特殊字体使用的方案


  1. 配置在斑马scheme里面,添加我们需要的字体。然后点击上传。
  2. 引入数字时的一个很好的解决方案:下载并使用第一个纯 JavaScript字体子集化方案github: fontmin,然后在CDN网站上传字体,点击Zcache显示链接,复制,最后直接在css入口引用
    @font-face {  font-family: "AlibabaPuHuiTi-2-95-ExtraBold";  src:    // IE9    url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.eot"),    /* IE6-IE8 */    url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.eot?#iefix") format("embedded-opentype"),    /* chrome、firefox */    url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/22108b678b3b5e3d0109a17bc3c5cff4-AlibabaPuHuiTi-2-95-ExtraBold.woff") format("woff"),    /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */    url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/dabf8547ede2d2da56d4f4d976704540-AlibabaPuHuiTi-2-95-ExtraBold.ttf") format("truetype"),    /* iOS 4.1- */    url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/49cd1a947d2555ed55af5d248dd1646a-AlibabaPuHuiTi-2-95-ExtraBold.svg") format("svg");  font-style: normal;  font-weight: normal;}
  3. 全字库引入的办法
    import {useFontLoader} from '@ali/alimod-font-utils'const fontFamily = useFontLoader('https://g.alicdn.com/eva-assets/44169d9add0c0d26140d6d35994da982/0.0.1/tmp/444ec60/ff754b3c-5917-47aa-99e2-cb6f4df876ea.ttf', 'sans-serif', 'FZLANTY')

    <View className={styles.text} style={{fontFamily}}>淘淘总动员欢迎你</View></View>


在大多数时间我们可以选择1,2,因为这几乎是最小引入成本,如果说字体很多的话,那可能就会使用到第三种办法。
在本次双十一互动里,我们主要是运用了1方案,因为特殊字体数量并不多。

对于字体和图片的处理在本次双十一互动的介绍就到这里结束,在本文中,我们已经探讨了作为现代前端开发不可或缺一环的图片处理。

WebP格式由于其出色的压缩效率和质量保持,正成为越来越多开发者的首选。在保持视觉质量的同时降低文件大小,这对于移动用户和那些对加载速度有着严格要求的应用尤为关键。

与此同时,我们讨论了如何通过前端技术动态调整图片尺寸,以满足不同设备和响应式布局的需求。这样不仅可以提升用户体验,还能避免不必要的数据传输,进一步优化性能。

至于图片文件后缀的处理,它可能看起来是一个小细节,但正确的文件命名和后缀设置对于SEO优化和网站维护来说是至关重要的。一个清晰的命名规范可以帮助搜索引擎更好地理解和索引网站内容,同时也让维护变得更加简单。

总结

在前端开发的道路上,有效地处理图片是一个持续的挑战。随着技术的发展,我们肯定会看到新的图像格式和处理技术的出现。未来肯定是需要不断探索和适应这些变化的,以确保网站或应用可以在任何情况下都提供最佳的性能和用户体验。

我期待着这一领域的未来发展,并会继续关注最新的趋势和最佳实践。毕竟,一张图 片值千言万语,一张经过优化的图片,才能真正地提升我们的网页速度,从而给我们更多的图片插入机会去吸引用户,让网页更加生动。


团队介绍

我们是淘天技术互动前端团队,负责“芭芭农场”、“淘金币”、“斗地主”、“小流浪旅舍”等热门产品的开发和优化。不仅如此,我们还承担双促、春节、市场PR等S/A级营销互动,为商家、达人、主播等提供私域内的互动玩法,让亿万用户感受到更智能、便捷、优质的消费体验。
除此之外,我们是一支充满活力、想象力,能够自嘲、自嗨,同时不敷衍工作、不耽误生活的前端团队。如果你想加入我们这个风趣、搞怪、高端的团队,那么不要犹豫了!我们期待有才华的前端工程师,擅长使用HTML/CSS/JavaScript等技术,能够在复杂的问题上游刃有余,喜欢和人沟通合作,富有创新精神和团队意识的你,加入我们,一起开发更加有趣、智能的互动产品!
岗位要求
1. 计算机、通信、电子信息等对口专业优先;
2.熟练掌握前端主流技术栈,前端框架 React / Vue 至少一种;
3.对业务有良好的理解,关注用户体验,并能够持续优化;
4.有良
好的沟通和有团队协作能力,拥有开源项目、成熟作品者优先;
5.学习能力强,做事主动,责任心强;
简历投递邮箱 :xixia.sm@taobao.com

¤ 拓展阅读 ¤

3DXR技术  |  终端技术  |  音视频技术
服务端技术  |  技术质量  |  数据算法


本文分享自微信公众号 - 大淘宝技术(AlibabaMTT)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部