ブログホストは海外にあるため、古典的なCN2 GIAを使用しているものの、通常のアメリカのコンピュータルームにあるVPSホストよりもはるかに高速です。ただし、記事を書くには大量の写真を挿入する必要があり、WordPressは.多くのプラグインをインストールすると (サイトを掘るための WordPress プラグインの概要を参照)、ブラウザがページにアクセスするために非常に多くのリクエストを行うようになります。
Tencent Cloud、Alibaba Cloud などの国内 VPS であれば、すでに速度の利点があるため、ホストの帯域幅を増やすためにお金を費やすことを厭わない限り、国内アクセスの速度は依然として変わりません。保証されています。外国の VPS ホスト コンピューター ルームは非常に広い帯域幅を提供しますが、夜間のインターネットのピーク時に回線が混雑する傾向があり、Web サイトのエクスペリエンスに影響を与える可能性があります。
したがって、ホストがDizhanfouのように海外にあり、Webページの画像、JS、CSS、その他のファイルがたくさんある場合は、リクエストの削減、画像の圧縮、JSとCSSの結合、HTMLページの圧縮などの最適化を試みる必要があります。等この記事は主に、画像の最適化の経験、つまりウェブサイトの WebP 画像形式の設定と加速効果の経験を共有することを目的としています。
ウェブサイトの最適化に関する詳しい経験とヒントについては、以下をご覧ください。
- ブログを支える主な応用技術と機能 - Webサイトとサーバーの最適化手法まとめ
- DirectAdmin スペースで OpCache と Redis キャッシュの高速化が可能 - WP で Redis キャッシュが有効化
- Cloudflareは、ファイアウォールへの悪意のあるIPを自動的にブロックし、CC攻撃を防ぐために5秒間のシールドスクリプトに自動的に切り替えます。
追記: 2019 年 9 月 3 日 に更新されました。WebP 形式は写真 Web サイトやフォト アルバムに適しています。ここでは、個人がフォト アルバムを作成するのに適した 2 つのプログラム、ImgURL Pro と Chevereto を紹介します。
追記: 2019 年 9 月 29 日更新、 Google が開発した Nginx PageSpeed コンポーネントは、WebP の自動変換やブラウザのリクエストへの自動適応など、一連の画像最適化を実現できます。参考: PageSpeed サーバー。最適化アーティファクト - Nginx は、ngx_pagespeed モジュールと加速されたエフェクト エクスペリエンスをデプロイします。
1. WebP 画像の長所と短所は何ですか?
1.1 画像圧縮を最大化します
JPEG、PNG、GIF 形式の画像を最適化する余地があまりない場合、可逆圧縮後の WebP 画像は、同等の品質指標と比較して PNG ファイルよりも 26% 小さくなります。 25% から 34% 増加します。
下の図から、WebP 非可逆圧縮は 40 kb を超える PNG を 10 kb 未満に圧縮でき、肉眼では区別できない画像の品質を保証していることがわかります。 PNG と Webp のブラウザ アクセラレーション効果の詳細については、https://isparta.github.io/compare-webp/index.html を参照してください。 （拡大するにはクリックしてください ）
WebP は GIF 画像変換もサポートしています。つまり、以下に示すように、WebP 形式のアニメーション画像のサイズが小さくなります。
1.2 一部の古いブラウザには互換性がありません
WebP 画像の最大の欠点は、さまざまなバージョンの IE、IOS Safari など、一部の古いブラウザーが WebP 画像をサポートしていないことです。しかし、心配しないでください。WebP 形式の画像は、世界の主要なブラウザーでサポートされることが大きな傾向です。 WebP ブラウザの互換性の詳細については、https://caniuse.com/#search=webp (クリックして拡大)
追記: 2019 年 9 月 16 日更新、 PHP コードと Nginx 書き換えルールを使用して、クライアントのブラウザに基づいて WebP 画像を表示するかどうかをサーバーに決定させることができます。Web サイトでは、WebP 形式の画像 - PHP と Nginx が有効になっています。 WebP 形式と適応型ブラウザーを変換します。
2.WebPをローカルで変換する
追記: 2020 年 2 月 6 日更新、 画像や動画を一括変換するソフトウェアについては、オープンソースで無料の FFmpeg: 無料でオープンソースのビデオおよびオーディオ形式の変換および圧縮ソフトウェア FFmpeg- を試すこともできます。クイックフォーマット変換とビデオ圧縮。
Web サイトで webp 形式の画像を使用する最も便利な方法は、ローカルで画像を生成するのではなく、gif、png、JPG などの形式の画像をオンラインで webp 形式の画像に直接変換することです。このような Web サイトには次のようなものがあります。
- HTTPS://Web P-converter.com/
- HTTPS://EZ gif.com/jpg-to-Web P
- HTTPS://wuwuwu.A Convert.com/タレント/image/
- HTTPS:// 地図作成.IsuX.US/
WebP 画像のオンライン変換は、少量の画像に適しています。大量の画像を WebP 形式に変換する必要がある場合は、XnConvert、iSparta などの WebP 形式変換ソフトウェアをダウンロードしてバッチ変換できます。画像をコンピュータ上で直接 WebP 形式に変換します。
- HTTP://I Sparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Linux から WebP への変換
3.1 Webp ツールのインストール
Webp のメジャー バージョン:
- HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
WebP インストールのクイック インストール コマンド:
#debian install webp sudo apt-get install webp
WebP ソース コードのコンパイルおよびインストール コマンド:
# 安装编译器以及依赖包 yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel # 请到官网下载最新版本 wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz # 解压 tar -zxvf libwebp-0.6.0.tar.gz # 进入目录 cd libwebp-0.6.0 # 源代码安装环境检查 ./configure # 编译 make # 安装 make install
webp が正常にインストールされていることを確認します。ターミナルに「cwebp」と入力すると、インストールが成功したことを示す次の出力が表示されます。
[root@linux-server]# cwebp Usage: cwebp [options] -q quality input.png -o output.webp where quality is between 0 (poor) to 100 (very good). Typical value is around 80. Try -longhelp for an exhaustive list of advanced options.
インストールが成功すると、主に次のコマンド ツールが表示されます。
cwebp→ WebP エンコーダ ツール
dwebp→ WebP デコーダ ツール
vwebp→ WebP ファイルビューア
webpmux→ WebP 多重化ツール
gif2webp→ GIF 画像を WebP に変換するツール
3.2 コマンドの使用法
JPG、PNG -> WebP
cwebp を使用して、JPG および PNG 画像を WebP 形式に変換します。
cwebp filename -o filename cwebp -q 50 /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg -o /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg.webp
imagemagick を使用して png を jpg に変換します。
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
圧縮品質の比率や方法などを設定することもできます。
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Webp をバッチで変換する
find コマンドを使用して、指定したディレクトリ内のすべての jpg および png 画像を webp 形式の画像に変換します。コマンドは次のとおりです。
find ./ -name "*.jpg" -exec cwebp -q 50 {} -o {}.webp ;
find ./ -name "*.png" -exec cwebp -q 50 {} -o {}.webp ;
#或者
find . -name "*.png" | parallel -eta cwebp {} -o {.}.webp
find ./ -type f -name '*.png' | xargs -P 8 -I {} sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} ; Webp 画像をバッチで自動的に変換します。 ここでは、Linux のスケジュールされたタスクを使用する必要があります。スケジュールされたタスクの使用方法がわからない場合は、まず、Linux Crontab コマンドのスケジュールされたタスクの基本構文と操作のチュートリアルを学習してください。ファイル webp2jpg.sh、 を作成し、次のコードを貼り付けます。
# webp2jpg.sh
#!/bin/bash
for file in `ls`
do
len=`xxd -p -l 4 $file`
if [ $len == "52494646" ]; then
echo "$file is webp"
if [ ! -e $file.jpg ]; then
echo "===== convert $file ====="
dwebp $file -o $file.png
convert "$file.png" "$file.jpg"
rm $file.png
fi
fi
doneシェル ファイルに実行権限があることを確認してから、webp2jpg.sh を実行してイメージを変換します。
4. CDN により WebP が有効になります
4.1 クラウド上で Webp を再度アクティブ化する
Youpaiyun CDN を使用したことがない場合は、Youpaiyun CDN ワンクリック ミラーリング、静的動的 CDN、無料 SSL を参照してください。 Youpaiyun で WebP を有効にするのは非常に簡単です。WebP アダプティブをオンにするだけです。ブラウザが WebP 形式の画像をサポートしている場合、Youpaiyun WebP は自動的に WebP 形式に戻ります。 （拡大するにはクリックしてください）
4.2 Baidu Cloud CDN により Webp が可能になります
Baidu Cloud にはアダプティブ WebP 機能がないため、これを実現するには画像処理を使用する必要があります。画像の後に @f_webp を追加すると、画像を WebP 形式に直接変換して閲覧できます。例: 
。
Baidu Cloud CDN Webp の効果は次のとおりです。
WordPress WebP プラグイン WebP Express は、さまざまな画像変換メソッドをサポートしています。たとえば、ローカル VPS で cwebp、gd、imagick を呼び出すことができます。変換するか、オンライン Webp 変換サービス API を使用して画像変換を実装することもできます。
6. まとめ
Web サイトの画像を WebP 形式で使用する最大の利点は、画像のサイズが大幅に圧縮されることです。特に Web ページに大量の画像が含まれている場合、アクセスの高速化の効果が顕著になります。さらに、大規模な Web サイトの場合、Webp 形式の画像を有効にすると、トラフィック コストが節約されます。
Webp 形式の Web サイト画像の悪い点は、古いブラウザが WebP 形式の画像閲覧ソフトウェアを完全にサポートしていないことです。一部の学生は、WebP 画像をローカルにダウンロードして、よく使用される画像を開く可能性があります。これらはすべて、デザイナーが考慮すべき Web サイトです。