ホームページ > 記事 > WeChat アプレット > ミニプログラムで画像を最適化する方法について詳しく話しましょう
ミニプログラムで画像を最適化する方法について詳しく話しましょう
- 青灯夜游転載
- 2021-11-19 19:58:444740ブラウズ
この記事では、小さなプログラムの実際の応用例を紹介し、小さなプログラムで画像を最適化する方法を説明します。皆さんのお役に立てれば幸いです。
フロントエンドのパフォーマンスの最適化と画像の最適化は不可欠かつ重要なリンクです。画像のレンダリングは、ほとんどの Web サイト ページの構成に不可欠です。特に電子商取引プロジェクトでは、バナー広告写真、メニューナビゲーション写真、商品リスト写真など、大量の写真が使用されることがよくあります。大量の画像や過度に大きい画像サイズを読み込むと、多くの場合、ページの読み込み速度に影響が生じ、ユーザー エクスペリエンスが低下します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]
最適化計画
上記の問題に基づく主な問題は、画像と画像の数です。画像の読み込み速度を向上させ、ユーザーエクスペリエンスを向上させる方法。実際、画像の最適化には優れたソリューションが数多くあり、そこから学ぶことができ、最終的には、画像全体をさまざまな方向に最適化します。
適切な画像形式を使用する
現在広く使用されている WEB 画像形式には、JPEG/JPG、PNG、GIF、WebP、Base64、 SVG など、これらの形式には独自の特徴があります。以下に簡単にまとめます:
適切な画像形式を使用すると、通常、適切な画像バイト サイズを小さくすることができます。圧縮率を高めると、画質に影響を与えることなく画像サイズを縮小できます。
ネットワーク送信の削減
アプレットは Tencent Cloud Image Server を使用します。これは、画像のスケーリングなどの多くの画像処理機能を提供します。画像縮小 品質、フォーマット変換、画像トリミング、画像丸めなどの機能。これらの機能は、指定されたパラメータを画像 URL に追加することで実現できます。画像サーバーは、パラメータ設定に従って画像を事前に処理し、CDN サーバーに保存します。画像送信のサイズを縮小します。
現在、バックグラウンド インターフェイスによって返される画像 URL はすべて、画像パラメータの前処理を設定していません。たとえば、800x800 サイズの高解像度の製品画像のボリュームは約 です。 300k. これは、画像の読み込みとレンダリングの速度低下、ユーザー トラフィックの大量消費につながりやすく、ユーザー エクスペリエンスに重大な影響を与える可能性があります。そこで、Tencent Cloud の画像処理機能を組み合わせて、ネットワーク イメージを読み込む前に、まずそれが Tencent Cloud ドメイン名の画像 URL であるかどうかを検出します。一致する画像 URL前処理を実行します。これには、スケーリング パラメータの追加 、劣化パラメータの追加 、WebP パラメータの追加 が含まれ、画像のネットワーク送信を削減します。 sizeまず、画像サーバーを通過し、Tencent Cloud の画像処理機能を使用した画像を見てみましょう。画像の拡大縮小/劣化/WebP を設定すると、
のサイズの画像になります。最終的に 246KB の容量が出力生成され、25.6KB となり、画像サイズが 80% 削減され、その効果は顕著です。
現在、ビジネス バックグラウンドで元の画像がアップロードされており、元の画像のサイズが実際のサイズよりも大きくなる可能性があります。サイズが大きいと、一方では画像の読み込みが遅くなり、他方ではユーザートラフィックの無駄が発生します。サイズの大きい画像が読み込まれると、レンダリングのパフォーマンスにも影響し、ユーザーが行き詰まりを感じたり、ユーザーエクスペリエンスに影響を与えます。スケーリング パラメーターを追加することで、実際の表示
size より小さく、より一貫性のある画像サイズを配信する画像サーバーを指定します。
画像サーバーは画質をサポートしています。値の範囲は
0-100 で、デフォルト値は元の画質です。画質を下げると画像サイズを小さくできますが、画質を下げすぎると画像の表示効果にも影響します。ネットワークのデフォルトの画質低下パラメータは 85 に設定されており、これも提供されます。ミニ プログラム: wx.getNetworkType、wx.onNetworkStatusChange、offNetworkStatusChange インターフェイスはネットワーク ステータスの変化を監視し、現在のユーザーのネットワーク タイプ networkType を取得します。ユーザー ## ネットワークによって現在使用されている 4G# などの場合、画質は動的に 80 に設定されます。一方で、ほとんどのビジネス状況では、画像のダウンロードを大幅に削減できます。現在、画像を追加すると品質パラメータを下げると、画像サイズを少なくとも 30 ～ 40% 削減できます。
/**
* 设置网络情况
*/
const setNetwork = (res: Record<string, any>) => {
const { isConnected = true, networkType = 'wifi' } = res;
this.globalData.isConnected = isConnected;
this.globalData.networkType = networkType.toLowerCase();
this.events.emit(EventsEnum.UPDATE_NETWORK, networkType);
};
wx.getNetworkType({ success: (res) => setNetwork(res) });
wx.offNetworkStatusChange((res) => setNetwork(res));
wx.onNetworkStatusChange((res) => setNetwork(res));/**
* 根据网络环境设置不同质量图片
*/
const ImageQuality: Record<string, number> = {
wifi: 85,
'5g': 85,
'4g': 80,
'3g': 60,
'2g': 60,
};
/**
* 获取图片质量
*/
export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? 'wifi'];
WebP の使用
前述したように、さまざまな画像形式にはそれぞれ長所、短所、使用シナリオがあります。その中でも、WebP 画像形式は非可逆圧縮を提供します。ロスレス圧縮画像フォーマット。 Google の公式データによると、PNG と比較した WebP ロスレス画像のバイト数は 26%, です。 WebP損失のある画像は、同様の JPG画像よりも 25-34% バイト数が少なくなります。現在では、タオバオ、京東、美団などの大手インターネット企業の製品が利用されています。
ここに WebP サンプル リンクを配置します (GIF、PNG、JPG から Webp) と、画像サイズにおける WebP の利点を直感的に感じてください。
モバイル端末での WebP の互換性については、ほとんどのユーザーがすでにサポートしています使用できますか? HTML5 のサポート表、CSS3、etc、
は、png/jpg 画像形式の WebP# を自動的に追加します。 ## パラメータ。WebP 画像形式に変換されます。 WebP は png/jpg よりもデコードに時間がかかる場合がありますが、相対的なネットワーク伝送速度は依然として大幅に向上しています。現在、ios 13 システム バージョンのユーザーが多くを占めており、アプレットは現在のシステム バージョンを取得し、ダウングレード処理用の WebP パラメータを追加しません。
// 检查是否支持webp格式
const checkSupportWebp = () => {
const { system } = wx.getSystemInfoSync();
const [platform, version] = system.split(' ');
if (platform.toLocaleUpperCase() === PlatformEnum.IOS) {
return Number(version.split('.')[0]) > IOS_VERSION_13;
}
return true; // 默认支持webp格式
};
ヒント: 現在の画像サーバーはSVG、GIF
からWebPへの変換をサポートしていないため、処理は行われません
最適化効果
ミニ プログラムのホームページにあるリスト インターフェイスの読み込みイメージをテストして、最適化の前後の効果を比較します| 写真の数 | WebP をサポートしません | WebP をサポートします | |
|---|---|---|---|
| 523K | (77% 削減) |
315K (86% 削減) |
|
| 69M | (72% 削減)3800 万 (84% 削減)
|
经过我们通过使用腾讯云图片服务器的图片处理功能，以及动态处理图片格式的方式，减少图片体积，提高图片加载速度，带来的收益比非常可观的 图片懒加载懒加载是一种性能优化的方式，将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载，对于页面加载性能上会有很大的提升，也提高了用户体验。 实现原理 使用小程序提供 我们基于小程序的 import IntersectionObserver from 'utils/observer/observer';
const ob = new IntersectionObserver({
selector: '.goods-item', // 指定监听的目标节点元素
observeAll: true, // 是否同时观测多个目标节点
context: this, // 小程序 this 对象实例
delay: 200, // 调用 onFinal 方法的间隔时间，默认 200ms
onEach: ({ dataset }) => {
// 每一次触发监听调用时，触发 onEach 方法，可以对数据进行一些过滤处理
const { key } = dataset || {};
return key;
},
onFinal: (data) => {
// 在触发监听调用一段时间 delay 后，会调用一次 onFinal 方法，可以进行埋点上报
if (!data) return;
console.log('module view data', data);
},
});
// 内置函数方法，如下：
ob.connect(); // 开始监听
ob.disconnect(); // 停止监听
ob.reconnect(); // 重置监听然后在我们的 import IntersectionObserver from 'utils/observer';
Component({
properties: {
src: String,
/**
* 是否开启可视区域加载图片
*/
observer: {
type: Boolean,
value: false,
},
....
},
data: {
isObserver: false,
...
},
lifetimes: {
attached() {
// 开启可视区域加载图片
if (this.data.observer) {
this.createObserver();
}
},
},
methods: {
...
/**
* 监听图片是否进入可视区域
*/
createObserver() {
const ob = new IntersectionObserver({
selector: '.free-image',
observeAll: true,
context: this,
onFinal: (data = []) => {
data.forEach((item: any) => {
this.setData({
isObserver: true,
});
ob.disconnect(); // 取消监听
});
},
});
ob.connect(); // 开始监听
}
}
})<free-image observer src="{{ src }}" />优化效果测试我们小程序首页列表，使用图片懒加载的效果
通过使用图片懒加载的功能，减少图片数量的加载，有效提高页面加载性能。在上述我们已经对图片体积进行优化过，所以在我们小程序中，只有在网络情况较差的情况下，才会自动开启图片懒加载功能。 优化请求数我们项目中有很多本地图片资源，比如一些 icon 图标、标签类切图、背景图、图片按钮等。而小程序分包大小是有限制：整个小程序所有分包大小不超过 针对此问题，需要找到权衡点来实现来优化请求数，首先我们把图片资源进行分类，以及使用场景，最后确定我们方案如下：
其他策略大图检测实现大图检测机制，及时发现图片不符合规范的问题，当发现图片尺寸太大，不符合商品图尺寸标准时会进行上报。在小程序开发版/体验版中，当我们设置开启 加载失败处理使用腾讯云图片处理功能， 这是我们图片组件 onError(event: WechatMiniprogram.TouchEvent) {
const { src, useCosImage } = this.data;
this.setData({
loading: false,
error: true,
lazy: 'error',
});
// 判断是否腾讯云服务的图片
if (useCosImage) {
wx.nextTick(() => {
// 重新加载原生图片
this.setData({
formattedSrc: src, // src 是原图地址
});
});
}
// 上报图片加载失败
app.aegis.report(AegisEnum.IMAGE_LOAD_FAIL, {
src,
errMsg: event?.detail.errMsg,
});
this.triggerEvent('error', event.detail);
}图片请求数检查使用小程序开发者工具的体验评分功能，体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。 通过体验评分的结果，可以分析我们存在短时间内发起太多的图片请求，以及存在图片太大而有效显示区域较小。所以根据分析的结果，开发需要合理控制数量，可考虑使用雪碧图技术、拆分域名或在屏幕外的图片使用懒加载等。 上传压缩图片在上传前在保持可接受的清晰度范围内同时减少文件大小，进行合理压缩。现如今有很多不错的图片压缩插件工具，就不在详情介绍了。 推荐一个比较优秀的图片压缩网站：TinyPNG使用智能有损压缩技术将您的 WebP, PNG and JPEG 图片的文件大小降低 更多编程相关知识，请访问：编程入门！！ |
以上がミニプログラムで画像を最適化する方法について詳しく話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。