Русский  English

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

CDN OptiPic — 「次世代フォーマットで画像を提供する」という問題の簡単な解決策
推奨事項によると
Google PageSpeed Insights
5分で簡単に接続
無料の技術サポート
+インストールヘルプ
オンザフライでのスマートWebP変換
OptiPic CDNから画像をリクエストしようとすると、OptiPicCDNは何をしますか:
  • 画像のWebPバージョンを返します。
    ブラウザがWebP形式をサポートしている場合
  • webpなしの圧縮バージョンを返します
    ブラウザがWebPをサポートしていない場合
  • モバイル画面にレスポンシブにします
    画像を携帯電話から開いた場合
  • キャッシュして読み込みをスピードアップ
    あなたのホスティングからの負荷を減らす
  • あなたの画像を
    保護します
    EXIFおよびIPTCタグによる著作権の保護
  • 独自の
    ドメイン名を使用する
    img.domain.comなどから画像を読み込むには
  • 遅延読み込み
    画像
    ページをスクロールすると画像がロードされます
Webpへの変換と画像圧縮はバックグラウンドで行われ、ブラウザでの画像の表示が遅くなることはありません。
画像リクエスト時に最適化されたバージョンの準備がまだ整っていない場合は、元のバージョンが処理されずに返されます。
Kirbyとの接続方法
サイト上の画像の最適化を取得するもの
  • サイトのスピードアップ
  • 改善
    SEO
  • コンバージョンの増加
  • Googleの増加
    PagespeedInsights

Kirbyに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のメリット

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

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

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

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

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

 

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

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

OptiPicCDNをに接続する方法 Kirby?

オプション #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コンバーター
GitHubのライブラリ
リクエストによる無料統合

オプション #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

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

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

買う パッケージの選び方は？
すべてのパッケージを表示

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

2023-02-28 07:37:00

2023-01-11 18:01:00

2022-12-05 15:41:00

2022-11-25 10:54:00

2022-11-07 15:46:00
すべてのレビューを読む

OptiPicは他のプラットフォームと簡単に統合できます

すべてのプラットフォーム
Оставить отзыв