Cómo subir a WordPress: imágenes WebP o SVG

Los tiempos cambian… Y con ellos, las necesidades de las personas y sus actitudes.

Hace 30 años, la necesidad era un empleo fijo que garantizara una jubilación con pensión. En el 2021, necesitamos saber cómo subir a WordPress imágenes WebP o SVG. ¿Qué cosas, no?

Pero así van los tiempos, y es a este tipo de preguntas a las necesitamos dar contestación. A estas alturas, no son muchos los que siguen creyendo en las “bondades” del empleo con jubilación y pensión.

Pero dejemos la filosofía para otro día y vayamos a lo que vinimos. Primero es importante entender cómo funciona WordPress.

Cómo funciona WordPress

WordPress (bien WordPress.com o WordPress.org, que son dos plataformas distintas) es un CMS.

Esto significa que es un sistema para la gestión de contenidos. En buen criollo, es lo mismo que decir que es una plataforma que ayuda a que puedas construir de forma fácil y rápida un sitio web.

Ofrece muchísimas ventajas y el soporte es sumamente amplio, pues ha recorrido un largo camino desde 2003 que se inició.

En el caso de wordpress.com, la plataforma te aloja el sitio que construyes de forma gratuita, con la limitante de la funcionalidad. Hay ciertas cosas que puedes hacer con wordpress.org que no puedes hacer con la “.com”.

La versión (si la podemos llamar así) de wordpress.org te provee la base, el núcleo de WordPress, para que construyas tu sitio, pero debes alojarlo por tu cuenta, por lo general en servidores de paga.

Sin embargo, ambas plataformas limitan algunas cosas por igual. Es el caso, por ejemplo, de subir imágenes WebP y SVG a la biblioteca de medios. WordPress alega ser por cuestiones de “seguridad”, según el mensaje de error que arroja cuando tratas de hacerlo.

¿Se puede vencer este obstáculo? Si estás diseñando tu sitio web en WordPress.com y tu cuenta allí es gratuita (el 90% de los casos), la tienes un poco más difícil, pero hay solución.

Si estás creando tu sitio utilizando WordPress.org para alojarlo en un servidor de paga, la respuesta es un rotundo SÍ. Seguro que es posible y, si nos acompañas, verás cómo.

Cómo subir imágenes WebP y SVG en WordPress.com

Ya vimos antes los mensajes de error que arroja esta plataforma cuando intentas subir una imagen en cualquiera de estos dos formatos.

Desafortunadamente, no existe la posibilidad de editar los archivos del servidor (como si podemos hacer en WordPress.org) pues allí tienes solo un subdominio. La única salida es instalar un plugin que te permita hacerlo, y para ello debes tener un plan de paga (Business):

Una vez realizado el pago, se presentan varias alternativas, según el tipo de imagen a subir.

Imágenes WebP

En este caso, tendríamos a disposición dos plugins que nos darían la oportunidad de subir nuestras imágenes WebP: WP Enable WebP y Allow Webp image.

Tan solo debes instalarlos y activarlos, procedimiento que veremos en un momento, al hablar de WordPress.org. Al activar cualquiera de los dos, automáticamente ya podrás subir tus imágenes WebP en WordPress.com.

Imágenes SVG

Tienes un poco más de posibilidades, ya que son más los plugins que te habilitan a WordPress para que permita subir imágenes SVG una vez instalados. Mencionaremos 4, pero hay otros: SVG Support, WP SVG images, Enable SVG y Enable SVG Uploads.

Al igual que en el caso anterior, tan solo debes instalarlos y activarlos (el que decidas que te gusta más) y ya podrás subir tus imágenes SVG en WordPress.com.

Cómo subir imágenes WebP y SVG en WordPress.org

Cosa diferente sucede en el caso de WordPress.org, pues tienes dos opciones ampliamente distintas para ambos tipos de formatos de imágenes.

Al momento de escribir este post pudimos constatar que en apariencia WordPress.org ha levantado la restricción de añadir archivos SVG. Pudimos hacerlo tanto en local como en línea sin realizar ningún cambio a ningún archivo en el servidor ni instalar ningún plugin.

