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

Name: 未定義のモジュール。 Google PageSpeed Insightsの要件に応じた、WebPへのスマートな変換とサイト上の画像の最適化
Brand: OptiPic
SKU: OptiPic CDN
Price: 7 USD
Availability: InStock
Rating: 4.71 (189 reviews)

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

推奨事項によると
Google PageSpeed Insights

5分で簡単に接続

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

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

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

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

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

ProcessWire CMSとの接続方法

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

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

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

OptiPicのメリット

毎月の支払いはありません。
完全自動化。
無料の接続支援。
サービスに接続して使用するために、プログラミングや管理に関する特別なスキルは必要ありません。
システムの画像サイズに制限はありません。
フレンドリーなテクニカルサポート。

ProcessWire CMSの画像を最適化すると、サイトをどのように高速化できますか？

ほとんどの場合、サイトのページは次のもので構成されます。

画像;
html-コード（テキストコンテンツ、レイアウト、マークアップ）;
ビデオ;
ブラウザから実行されるロジックを備えたjavascriptスクリプト。
ページスタイルのcssファイル。

画像などのアイテムは、サイトのページのボリューム全体の大部分を占め、ページの「最も重い」部分です。画像の縮小（最適化）により、間違いなくオンラインリソースのダウンロードが大幅に高速化されます。

したがって、画像のサイズを変更（縮小）すると、サイトのすべてのページの読み込みがはるかに速くなります。

サイト上の画像を圧縮すると、視覚的な品質を損なうことなく、ボリュームを75〜98％に減らすことができます。

OptiPicCDNをに接続する方法 ProcessWire CMS?

オプション #1: PHPを介したユニバーサル接続（ GitHubライブラリ）

サイト上の画像のURLは自動的に変更されます。 .htaccessまたはphp.iniに1行追加するだけで十分です。

経由の接続例 `.htaccess`

php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"

経由の接続例 `php.ini`

; Automatically add files before PHP document.
; http://php.net/auto-prepend-file
auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php

GitHub上のphpライブラリのドキュメントと例
接続の無料ヘルプを取得
OptiPicCDNを介して画像が読み込まれているかどうかを確認します
CDN：ドキュメント内の画像のURLコンバーター

リクエストによる無料統合

オプション #2: Nginxプロキシを介したユニバーサル接続

サイト上の画像のURLは変更されません。ちょうど今、すべての画像トラフィックは自動的にOptiPicCDNに進みます

# OptiPic CDN: insert it into the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    resolver 8.8.8.8; # Google DNS
    set $cdn_host_value "cdn.optipic.io";
    set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value
    if ($arg_no_optipic) {
        set $from_optipic "no";
        set $cdn_host_value $host;
    }
    
    proxy_redirect     off;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $cdn_host_value;
    
    if ($from_optipic = "yes") {
        rewrite ^/(.*) /site-XXXXXX/$1 break;
        proxy_pass http://$cdn_host_value;
    }
    
    # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic)
    try_files $uri 404;
}

XXXXXX — CDNOptiPicアカウントにあるサイトのID
nginxを再起動する前に、新しいバージョンの構成が正しいかどうかを確認することを強くお勧めします。あなたはコマンドでこれを行うことができます nginx -t.
ソフトリロード（構成の再読み込み）Nginxはコマンドで実行できます nginx -s reload
Nginxプロキシドキュメント
接続の無料ヘルプを取得
OptiPicCDNを介して画像が読み込まれているかどうかを確認します

無料統合を取得

無料の関税でも

オプション #3: `.htaccess` を介した接続（Apacheプロキシ）

サイト上の画像のURLは変更されません。ちょうど今、すべての画像トラフィックは自動的にOptiPicCDNに進みます

#---------------------------------------
# OptiPic CDN 
# Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module`
# Add new 'IfModule mod_rewrite.c' block or inject into exist one
# Get support: https://optipic.io/get-free-help/?cdn=1
<IfModule mod_rewrite.c>
    RewriteEngine On
    SSLProxyEngine On

    RewriteCond %{QUERY_STRING} !no_optipic=
    RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P]
</IfModule>
#----------------------------------------

XXXXXX — CDNOptiPicアカウントにあるサイトのID
.htaccess を変更する前に、ファイルのバックアップを作成し、ファイルへのFTPアクセス権があることを確認することを強くお勧めします。
接続の無料ヘルプを取得
OptiPicCDNを介して画像が読み込まれているかどうかを確認します

無料統合を取得

無料の関税でも

オプション #4: サイトの画像のURLを変更するだけです！

最適化されていません

<img src="/upload/foo/bar/image.png">

自動的に最適化されました

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">

XXXXXX — CDNOptiPicアカウントにあるサイトのID

無料パッケージで今すぐ始めましょう

品質保証（返金ポリシー）

ご購入にご満足いただけない場合は、ご購入日より30日以内にご連絡いただけます。これに理由がある場合は、購入の全額または一部を返金します。

1回限りの支払い- 月額料金なし

購入したパッケージは月末に燃え尽きることはありません-数ヶ月前に購入すると有利です

CDN画像からの視聴に対して料金を支払います。総使用コストは、サイトへのトラフィック量によって異なります。平均すると、これは1,000,000回の画像ビューあたり1.5ドルからです。
10,000ビューの最初のデモは無料です。

10,000
ビュー

無料

やってみようパッケージの選び方は？

1,000,000
ビュー

$ 10.00 $ 7.00

買うパッケージの選び方は？

2,000,000
ビュー

$ 14.00 $ 10.00

買うパッケージの選び方は？

5,000,000
ビュー

$ 24.00 $ 18.00

買うパッケージの選び方は？

10,000,000
ビュー

$ 40.00 $ 30.00

買うパッケージの選び方は？

20,000,000
ビュー

$ 74.00 $ 55.00

買うパッケージの選び方は？

50,000,000
ビュー

$ 165.00 $ 123.00

買うパッケージの選び方は？

80,000,000
ビュー

$ 235.00 $ 176.00

買うパッケージの選び方は？

100,000,000
ビュー

$ 282.00 $ 211.00

買うパッケージの選び方は？

すべてのパッケージを表示

どうして私たちを選んでください？

189 レビュー

I really like this product! It has all the necessary functions for the appropriate image compression keeping the same image quality and there is no server load. For a user it looks like this – install it and you can forget about it. Google and users enjoy the site’s speed. I do recommend it.

Excellent product. It compresses images well and doesn’t worsen their quality. I recommend it.

I hesitated before buying this product. Should I try it or not? I shouldn’t have waited. It’s certainly worth it. I used to have 2 GGb of images, now I have only 400 MB of them. It has provided me with almost 90% compression. It has resized all the images which I didn’t feel like doing myself. The settings can be customized. They have great customer support. They respond immediately with all the necessary help. They are said to be planning to upgrade the product with some improved features. To keep it short – I recommend it. Developers, thank you very much!

Saves a lot of time. Significantly accelerates the the site loading. Those who target for optimization will appreciate it. I recommend it

I was pleasantly surprised by this solution. Easy to set up and manage. I've been looking for something like that for a long time. Developers thank you so much !!!

すべてのレビューを読む