|
|
一图胜千言，优化后的图片能够真正提高我们网页的速度，从而让我们有更多的机会插入图片来吸引用户，让网页更加生动。
背景
本次双十一梦幻岛活动，对图片的处理是统一的。通过这种方法，几乎所有的图片都处理完了。当一些图片转换为webp，或者增加压缩参数时，大小可以非常明显地减小，提高运行时性能。
在网站上使用图像时，为不同的型号选择正确的图像格式非常重要。图像格式会影响网站的加载速度和性能，并会显着影响用户体验。
PNG ( ) 是一种无损图像格式，通常在图像需要透明背景时使用。它支持高质量图像压缩，但文件较大且加载时间较慢。相比之下，JPEG 是一种有损图像格式，适合包含大量颜色细节的照片。它可以在保持图像质量的同时减小文件大小，但可能会丢失一些细节。
WebP是WebP开发的一种图像格式，结合了有损和无损压缩算法。它可以显着减小图像文件大小并提高网站加载速度。与 PNG 和 JPEG 相比，WebP 格式可以以较小的文件大小提供相同的图像质量。因此，将图像格式从 PNG 或 JPEG 转换为 WebP 可以帮助我们更有效地适应不同的模型。
不过非常值得注意的是，并不是所有的设备都适合webp，所以这次我们的图片处理主要是结合webp转换+CDN压缩裁剪来完成的。
图像处理逻辑
在处理图像时，第一步是调整CDN的一些基本参数。
▐图片缩放和裁剪
按照长边缩放，不改变图片原始长宽比，也不裁剪图片。
仅支持将图像在原始尺寸宽度内以10为单位缩小，即10x10 -
图片URL以.jpg结尾
例如：@img//i4/KZv_!!64-2-tps-404-94..jpg
▐画质调整
png 图片不支持质量调整
示例：@img//i4/KZv_!!64-2-tps-404-94..jpg
目前支持的值：
_q30.jpg
_q50.jpg
_q60.jpg
_q75.jpg
_q80.jpg
_q90.jpg
_q95.jpg
webp格式转换
只需要在图片URL中拼接_.webp即可实现webp格式转换。
示例：@sc01/kf/..jpg_.webp
另外，还有一些圆角切割等规则，这里不使用。
除了调整基本参数外，我们还根据是否有本地缓存以及针对高端和低端机器的自定义配置，将图像处理流程放入图像处理流程中。这是一个比较完整的流程，可以在项目中使用。
▐关于图片的一些学习心得
如果有透明度则为png，如果没有则为jpg。 （极少数情况下，如果透明PNG太大，可以考虑将图片剪掉一部分，然后添加CSS来实现整个效果。
如何剪出最合适的图片？如果是简单的矢量图，剪成PNG会更节省空间。如果是彩色的，jpg是更好的选择。
对于中等尺寸的图片来说，心理价位一般在155k以内。如果太大，可以考虑压缩，转成jpg，或者q90等来缩小。
它是一种嵌入方法。无需提出请求。如果太小，可以直接使用，也可以作为离线备份计划。
关于使用特殊字体
在Zebra中进行配置并添加我们需要的字体。然后点击上传。
引入数字时一个好的解决方案：下载并使用第一个纯字体子集解决方案： ，然后将字体上传到CDN网站上，点击显示链接，复制，最后直接在css入口中引用
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre class="code-snippet__js" data-lang="css"><code><span class="code-snippet_outer">@font-face {</span></code><code><span class="code-snippet_outer"> font-family: "AlibabaPuHuiTi-2-95-ExtraBold";</span></code><code><span class="code-snippet_outer"> src:</span></code><code><span class="code-snippet_outer"> // IE9</span></code><code><span class="code-snippet_outer"> url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.eot"),</span></code><code><span class="code-snippet_outer"> /* IE6-IE8 */</span></code><code><span class="code-snippet_outer"> url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.eot?#iefix") format("embedded-opentype"),</span></code><code><span class="code-snippet_outer"> /* chrome、firefox */</span></code><code><span class="code-snippet_outer"> url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/22108b678b3b5e3d0109a17bc3c5cff4-AlibabaPuHuiTi-2-95-ExtraBold.woff") format("woff"),</span></code><code><span class="code-snippet_outer"> /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */</span></code><code><span class="code-snippet_outer"> url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/dabf8547ede2d2da56d4f4d976704540-AlibabaPuHuiTi-2-95-ExtraBold.ttf") format("truetype"),</span></code><code><span class="code-snippet_outer"> /* iOS 4.1- */</span></code><code><span class="code-snippet_outer"> url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/49cd1a947d2555ed55af5d248dd1646a-AlibabaPuHuiTi-2-95-ExtraBold.svg") format("svg");</span></code><code><span class="code-snippet_outer"> font-style: normal;</span></code><code><span class="code-snippet_outer"> font-weight: normal;</span></code><code><span class="code-snippet_outer">}</span></code></pre></p>
如何引入完整的字体库
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer">import {useFontLoader} from '@ali/alimod-font-utils'</span></code><code><span class="code-snippet_outer">const fontFamily = useFontLoader('https://g.alicdn.com/eva-assets/44169d9add0c0d26140d6d35994da982/0.0.1/tmp/444ec60/ff754b3c-5917-47aa-99e2-cb6f4df876ea.ttf', 'sans-serif', 'FZLANTY')</span></code><code><span class="code-snippet_outer"><br /></span></code><code><span class="code-snippet_outer"><br /></span></code><code><span class="code-snippet_outer"><View className={styles.text} style={{fontFamily}}>淘淘总动员欢迎你</View></View></span></code></pre></p>
大多数时候我们可以选择1或2，因为这几乎是最小的引入成本。如果字体较多，可以采用第三种方法。
这次双十一互动，我们主要采用方案一，因为特殊字体不多。
本次双十一交互中字体和图片的处理介绍到此结束。在本文中，我们讨论了图像处理作为现代前端开发不可或缺的一部分。
WebP格式因其出色的压缩效率和质量维护，正在成为越来越多开发者的首选。在保持视觉质量的同时减小文件大小对于具有严格加载速度要求的移动用户和应用程序尤其重要。
同时，我们讨论了如何通过前端技术动态调整图像尺寸，以满足不同设备和响应式布局的需求。这不仅提高了用户体验，还避免了不必要的数据传输，进一步优化了性能。
至于图片文件后缀的处理，看似一个小细节，但正确的文件命名和后缀设置对于SEO优化和网站维护至关重要。清晰的命名约定可以帮助搜索引擎更好地理解和索引网站内容，同时也使维护更加容易。
总结
在前端开发的道路上，有效地处理图像是一个持续的挑战。随着技术的发展，我们肯定会看到新的图像格式和处理技术的出现。未来肯定需要不断探索和适应这些变化，以确保网站或应用程序在任何情况下都能提供最佳的性能和用户体验。
我期待该领域的未来发展，并将继续关注最新趋势和最佳实践。毕竟一张图片胜过千言万语，优化后的图片才能真正提高我们网页的速度，从而让我们有更多的机会插入图片来吸引用户，让网页更加生动。
团队介绍
我们是淘天科技的互动前端团队，负责《巴巴农场》、《淘金币》、《斗地主》、《小流浪旅馆》等热门产品的开发和优化。不仅如此，我们还承接双促销、春节、市场公关等S/A级营销互动，为商家、专家、主播等提供私域互动玩法，让亿万用户体验更智能、便捷、高品质的消费。经验。
另外，我们是一支充满活力、想象力、能够自嘲、自得其乐的前端团队，同时不敷衍工作、耽误生活。如果您想加入我们有趣、古怪、高端的团队，那就不要犹豫！我们正在寻找擅长使用HTML/CSS/等有才华的前端工程师。技术精湛，能够轻松处理复杂问题，喜欢与人沟通与合作，具有创新精神和团队意识。加入我们，共同开发更多有趣、智能的产品。互动产品！
职位要求
1、计算机、通信、电子信息等专业优先；
2、精通主流前端技术栈，至少一种前端框架React/Vue；
3、对业务有很好的了解，注重用户体验，能够持续优化；
4、具有良好的沟通和团队合作能力，有开源项目和成熟作品者优先考虑；
5、学习能力强，主动性强，责任心强；
简历投递邮箱：
¤拓展阅读¤
||
|| |
|
