ミニプログラムで画像を最適化する方法について詳しく話しましょう
この記事では、小さなプログラムの実際の応用例を紹介し、小さなプログラムで画像を最適化する方法を説明します。皆さんのお役に立てれば幸いです。
フロントエンドのパフォーマンスの最適化と画像の最適化は不可欠かつ重要なリンクです。画像のレンダリングは、ほとんどの 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 サイトの他の関連記事を参照してください。 このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undress AI Tool脱衣画像を無料で 
Undresser.AI Undressリアルなヌード写真を作成する AI 搭載アプリ 
AI Clothes Remover写真から衣服を削除するオンライン AI ツール。 
Clothoff.ioAI衣類リムーバー 
Video Face Swap完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。 
人気の記事
Agnes Tachyonビルドガイド|かなりのダービーズメソム
4週間前
By Jack chen
グラスワンダービルドガイド|ウマゴサメはかなりダービーです
3週間前
By Jack chen
<🎜>：森の99泊 - すべてのバッジとそれらのロックを解除する方法
3週間前
By DDD
Uma Musume Pretty Derby Bannerスケジュール（2025年7月）
3週間前
By Jack chen
<🎜> scarletビルドガイド|ウマゴサメはかなりダービーです
1 か月前
By Jack chen
ホットツール
メモ帳++7.3.1使いやすく無料のコードエディター 
SublimeText3 中国語版中国語版、とても使いやすい 
ゼンドスタジオ 13.0.1強力な PHP 統合開発環境 
ドリームウィーバー CS6ビジュアル Web 開発ツール 
SublimeText3 Mac版神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Python を使用して WeChat アプレットを開発する
Jun 17, 2023 pm 06:34 PM
モバイル インターネット技術とスマートフォンの普及により、WeChat は人々の生活に欠かせないアプリケーションになりました。 WeChat ミニ プログラムを使用すると、アプリケーションをダウンロードしてインストールすることなく、ミニ プログラムを直接使用して、いくつかの簡単なニーズを解決できます。この記事では、Python を使用して WeChat アプレットを開発する方法を紹介します。 1. 準備 Python を使用して WeChat アプレットを開発する前に、関連する Python ライブラリをインストールする必要があります。ここでは、wxpy と itchat の 2 つのライブラリを使用することをお勧めします。 wxpy は WeChat マシンです 
WeChat ミニ プログラムにカードめくり効果を実装する
Nov 21, 2023 am 10:55 AM
WeChat ミニ プログラムでのカードめくり効果の実装 WeChat ミニ プログラムでは、カードめくり効果の実装は、ユーザー エクスペリエンスとインターフェイス インタラクションの魅力を向上させることができる一般的なアニメーション効果です。以下では、WeChat アプレットでカードめくりの特殊効果を実装する方法と、関連するコード例を詳しく紹介します。まず、ミニ プログラムのページ レイアウト ファイルに 2 つのカード要素を定義する必要があります。1 つは前面のコンテンツを表示するため、もう 1 つは背面のコンテンツを表示するためです。具体的なサンプル コードは次のとおりです: <!--index.wxml- ->&l 
アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始
Oct 31, 2023 pm 09:25 PM
10月31日の当サイトのニュースによると、今年5月27日、アント・グループは「漢字拾いプロジェクト」の立ち上げを発表し、最近新たな進展を迎えた：アリペイが「漢字拾い-珍しい文字」ミニプログラムを開始協会からコレクションを収集する レア文字は、レア文字ライブラリを補完し、アリペイでのレア文字入力方法の改善に役立つように、レア文字に異なる入力エクスペリエンスを提供します。現在、ユーザーは「漢字ピックアップ」「珍文字」などのキーワードで検索することで「珍文字」アプレットに入ることができる。ミニプログラムでは、ユーザーがシステムで認識・入力されなかった珍しい文字の画像を送信し、確認後、Alipay のエンジニアがフォントライブラリに追加エントリを作成します。当サイトでは、発音が不明瞭な珍しい単語を対象とした最新の単語分割入力方法をミニプログラムで体験できることに注目しました。ユーザー解体 
小さなプログラムでも反応できますか?
Dec 29, 2022 am 11:06 AM
ミニプログラムはreactを利用することができます 使い方: 1. 「react-reconciler」に基づいてレンダラーを実装し、DSLを生成します; 2. DSLを解析してレンダリングするためのミニプログラムコンポーネントを作成します; 3. npmをインストールし、開発者ビルドを実行しますツール内の npm; 4. パッケージを独自のページに導入し、API を使用して開発を完了します。 
uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法
Oct 20, 2023 pm 02:12 PM
uniapp がミニ プログラムと H5 の間で迅速な変換を実現するには、具体的なコード例が必要ですが、近年、モバイル インターネットの発展とスマートフォンの普及に伴い、ミニ プログラムと H5 は不可欠なアプリケーション形式となっています。クロスプラットフォーム開発フレームワークとして、uniapp は一連のコードに基づいて小規模プログラムと H5 間の変換を迅速に実現し、開発効率を大幅に向上させます。この記事では、uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法と、具体的なコード例を紹介します。 1. uniapp uniaの紹介 
ミニ プログラムでパブリック アカウント テンプレート メッセージを使用する方法を説明します (詳細なアイデア付き)
Nov 04, 2022 pm 04:53 PM
この記事では、WeChat ミニ プログラムに関するいくつかの関連事項を紹介します。主に、ミニ プログラムでパブリック アカウント テンプレート メッセージを使用する方法を紹介します。一緒に見てみましょう。皆さんのお役に立てれば幸いです。 
Python で簡単なチャット プログラムを作成するためのチュートリアル
May 08, 2023 pm 06:37 PM
実装アイデア: チャット ルームのさまざまな機能を処理するために、スレッドのサーバー側を確立します。x02 クライアントの確立はサーバーよりもはるかに簡単です。クライアントの機能はメッセージの送受信と、特定の文字を特定の規則に従って入力するため、クライアント側では、メッセージ受信専用とメッセージ送信専用の 2 つのスレッドを使用するだけで、さまざまな機能を使用できます。使用しないでください。 
PHP とミニプログラムを使用した地理的位置特定と地図表示
Jul 04, 2023 pm 04:01 PM
PHP およびミニ プログラムの地理位置測位と地図表示 地理位置測位と地図表示は、現代のテクノロジーにおいて必要な機能の 1 つになっています。モバイルデバイスの普及に伴い、測位と地図表示に対する人々の需要も高まっています。開発プロセスでは、PHP とアプレットの 2 つのテクノロジーが一般的に選択されます。この記事では、PHP およびミニ プログラムでの地理的位置の測位と地図表示の実装方法を紹介し、対応するコード例を添付します。 1. PHP での地理位置情報 PHP では、サードパーティの地理位置情報を使用できます。 
|