En vista de eso, nos enfocaremos en cómo subir imágenes WebP en WordPress.org.

1. Editar los archivos de configuración del servidor

Esta primera es la opción que recomendamos. Quizá sea un poco más engorrosa, pero te permite evitar la sobrecarga de tu sitio con muchos plugins, que finalmente lo ralentizan.

Adicionalmente, los plugins pueden representar elementos de vulnerabilidad para la seguridad de tu sitio web.

Hay tres formas de habilitar a tu sitio WordPress para que acepte la subida de imágenes WebP directamente a la biblioteca de medios, según sea tu caso.

Editando el archivo functions.php del tema de WordPress

En este primer caso, sugerimos crear un tema hijo (child theme) del tema que actualmente usas, y hacer estas modificaciones en el archivo functions.php del tema hijo. De esa forma, el tema padre no sufrirá modificaciones y siempre podrás restaurarlo en caso de algún problema.

Si no tienes un tema hijo, puedes hacer la modificación directamente en el archivo del tema. (Pero no es nada recomendable porque se perdería en una actualización del tema, en otro post trataremos el como crear un tema hijo).

Algunos definen a este archivo como “el plugin del tema (o plantilla)” ya que es a través de su modificación que se puede añadir funcionalidad extra al mismo.

Bien sea en local o en línea, deberás ubicar el directorio raíz y seguir la ruta de instalación de tu WordPress:

1. En línea (servidor del hosting): public_html/wordpress/wp-content/themes/(tema o tema hijo)

2. En local:
(Windows): xampp(o wamp)/htdocs/wordpress/wp-content/themes/(tema o tema hijo)
(Linux, en el root): /var/www/wordpress/wp-content/themes/(tema o tema hijo)

Ubicado el archivo functions.php, agregarás en este el siguiente código (puedes solo copiar y pegar):

function bp_mime_type ( $mime_types ) {
$mime_types['webp'] = 'image/webp';
return $mime_types;}

add_filter('upload_mimes', 'bp_mime_type', 1, 1);

Guarda los cambios y vuelve a cargar tu sitio WordPress, que ya te permitirá subir a la biblioteca cualquier archivo WebP.

Editando .htaccess del servidor Apache, LiteSpeed u OpenLiteSpeed

Igualmente, estando en local o en línea (a través del cPanel o Filezilla), ubica el archivo .htaccess en el directorio raíz de tu servidor.

Ubicado el archivo, agregarás en este el siguiente código (puedes solo copiar y pegar):

<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_header.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Guarda los cambios y has un reload del servidor, que ya te permitirá subir a la biblioteca cualquier archivo WebP.

Editando nginx.config del servidor Nginx

Si tu servidor es del tipo Nginx, deberás ubicar el archivo nginx.config. En este agregarás el siguiente código (puedes solo copiar y pegar):

# WebP Express rules
# -------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ { 
    add_header Vary Accept; 
    expires 365d; 
    if ($http_accept !~* "webp"){
        break;
    }
    try_files
        /wp-content/webp-express/webp-images/doc-root/$uri.webp
        $uri.webp
        /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
        ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g).webp$ {
        try_files
            $uri
            /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
            ;
}
# ------------------- 
# (WebP Express rules ends here)

2. Instalar plugins

Esta es la forma sencilla de hacerlo. Dependiendo de si te encuentras en el escritorio de WordPress.com o de WordPress.org, harás click en “Plugins”, en la barra lateral:

Luego, seguirás exactamente los mismos pasos que describimos en detalle en el post del Manual de instalación de Femora Compress. La diferencia es que buscarás uno de los plugins que habilite tu sitio web para subir imágenes WebP.

Te sugerimos usar cualquiera de los dos plugins que ya mencionamos para WordPress.com: WP Enable WebP o Allow Webp image.

Recuerda que no queremos optimizar las imágenes del sitio ni convertir las imágenes a formato WebP. Queremos solo habilitar a WordPress para que permita subir directamente las imágenes en ese formato.

Esperamos que este sencillo tutorial te permita resolver la limitación que pone WordPress para subir imágenes Webp y SVG.