HOME || Wordpress || Agregar imágenes webP en WordPress
Creado el: 25 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Agregar imágenes webP en WordPress (Versión AMP)

Agregar imágenes webP en WordPress

Agregar imágenes webP en WordPress

Cómo agregar imágenes con formato webP en WordPress y aumentar la velocidad de carga de las páginas.

Indice de contenido

Agregar imágenes webP en WordPress

De seguro ya has escuchado hablar sobre el formato de imágenes webP o te ha tocado descargar alguna de Google imágenes y resulta que cuando las quieres abrir con tu editor de imágenes éste no las reconoce como válidas.

Y esto es por que el formato webP es muy nuevo para el usuario común, pero está ganando mucha fuerza, sobre todo entre los desarrolladores de sitios web, ya que permite reducir hasta en un 60% el tamaño del archivo quedando especialmente optimizada para la Internet.

Lo primero que deberías hacer antes de probar insertar una imagen webP en WordPress es trabajar un poco convirtiendo formatos típicos como JPG o PNG en este nuevo formato optimizado para web. Si quieres saber cómo abrir desde Windows y editar un archivo webP visita el artículo Convertir jpg / png a WEBP.

Cuando intentes insertar una imagen webP desde el editor de WordPress te saldrá el molesto mensaje “lo siento este archivo no está permitido por motivos de seguridad”. La seguridad no tiene nada que ver, WordPress no acepta este formato solo por que lo desconoce, de la misma manera que cuando en Windows quieres abrir un archivo y no tienes el programa adecuado para interpretarlo.

Video Tutorial – Agregar imágenes webP en WordPress

Vamos a ver las modificaciones que tendrás que hacer por código para resolver este problema. Una vez hecho esto ya podrás insertar imágenes webP desde el editor de WordPress sin problemas.

Modificar .htaccess

La primer modificación la haremos sobre el archivo .htaccess por lo que desde ya te voy diciendo que hagas una copia de seguridad de este archivo por si algo falla.

Dependiendo de cuantos plugins tengas instalados y cuan complejo sea tu sitio tendrás más o menos código en este archivo. De cualquier forma solo deberás agregar contenido y no modificar nada de lo que está escrito. En lo posible agrega el contenido abajo de todo.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
	RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Básicamente lo que le decimos al servidor es que agregue un tipo de archivo para que sepa cómo tratarlo, si has escuchado alguna vez sobre los tipos MIME te resultada familiar. Es este caso es un tipo imagen con extensión .webp además de ejecutar sólo para el módulo correspondiente en WordPress un código que impide que se muestre el mensaje de error.

Modificar functions.php

El archivo functions.php del tema que uses en WordPress también sufrirá una modificación. Le agregaremos una función para que acepte el nuevo formato de archivo de imagen y así pueda agregarlo a la galería como cualquier imagen.

function mi_nuevo_mime_type( $existing_mimes ) {
	// agrega el formato webp a la lista de MIME TYPES de WordPress
	$existing_mimes['webp'] = 'image/webp';
	return $existing_mimes;
}
add_filter( 'mime_types', 'mi_nuevo_mime_type' );

Eso sería todo, solo te queda probar todo lo dicho y a empezar a comprimir imágenes en webp para ahorrarnos tiempo y transferencia de datos en nuestro sitio.

Hay muchos plugins que trabajan específicamente sobre este tema, el de insertar imágenes webp en nuestro WordPress, pero me parece que si vamos a estar instalando 1 plugin por cada operación que queramos realizar terminaremos saturando nuestro sitio de código y herramientas. Si podemos evitarlas con un poquito de código mejor, además estamos aprendiendo a agregar imágenes webp para optimizar el tiempo de carga de la página y agregando más y más plugins sólo harás que tu servidor también se canse más y más.

Te fue útil el artículo? Califícalo

Votos: - Promedio: