Debido a que el servidor del blog está ubicado en el extranjero, aunque utiliza el clásico CN2 GIA, la velocidad es mucho más rápida que la del servidor VPS ubicado en una sala de computadoras estadounidense común. Sin embargo, escribir artículos requiere insertar una gran cantidad de imágenes, y WordPress ha instalado muchas. Los complementos (ver: Resumen de complementos de WordPress para sitios de búsqueda) hacen que el navegador realice una gran cantidad de solicitudes para acceder a la página.
Si se trata de un VPS nacional, como Tencent Cloud, Alibaba Cloud, etc., ya tiene una ventaja de velocidad, por lo que siempre que esté dispuesto a gastar dinero para aumentar el ancho de banda del host, la velocidad del acceso nacional sigue siendo garantizado. Las salas de computadoras con servidores VPS extranjeros brindan un ancho de banda muy grande, pero las líneas son propensas a congestionarse durante las horas pico de Internet por la noche, lo que puede afectar la experiencia del sitio web.
Por lo tanto, si su servidor está ubicado en el extranjero como Dizhanfou y hay muchas imágenes de páginas web, JS, CSS y otros archivos, debe intentar optimizarlo, como reducir solicitudes, comprimir imágenes, fusionar JS y CSS, comprimir páginas html, etc. Este artículo tiene como objetivo principal compartir la experiencia de optimización de imágenes: configuración del formato de imagen webp del sitio web y experiencia del efecto de aceleración.
Para obtener más experiencia y consejos sobre la optimización de sitios web, consulte:
- Principales tecnologías de aplicación y características de soporte de los blogs: resumen de los métodos de optimización de sitios web y servidores
- El espacio DirectAdmin permite la aceleración de caché de Redis y OpCache: WP habilita el caché de Redis
- Cloudflare bloquea automáticamente las IP maliciosas en el firewall y cambia automáticamente a un script de protección de 5 segundos para evitar ataques CC.
PD: Actualizado el 3 de septiembre de 2019, el formato WebP es adecuado para sitios web de imágenes y álbumes de fotos. Aquí hay dos programas adecuados para que las personas creen álbumes de fotos: ImgURL Pro y Chevereto.
PD: Actualizado el 29 de septiembre de 2019, El componente Nginx PageSpeed desarrollado por Google puede realizar un conjunto completo de optimización de imágenes, como convertir automáticamente webP y adaptarse automáticamente a las solicitudes del navegador. Referencia: servidor PageSpeed. Artefacto de optimización: Nginx implementa el módulo ngx_pagespeed y una experiencia de efecto acelerado.
1. ¿Cuáles son las ventajas y desventajas de las imágenes WebP?
1.1 Maximizar la compresión de imágenes
Si bien no hay mucho espacio para optimizar las imágenes en formatos JPEG, PNG y GIF, las imágenes WebP después de la compresión sin pérdidas son un 26% más pequeñas que las imágenes WebP después de la compresión con pérdida, en comparación con indicadores de calidad equivalentes. entre un 25% y un 34%.
En la imagen a continuación, podemos ver que webp lossy puede comprimir un PNG de más de 40 kb a menos de 10 kb y garantiza la calidad de la imagen: es indistinguible a simple vista. Para obtener detalles sobre los efectos de aceleración del navegador de PNG y Webp, consulte: https://isparta.github.io/compare-webp/index.html. (Click para agrandar )
WebP también admite la conversión de imágenes GIF. En otras palabras, el tamaño de las imágenes animadas en formato webp será menor. Comparación: https://isparta.github.io/compare-webp/index_a.html#12, como se muestra a continuación:
1.2 Algunos navegadores antiguos no son compatibles
La mayor deficiencia de las imágenes webp es que algunos navegadores antiguos no las admiten, como varias versiones de IE, IOS Safari, etc. Pero no se preocupe, es una tendencia importante que las imágenes en formato webp sean compatibles con los principales navegadores en el futuro Para obtener detalles sobre la compatibilidad del navegador webp: https://caniuse.com/#search=webp (haga clic para ampliar)
PD: actualizado el 16 de septiembre de 2019, Podemos usar código PHP y reglas de reescritura de Nginx para permitir que el servidor decida si desea mostrar imágenes webP según el navegador del cliente: el sitio web permite imágenes en formato WebP: PHP y Nginx convertir formatos WebP y navegadores adaptativos.
2. Convertir webp localmente
PD: Actualizado el 6 de febrero de 2020, Para el software que convierte imágenes y videos en lotes, también puede probar el FFmpeg gratuito y de código abierto: software de compresión y conversión de formatos de audio y video gratuito y de código abierto FFmpeg- conversión rápida de formato y compresión de video.
La forma más conveniente para que un sitio web utilice imágenes en formato webp no es generarlas localmente, sino convertir directamente imágenes en gif, png, JPG y otros formatos a imágenes en formato webp en línea. Dichos sitios web incluyen:
- HTTPS://Web-P-converter.com/
- HTTPS://EZ gif.com/jpg-to-Web P
- HTTPS://wuwuwu.A convert.com/talento /imagen/
- HTTPS:// cartografía.IsuX.US/
La conversión en línea de imágenes webp es adecuada para pequeñas cantidades de imágenes. Si necesita convertir una gran cantidad de imágenes al formato webp, puede descargar el software de conversión de formato webp, como: XnConvert, iSparta, etc., y puede realizar la conversión por lotes. imágenes al formato webp directamente en su computadora.
- HTTP://Yo Esparta.GitHub.IO/
- HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/
3. Conversión de Linux a webp
3.1 Instalación de la herramienta Webp
Versiones principales de Webp:
- HTTPS://almacenamiento.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML
Comando de instalación rápida de instalación de WebP:
#debian install webp sudo apt-get install webp
Comandos de instalación y compilación del código fuente de 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
Verifique que webp esté instalado correctamente. Ingrese cwebp en la terminal y se mostrará el siguiente resultado, que indica que la instalación se realizó correctamente:
[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.
Después de una instalación exitosa, existen principalmente las siguientes herramientas de comando:
cwebp→ herramienta de codificación WebP
dwebp→ herramienta decodificadora WebP
vwebp→ Visor de archivos WebP
webpmux→ Herramienta de mezcla WebP
gif2webp→ Herramienta para convertir imágenes GIF a WebP
3.2 Uso del comando
JPG, PNG -> WebP
Utilice cwebp para convertir imágenes JPG y PNG al 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
Utilice imagemagick para convertir png a jpg.
# convert from png to jpg by imagemagic convert wzfou.com.png wzfou.com.jpg
También puede configurar la relación de calidad de compresión, el método, etc.:
convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp
3.3 Convertir Webp en lotes
Utilice el comando buscar para convertir todas las imágenes jpg y png en el directorio especificado a imágenes en formato webp. El comando es el siguiente:
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"' _ {} ; Convierta automáticamente imágenes Webp en lotes. Aquí debe usar las tareas programadas de Linux. Si no sabe cómo usar las tareas programadas, primero puede aprender: Tutorial básico de operación y sintaxis de tareas programadas del comando Crontab de Linux. Cree el archivo: webp2jpg.sh, y pegue el siguiente código:
# 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
doneAsegúrese de que el archivo shell tenga permiso de ejecución y luego podrá ejecutar webp2jpg.sh para convertir la imagen.
4. CDN habilita webp
4.1 Activar Webp nuevamente en la Nube
Si no ha utilizado Youpaiyun CDN, puede consultar: Duplicación con un solo clic de Youpaiyun CDN, CDN dinámico estático y SSL gratuito. Habilitar webp en Youpaiyun es muy simple. Simplemente active webp adaptable. Cuando el navegador admita imágenes en formato webp, Youpaiyun WebP volverá automáticamente al formato webp. (Click para agrandar)
4.2 Baidu Cloud CDN habilita Webp
Baidu Cloud no tiene función webp adaptable, es necesario utilizar procesamiento de imágenes para lograrla. Agregue: @f_webp después de la imagen para transferirla directamente al formato webp para navegar. Por ejemplo: 
.
El efecto de Baidu Cloud CDN Webp es el siguiente:
El complemento webp de WordPress WebP Express admite una variedad de métodos de conversión de imágenes. Por ejemplo, puede llamar a: cwebp, gd, imagick en el VPS local. para convertir, o puede utilizar la API del servicio de conversión Webp en línea para implementar la conversión de imágenes.
6. Resumen
La mayor ventaja del formato webp para imágenes de sitios web es que comprime en gran medida el tamaño de las imágenes. Especialmente si la página web contiene una gran cantidad de imágenes, el efecto de acelerar el acceso será muy obvio. Además, para sitios web grandes, habilitar imágenes en formato Webp ahorrará costos de tráfico.
Lo malo del formato webp de las imágenes de sitios web es que los navegadores antiguos no lo admiten. Además, el software de exploración de imágenes en formato webp no lo admite por completo. Algunos estudiantes pueden descargar imágenes webp localmente y descubrir que se pueden abrir imágenes de uso común. Todos estos son sitios web que los diseñadores deben considerar.