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

图片处理逻辑

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

▐  图片缩放裁剪

▐  图片质量调整

示例：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

只需要在图片 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>

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