Bitrix上のすべての画像をWebPに変換する方法

CDN OptiPic — 「次世代フォーマットで画像を提供する」という問題の簡単な解決策

推奨事項によると
Google PageSpeed Insights

5分で簡単に接続

2分で
ビデオ指導

無料の技術サポート
+インストールヘルプ

オンザフライでのスマートWebP変換

OptiPic CDNから画像をリクエストしようとすると、OptiPicCDNは何をしますか:

画像のWebPバージョンを返します。
ブラウザがWebP形式をサポートしている場合
webpなしの圧縮バージョンを返します
ブラウザがWebPをサポートしていない場合
モバイル画面にレスポンシブにします
画像を携帯電話から開いた場合
キャッシュして読み込みをスピードアップ
あなたのホスティングからの負荷を減らす
あなたの画像を
保護します
EXIFおよびIPTCタグによる著作権の保護
独自の
ドメイン名を使用する
img.domain.comなどから画像を読み込むには
遅延読み込み
画像
ページをスクロールすると画像がロードされます

Webpへの変換と画像圧縮はバックグラウンドで行われ、ブラウザでの画像の表示が遅くなることはありません。
画像リクエスト時に最適化されたバージョンの準備がまだ整っていない場合は、元のバージョンが処理されずに返されます。

プラグインに移動

モジュールを構成するためのビデオによる説明 Bitrix

WebPをBitrixに接続するための5つの簡単なステップ

ステップ #1: プラグインをダウンロード Bitrix WebP

ダウンロードして、Bitrix用の公式CDNOptiPicプラグインをサイトにインストールします。

ステップ #2: OptiPic CDN にサインアップする

OptiPicCDNアカウントに登録し、CDNコントロールパネルに新しいサイトを追加します。

ステップ #3: サイト ID をコピー

作成したWebサイトのIDをクリップボードにコピーします (Ctrl + C)

ステップ #4: サイト ID をプラグインに貼り付けます Bitrix WebP

以前にサイトにインストールしたプラグインの設定ページに移動します。

コピーしたサイトIDを対応する設定フィールドに貼り付けます。

ステップ #5: 設定を保存します

プラグイン設定を保存します。コントロールパネルBitrixのキャッシュをクリアします。

必要に応じて他のプラグイン設定を変更します

モジュール設定の説明

Site ID in your personal account CDN OptiPic (個人アカウントCDNOptiPicのサイトID): WebサイトIDは、CDNOptiPic個人アカウントで確認できます。まだ追加していない場合は、サイトをアカウントに追加します。
自動忠実度をオフにするには、サイトIDをクリアするだけです。
Domain list (if images are loaded via absolute URL) (ドメインリスト（画像が絶対URL経由で読み込まれる場合）): プロトコル（http / https）を指定せずに、それぞれ新しい行に。
例：
mydomain.com
www.mydomain.com
Site pages that do not include auto-replace (自動置換を含まないサイトページ): それぞれが新しい行にあり、スラッシュ（/）で始まる必要があります
Replace only URLs of images starting with a mask (マスクで始まる画像のURLのみを置き換える): それぞれが新しい行にあり、スラッシュ（/）で始まる必要があります
例：
/upload/
/upload/test.jpeg
List of 'srcset' attributes ('srcset'属性のリスト): 画像のsrcset-markupを置き換える必要があるタグ属性のリスト
srcsetとは何ですか？
例：
srcset
data-srcset
CDN domain (CDNドメイン): CDNOptiPicが機能するドメイン。標準のcdn.optipic.ioの代わりに、サブドメイン（img.yourdomain.com、optipic.yourdomain.comなど）を使用できます。サブドメインに接続するには、OptiPicテクニカルサポートに連絡してください。

サイト上の画像の最適化を取得するもの

サイトのスピードアップ
改善
SEO
コンバージョンの増加
Googleの増加
PagespeedInsights

BitrixにWebPを使用する価値があるのはなぜですか？

Webpを使用すると、GooglePagespeedInsightsの「次世代フォーマットで画像を提供する」問題が解決されます。

つまり、WebPはファイルをより適切に圧縮し、他のすべての条件は古い形式（pngおよびjpeg）よりも優れています。つまり、ホスティングで占めるスペースが少なく、ページを表示するときのブラウザーでの読み込みが速くなります。

WebPの実装はGoogleによって積極的に推進されており、そのような統計を提供します：

WebPは、PNGよりも26％可逆的に画像を圧縮します。
WebPは、同じ構造的類似性インデックス（SSIM）を使用して、損失のある画像をJPEGよりも25〜34％圧縮します。
WebPは、わずか22％のサイズ増加で、ロスレス透過性（アルファと呼ばれる）をサポートします。

訪問者のブラウザがWebPをサポートしていない場合、CDNは古い形式（png / jpeg）を返しますが、圧縮されています（Web用に最適化されています）

画像圧縮とは

画像の最適化は、視覚的な品質を損なうことなくサイズを最小化するためのグラフィックファイルの特別な処理です。

この手順を実行するには、かなり複雑なアルゴリズムが多数あります。ただし、これらはすべて同じ基準に基づいています。そこにあるすべてのサービスデータ（たとえば、ファイルを格納するプログラムの名前など）をグラフィックファイルから削除する必要があります。また、特別なプログラムを使用して、merge /滑らかな同様の色。

その結果、視覚的に変化のない同じ画像が得られます。ただし、このファイルのバイト単位のボリューム（重み）は、元のファイルよりもはるかに少なくなります。この処理が正しく行われていれば、画質を損なうことなく画像ファイルを98％に減らすことができます。

これは、サイトのページ上の画像が最適化後に何倍も速く読み込まれることを意味します。

サイトの画像を最適化するもの

ディスク容量を節約します。
ページの読み込みを高速化します。
サーバーの最小負荷。
コンバージョンを増やします。
検索結果のサイトランキングが向上しました。

Webサイトの高速化により、行動要因が改善されるだけでなく、Webサイトのコンバージョンが増加する（売上が増加する）ことが証明されています。サイトのページが長く読み込まれるほど、そこで特定のターゲットアクションを実行できる顧客は少なくなります。インターネット上のサイトが十分に速く機能しない場合は、潜在的な収入を逃す可能性があります。オンラインリソースの加速は、コンバージョンを改善する機会を提供し、これにより収益が大幅に増加し、より多くの顧客を引き付けることができます。