Poiché l'host del blog si trova all'estero, anche se viene utilizzato il classico CN2 GIA, la velocità è molto più veloce di quella di un host VPS collocato in una normale sala computer americana. Tuttavia, scrivere articoli richiede l'inserimento di un gran numero di immagini, e WordPress lo fa installati molti plug-in (vedi: Riepilogo dei plug-in di WordPress per siti di scavo) fanno sì che il browser effettui un numero molto elevato di richieste di accesso alla pagina.
Se si tratta di un VPS domestico, come Tencent Cloud, Alibaba Cloud, ecc., ha già un vantaggio in termini di velocità, quindi finché sei disposto a spendere soldi per aumentare la larghezza di banda dell'host, la velocità dell'accesso domestico è ancora garantita. Le sale computer host VPS straniere forniscono una larghezza di banda molto ampia, ma le linee sono soggette a congestione durante le ore di punta di Internet durante la notte, il che può influire sull'esperienza del sito web.
Pertanto, se il tuo host si trova all'estero come Dizhanfou e ci sono molte immagini di pagine web, JS, CSS e altri file, dovresti provare a ottimizzarlo, ad esempio riducendo le richieste, comprimendo immagini, unendo JS e CSS, comprimendo pagine html, eccetera. Questo articolo mira principalmente a condividere l'esperienza di ottimizzazione delle immagini: impostazione del formato immagine webp del sito Web ed esperienza dell'effetto di accelerazione.
Per ulteriore esperienza e suggerimenti sull'ottimizzazione del sito Web, consulta:
- Principali tecnologie applicative e funzionalità di supporto dei blog - riepilogo dei metodi di ottimizzazione del sito web e del server
- Lo spazio DirectAdmin abilita OpCache e l'accelerazione della cache Redis: WP abilita la cache Redis
- Cloudflare blocca automaticamente gli IP dannosi sul firewall e passa automaticamente a uno script di protezione di 5 secondi per prevenire attacchi CC
PS: aggiornato il 3 settembre 2019, il formato WebP è adatto per siti Web di immagini e album fotografici. Ecco due programmi adatti a chi vuole creare album fotografici: ImgURL Pro e Chevereto.
PS: aggiornato il 29 settembre 2019, Il componente Nginx PageSpeed sviluppato da Google può realizzare un set completo di ottimizzazione delle immagini come la conversione automatica di webP e l'adattamento automatico alle richieste del browser Riferimento: server PageSpeed artefatto di ottimizzazione: Nginx distribuisce il modulo ngx_pagespeed e un'esperienza di effetti accelerata.
1. Quali sono i vantaggi e gli svantaggi delle immagini WebP?
1.1 Massimizza la compressione delle immagini
Se non c'è molto spazio per l'ottimizzazione delle immagini nei formati JPEG, PNG e GIF, le immagini WebP dopo la compressione senza perdita sono più piccole del 26% rispetto ai file PNG dopo la compressione con perdita vengono confrontate con indicatori di qualità equivalenti dal 25% al 34%.
Dall'immagine qui sotto, possiamo vedere che webp lossy può comprimere un PNG di oltre 40 kb a meno di 10 kb e garantisce la qualità dell'immagine: è indistinguibile ad occhio nudo. Per dettagli sugli effetti di accelerazione del browser di PNG e Webp, consultare: https://isparta.github.io/compare-webp/index.html. (Clicca per ingrandire )
WebP supporta anche la conversione di immagini GIF. In altre parole, la dimensione delle immagini animate in formato webp sarà inferiore. Confronto: https://isparta.github.io/compare-webp/index_a.html#12, come mostrato di seguito:
1.2 Alcuni vecchi browser non sono compatibili
Il più grande difetto delle immagini webp è che alcuni vecchi browser non le supportano, come varie versioni di IE, IOS Safari, ecc. Ma non preoccuparti, è una tendenza importante che le immagini in formato webp siano supportate dai principali browser in il futuro Per dettagli sulla compatibilità del browser webp,: https://caniuse.com/#search=webp (clicca per ingrandire)
PS: aggiornato il 16 settembre 2019, Possiamo utilizzare il codice PHP e le regole di riscrittura di Nginx per consentire al server di decidere se visualizzare le immagini webP in base al browser del client: il sito Web abilita le immagini in formato WebP - PHP e Nginx convertire formati WebP e browser adattivi.
2. Converti webp localmente
PS: aggiornato il 6 febbraio 2020, Per il software che converte immagini e video in batch, puoi anche provare FFmpeg open source e gratuito: software gratuito e open source per la conversione e la compressione di formati audio e video FFmpeg- conversione rapida del formato e compressione video.
Il modo più conveniente per un sito Web di utilizzare le immagini in formato webp non è generarle localmente, ma convertire direttamente le immagini in formato gif, png, JPG e altri formati in immagini in formato webp online. Tali siti Web includono:
- HTTPS://Web P-converter.com/
- HTTPS://EZgif.com/jpg-to-Web P
- HTTPS://wuwuwu.A convert.com/talent/immagine/
- HTTPS://cartografia.IsuX.US/
La conversione online di immagini webp è adatta per piccole quantità di immagini Se è necessario convertire un numero elevato di immagini in formato webp, è possibile scaricare un software di conversione del formato webp, come: XnConvert, iSparta, ecc., ed è possibile eseguire la conversione in batch. immagini in formato webp direttamente sul tuo computer.
- HTTP://I Sparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Conversione di Linux in webp
3.1 Installazione dello strumento Webp
Versioni principali di Webp:
- HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
Comando di installazione rapida dell'installazione WebP:
#debian install webp sudo apt-get install webp
Comandi di compilazione e installazione del codice sorgente 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
Verificare che webp sia installato correttamente. Immettere cwebp nel terminale e verrà visualizzato il seguente output, che indica che l'installazione è andata a buon fine:
[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.
Dopo l'installazione riuscita, sono presenti principalmente i seguenti strumenti di comando:
cwebp→ Strumento di codifica WebP
dwebp→ Strumento di decodifica WebP
vwebp→ Visualizzatore di file WebP
webpmux→ Strumento di multiplexing WebP
gif2webp→ Strumento per convertire immagini GIF in WebP
3.2 Utilizzo dei comandi
JPG, PNG -> WebP
Utilizza cwebp per convertire immagini JPG e PNG nel formato 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
Usa imagemagick per convertire png in jpg.
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
È inoltre possibile impostare il rapporto di qualità della compressione, il metodo, ecc.:
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Converti Webp in batch
Utilizza il comando trova per convertire tutte le immagini jpg e png nella directory specificata in immagini in formato webp. Il comando è il seguente:
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"' _ {} ; Converti automaticamente le immagini Webp in batch. Qui è necessario utilizzare le attività pianificate di Linux Se non sai come utilizzare le attività pianificate, puoi prima imparare: Sintassi di base e tutorial sul funzionamento dei comandi Linux Crontab. Crea il file: webp2jpg.sh, e incolla il seguente codice:
# 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
doneAssicurati che il file shell disponga dei permessi di esecuzione, quindi puoi eseguire webp2jpg.sh per convertire l'immagine.
4. CDN abilita webp
4.1 Attiva nuovamente Webp su Cloud
Se non hai utilizzato Youpaiyun CDN, puoi fare riferimento a: Youpaiyun CDN mirroring con un clic, CDN dinamico statico e SSL gratuito. Abilitare webp in Youpaiyun è molto semplice. Basta attivare webp adattivo. Quando il browser supporta le immagini in formato webp, Youpaiyun WebP tornerà automaticamente al formato webp, il che è molto buono. (Clicca per ingrandire)
4.2 Baidu Cloud CDN abilita Webp
Baidu Cloud non dispone della funzione webp adattiva, è necessario utilizzare l'elaborazione delle immagini per ottenerla. Aggiungi: @f_webp dopo l'immagine per convertirla direttamente nel formato webp per la navigazione. Ad esempio: 
.
L'effetto di Baidu Cloud CDN Webp è il seguente:
Il plug-in webp di WordPress WebP Express supporta una varietà di metodi di conversione delle immagini. Ad esempio, puoi chiamare: cwebp, gd, imagick sul VPS locale. per convertire oppure è possibile utilizzare l'API del servizio di conversione Webp online per implementare la conversione delle immagini.
6. Riepilogo
Il più grande vantaggio del formato webp per le immagini dei siti web è che comprime notevolmente la dimensione delle immagini. Soprattutto se la pagina web contiene un gran numero di immagini, l'effetto di accelerazione dell'accesso sarà molto evidente. Inoltre, per i siti Web di grandi dimensioni, l'attivazione delle immagini in formato Webp consentirà di risparmiare sui costi di traffico.
L'aspetto negativo del formato webp delle immagini dei siti Web è che i vecchi browser non lo supportano. Inoltre, il software di navigazione delle immagini in formato webp non lo supporta completamente. Alcuni studenti potrebbero scaricare immagini webp localmente e scoprire che le immagini comunemente utilizzate potrebbero essere aperte Questi sono tutti siti web Qualcosa che i designer devono considerare.