图片加载优化示例
在前端开发中,对图片资源的优化可以显著提升页面的加载速度和性能。在本示例我们将展示如何在Taro项目中导入和使用图片资源,并介绍一个出色的图片压缩工具。
压缩图片资源
首先,我们准备了两张示例图片。图片分别命名为avatar.jpg
和hot-icon.png
,放置于项目的src/static/images
目录下。这两张图片已经通过在线压缩工具 tinypng.com/ 进行了压缩。其中,avatar.jpg
的文件大小为1.44kb,hot-icon.png
的文件大小为628b。
压缩图片是提升网页加载速度的有效方案之一。使用Tinypng在线压缩网站,可以在保持图片质量的同时减小文件体积。
导入和使用图片
在Taro中,可以使用ES6的import语法来导入图片资源。以下是导入avatar.jpg
图片并在Image组件中使用的代码示例:
javascript
// index.tsx
import {View, Text, Image} from '@tarojs/components'
import Avatar from '@/static/images/avatar.jpg'
import './index.scss'
export default function Index() {
return (
<View className='index'>
<View>
<Image mode='aspectFit' src={Avatar} />
<View>
<Text>辰火流光</Text>
</View>
</View>
</View>
)
}
在上述代码中,我们通过相对路径导入了图片并将其传递给Image组件的src
属性。mode='aspectFit'
确保图片按比例适应容器,而不会变形。
微信小程序开发者工具中的显示效果
在微信小程序开发者工具中预览时,你会看到图片被正确加载并展示在页面上。
背景图片的CSS导入方法
CSS中的背景图导入是前端开发中的常见技巧。在上一例中,我们已经通过SCSS文件引入了一个背景图片。现在,我们继续在Taro项目里使用SCSS为一个元素设置背景图片。
使用SCSS设置背景图片
在index.scss
文件中,我们使用background
将图片设置为元素的背景图。注意使用url
时,路径前加上~@
表示从项目的src目录开始查找。
scss
// index.scss文件
.hot-icon {
background: url("~@/static/images/hot-icon.png") no-repeat;
width: 100px;
height: 100px;
}
在上面的代码中,.hot-icon
设置了背景图,并指定了no-repeat
属性以避免图片重复。同时,也为这个元素设置了宽高,确保图片可以正确显示。
修改index.tsx以引入背景图片
然后,在index.tsx
文件中,我们在视图结构中引入了hot-icon
的类,如下所示:
javascript
import { View, Text, Image } from '@tarojs/components';
import Avatar from '@/static/images/avatar.jpg';
import './index.scss';
export default function Index() {
return (
<View className='index'>
<Image mode='aspectFit' src={Avatar} />
<View className='hot-icon' /> {/* 新增的具有背景图的元素 */}
<View>
<Text>辰火流光</Text>
</View>
</View>
);
}
预览效果
在微信小程序开发者工具中预览时,可以看到背景图片自动转成base64格式并成功加载。
修改PostCSS配置以转换较大图片为Base64
此时,我们将背景图换为 avatar.jpg
css
// index.scss文件
.hot-icon{
background: url("~@/static/images/avatar.jpg") no-repeat;
background-size: 100%;
width: 300px;
height: 300px;
}
微信开发者工具报错,提示:[渲染层网络层错误] pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用标签。
我们发现,图片并没有被转为base64
这是因为Taro配置的PostCSS url插件默认只对大小在1KB以内的图片进行Base64转换。这是为了平衡性能与请求次数,太大的Base64编码可能会增加CSS文件大小,进而对加载速度产生影响。
扩展url插件的大小限制
如果需要转换更大的图片,我们可以通过修改PostCSS的配置来调整大小限制。在项目的config/index.ts
配置文件中,我们加入以下代码来改变限制:
typescript
url: {
enable: true,
config: {
limit: 20480 // 将大小限制设置为2KB
}
},
这样,图片直到2KB都会被转换成Base64编码。
重新编译项目检查效果
修改配置后,我们需要重新编译项目来使新配置生效。在终端运行:
pnpm dev:weapp
重新编译后,在微信开发者工具中可以看到avatar.jpg
现在已成功转换为Base64编码。
注意使用网络图片
尽管对小图使用Base64可以减少请求次数,但对于较大的图片,推荐使用网络图片的URL。因为较大的Base64编码会显著增加CSS文件的大小,这有可能抵消了减少HTTP请求所带来的性能益处。在生产环境下,对性能和加载时间敏感时,这一点尤为重要。