Cómo convertir a WebP todas las imágenes en el Kirby

CDN OptiPic — solución simple al problema "Serve images in next-gen formats"

Según recomendaciones
Google PageSpeed Insights

Conexión fácil
en 5 minutos

Soporte técnico gratuito
+ ayuda para la instalación

Convert WebP inteligente sobre la marcha

¿Qué hace OptiPic CDN cuando intenta solicitarle una imagen?:

Devuelve la versión WebP de la imagen.
si el navegador admite el formato WebP
Devuelve una versión comprimida sin webp
si el navegador no es compatible con WebP
Responde a las pantallas móviles
si la imagen se abre desde un móvil
Cachés y acelera
la carga
reduciendo la carga de su alojamiento
Protege
tus imágenes
preservar los derechos de autor mediante etiquetas EXIF e IPTC
Usa tu propio
nombre de dominio
para cargar imágenes desde img.dominio.com, etc.
Carga perezosa
imágenes
Imágenes se cargan a medida que se desplaza por las páginas.

La convert a Webp y la compresión de imágenes se produce en segundo plano y no ralentiza la apertura de imágenes en el navegador.
Si la versión optimizada aún no está lista en el momento de la solicitud de imagen, la versión original se devuelve sin ningún procesamiento.

Cómo conectarse con Kirby

Qué obtiene la optimización de las imágenes en el sitio

Acelerando
el sitio
Mejorando
SEO
Aumento
de la conversión
Aumento de Google
Pagespeed Insights

Cómo conectar OptiPic CDN a Kirby?

Opción #1: Conexión universal a través de PHP (GitHub library)

Las URL de las imágenes en el sitio cambian automáticamente. Basta con añadir 1 línea a su .htaccess o php.ini.

Ejemplo de conexión a través de `.htaccess`

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

Ejemplo de conexión a través de `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

Documentación y ejemplos de nuestra biblioteca php en GitHub
Obtenga ayuda gratuita para conectarse
Compruebe si la imagen se está cargando a través de OptiPic CDN
CDN: Convertidor de URL para imágenes en documentos

integración gratuita bajo petición

Opción #2: Conexión universal a través del proxy Nginx

Las URL de las imágenes en el sitio no cambian. En este momento, todo el tráfico de imágenes pasa automáticamente a OptiPic CDN

# 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 — ID de su sitio en su cuenta CDN OptiPic
Recomendamos encarecidamente que verifique la corrección de la nueva versión de la configuración antes de reiniciar nginx. Puedes hacer esto con el comando nginx -t.
Soft reload (re-read configs) Nginx puede ser por comando nginx -s reload
Documentación del proxy Nginx
Obtenga ayuda gratuita para conectarse
Compruebe si la imagen se está cargando a través de OptiPic CDN

Obtenga integración gratuita

incluso con una tarifa libre

Opción #3: Conexión a través de `.htaccess` (proxy de Apache)

Las URL de las imágenes en el sitio no cambian. En este momento, todo el tráfico de imágenes pasa automáticamente a OptiPic CDN

#---------------------------------------
# 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 — ID de su sitio en su cuenta CDN OptiPic
Antes de modificar .htaccess, le recomendamos encarecidamente que haga una copia de seguridad del archivo y asegúrese de tener acceso FTP al archivo.
Obtenga ayuda gratuita para conectarse
Compruebe si la imagen se está cargando a través de OptiPic CDN

Obtenga integración gratuita

incluso con una tarifa libre

Opción #4: ¡Simplemente cambie la URL de las imágenes en su sitio!

Fue
no optimizado

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

Se ha convertido en
optimizado automáticamente

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

XXXXXX — ID de su sitio en su cuenta CDN OptiPic

Comience ahora con el paquete GRATUITO

Garantía de calidad

Si no está satisfecho con su compra, puede contactarnos dentro de los 30 días a partir de la fecha de compra. Si hay motivos para esto, le reembolsaremos el costo total o parcial de su compra.

Pago único — sin pagos mensuales

El paquete comprado no se agota a fin de mes; es ventajoso comprarlo con varios meses de anticipación

Usted paga por las vistas de las imágenes de CDN. El costo total de uso depende de la cantidad de tráfico a su sitio. En promedio, esto es de $ 1.5 por cada 1,000,000 de vistas de imágenes.
La primera demostración de 10,000 de visitas es gratuita.

10,000
puntos de vista

gratis

Pruébalo ¿Cómo elegir un paquete?

1,000,000
puntos de vista

10,00 US$ 7,00 US$