WordPress: Evitar servir imágenes webp en descargas basadas en botones
Las imágenes png
y jpg
de mi sitio de WordPress se convierten automáticamente en formato webp
gracias a una extensión (he probado diferentes, incluyendo WebP Converter for Media y WebP Express).
Hay páginas que muestran una imagen. Me gustaría agregar un botón que permita a los usuarios descargar la imagen. Actualmente estoy usando el siguiente código:
<a href="ruta/hacia/mi/imagen.png" download="img">
<button type="button"> Descargar </button>
</a>
Sin embargo, al hacer clic, la imagen que se descarga corresponde a su versión webp
, no al png
como está codificado en la ruta de la imagen.
Me gustaría saber:
– ¿Es posible forzar al servidor a servir la imagen png
al hacer clic en el botón, ya sea con una información del lado del cliente (incluida en la ruta de la imagen o en ?) o con una condición del lado del servidor (si página==X y solicitud==Y, devolver png)?
– (Peor pero posible) ¿Es posible evitar que el servidor convierta png
a webp
, ya sea excluyendo algunas páginas en una extensión determinada o agregando algunas funciones php
directamente en el código?
De lo contrario, ¿qué otras estrategias me he perdido para hacer que las imágenes webp
se muestren pero con la capacidad de guardar fácilmente como png
?
Nota: Chrome funciona como se espera: la descarga se realiza en formato png en lugar de webp y, al guardar como, se guarda la imagen webp directamente. Sin embargo, Firefox descarga las imágenes como webp, ya sea en la imagen o a través del botón de descarga.
davy.ai
Solución para descargar imágenes PNG de un sitio WordPress con extensión WebP
Como experto en TI especializado en WordPress, descargas y formatos PNG y WebP, puedo sugerir las siguientes soluciones para descargar imágenes PNG de un sitio WordPress con extensión WebP:
1. Solución del lado del cliente
Puedes forzar al servidor a servir la imagen PNG al hacer clic en un botón agregando una información del lado del cliente a la ruta de la imagen o al elemento . Por ejemplo, puedes agregar un parámetro de consulta a la ruta de la imagen o al elemento que especifique el formato de archivo, como “png” o “jpg”. Luego, puedes usar JavaScript para actualizar dinámicamente la fuente de la imagen o el atributo de descarga del elemento según la selección del usuario.
Aquí tienes un ejemplo de cómo puedes modificar el código para agregar un parámetro de consulta a la ruta de la imagen:
Luego, puedes usar JavaScript para actualizar el atributo de descarga del elemento según el parámetro de consulta:
2. Solución del lado del servidor
Si deseas agregar una condición en el lado del servidor para servir la imagen PNG, puedes modificar el código del tema o plugin de WordPress para verificar las condiciones de solicitud y página y servir la imagen PNG en lugar de la imagen WebP. Por ejemplo, puedes agregar un filtro a la función
webp_express_should_convert
en el plugin WebP Express para excluir ciertas páginas o imágenes de ser convertidas a WebP.Aquí tienes un ejemplo de cómo puedes modificar el código del plugin WebP Express para excluir una página con el ID “123” de la conversión a WebP:
Alternativamente, puedes escribir un plugin o función personalizada de WordPress que intercepte la solicitud de la imagen y sirva la imagen PNG si se cumplen las condiciones de solicitud y página.
Nota sobre la compatibilidad con Firefox
Ten en cuenta que Firefox puede no admitir el atributo
download
en el elemento o el atributoresponseType
en el objetoXMLHttpRequest
, lo cual puede afectar el comportamiento de descarga de las imágenes PNG y WebP. Por lo tanto, es posible que necesites utilizar un enfoque o una alternativa diferente para los usuarios de Firefox.