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

一.背景
在本次双十一幻想岛活动中，图片的处理是统一进行处理的，通过这个方法，所有的图片几乎都进行了图片处理，当部分的图片转为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
当前支持的值：
_q30.jpg
_q50.jpg
_q60.jpg
_q75.jpg
_q80.jpg
_q90.jpg
_q95.jpg

三.webp 格式转换
只需要在图片 URL 拼接 _.webp 就可以实现 webp 格式转换
示例：https://s.alicdn.com/@sc01/kf/H358e118c7fba46deb45690f0e483bdf5E.jpg_300x300.jpg_.webp
此外还有一些圆角裁切等等规则，在此处并没有被用到。除开基本参数的调整，我们还针对是否本地已有缓存，对于高低端机的自定义配置放进去图片处理的流程，这样就是一个比较完整的能够用于项目中的处理了。

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

四.关于使用特殊字体使用的方案
配置在斑马scheme里面，添加我们需要的字体。然后点击上传。引入数字时的一个很好的解决方案：下载并使用第一个纯 JavaScript字体子集化方案github: fontmin，然后在CDN网站上传字体，点击Zcache显示链接，复制，最后直接在css入口引用

# 堆代码 duidaima.com
@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;
}

全字库引入的办法

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优化和网站维护来说是至关重要的。一个清晰的命名规范可以帮助搜索引擎更好地理解和索引网站内容，同时也让维护变得更加简单。

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

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