¿Qué es WebP? y ¿Cómo activarlo en WordPress?

WebP es un formato de imagen desarrollado por Google que ofrece compresión superior en comparación con formatos tradicionales como JPEG, PNG, GIF y SVG. WebP puede comprimir tanto imágenes con pérdida como sin pérdida, manteniendo una alta calidad visual con tamaños de archivo mucho más pequeños, lo que mejora el rendimiento y la velocidad de los sitios web.

Leer 

Mejores conversores de PNG A WEBP análisis

Ventajas de activar WebP en tu WordPress:

• Tiempos de carga más rápidos: Imágenes más ligeras reducen el tiempo de carga de tu sitio, mejorando la experiencia del usuario.
• Menor uso de ancho de banda: Al tener imágenes más pequeñas, se reduce la cantidad de datos necesarios para cargar la página.
• Mejora en SEO: Google valora la velocidad del sitio, y las imágenes WebP contribuyen a mejorar el puntaje de PageSpeed.
• Compatibilidad moderna: La mayoría de los navegadores modernos soportan WebP, asegurando una buena experiencia para los usuarios.

Tabla de ventajas y desventajas:

Tabla de comparación de compresión de formatos a WebP:

Tutorial: Cómo instalar un code snippet para permitir la subida de imágenes WebP en WordPress usando el plugin Code Snippets

El plugin Code Snippets permite añadir fácilmente fragmentos de código a WordPress sin la necesidad de modificar los archivos del tema. Aquí te explico cómo instalar el código para permitir la subida de imágenes WebP.

Paso 1: Instalar el plugin Code Snippets

1. Inicia sesión en tu panel de administración de WordPress.
2. Dirígete a Plugins > Añadir nuevo.
3. En el cuadro de búsqueda, escribe Code Snippets.
4. Instala y activa el plugin Code Snippets desarrollado por Shea Bunge.

Paso 2: Añadir un nuevo snippet

1. Una vez activado, en el menú lateral ve a Snippets y haz clic en Añadir nuevo.
2. Dale un título a tu snippet, por ejemplo: "Permitir la subida de imágenes WebP".

Paso 3: Copiar el código

Copia el siguiente código y pégalo en el área de código del snippet:

// Permitir la subida de imágenes WebP en WordPress
function permitir_subida_webp($mimes) {
// Añadir WebP al listado de tipos MIME permitidos
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter('upload_mimes', 'permitir_subida_webp');
// Verificar la validez del archivo subido
function verificar_tipo_archivo_webp($checked, $file, $filename, $mimes) {
// Revisar si es una imagen WebP
if (!$checked['type']) {
$wp_filetype = wp_check_filetype($filename, $mimes);
if ($wp_filetype['ext'] === 'webp') {
$checked = array(
'ext' => 'webp',
'type' => 'image/webp',
'proper_filename' => $filename
);
}
}
return $checked;
}
add_filter('wp_check_filetype_and_ext', 'verificar_tipo_archivo_webp', 10, 4);
// Permitir mostrar imágenes WebP en la galería y previsualización
function permitir_preview_webp() {
echo '
<script type="text/javascript">
jQuery(document).ready(function($){
$("body").on("click", ".attachment-preview img[src$=\'webp\']", function(){
var src = $(this).attr("src").replace("-150x150", "");
window.open(src);
});
});
</script>
';
}
add_action('admin_footer', 'permitir_preview_webp');

Paso 4: Configuración del snippet

1. Justo debajo del campo de código, selecciona la opción Ejecutar snippet en todo el sitio para que funcione tanto en el frontend como en el backend de WordPress.
2. Haz clic en Guardar y activar.

Paso 5: Probar la subida de imágenes WebP

1. Ve a Medios > Biblioteca.
2. Prueba subiendo una imagen en formato WebP. Si el código se ha implementado correctamente, deberías poder subir y previsualizar imágenes WebP sin problemas.

Con estos sencillos pasos, habrás activado la compatibilidad para subir imágenes WebP en WordPress usando el plugin Code Snippets.