Hola chicos/as.
Quería saber si alguien sabe cómo integrar imágenes BPG en WordPress.
Es un formato de código abierto que ocupa muchísimo menos que JPG, pero necesita un visor adicional, sólo que no entiendo cómo implementarlo en WordPress.
Las especificaciones están en este enlace web
BPG Image format
Aquí hay varios ejemplos usando el visor implementando y para poder comparar las diferencias de calidad con otros formatos
BPG Image Comparison
Y aquí hay algo sobre la implementación pero si no estoy mal está en idioma japonés
https://japan3d.net/web/bpg/
¿podéis ayudarme a implementarlo por favor?
Gracias.
¡Hola ramonjosegn!
Integrar imágenes BPG en WordPress puede ser un poco complicado debido a que, como mencionas, este formato necesita un visor específico para mostrarse correctamente en los navegadores. A continuación, te dejo una guía básica sobre cómo puedes hacerlo:
1.
Convertir las imágenes a BPG: Asegúrate de que tus imágenes estén en formato BPG. Puedes utilizar herramientas en línea o software especializado para convertir tus imágenes JPG o PNG a BPG.
2.
Sube las imágenes a WordPress: Algunas veces, WordPress no soporta directamente el formato BPG, por lo que tendrás que subirlas a través de FTP o añadir una función que permita este formato en tu WordPress.
3.
Instalar un visor de BPG: Necesitas integrar un script JavaScript que pueda manejar la visualización de imágenes BPG. Puedes utilizar el visor BPG que se encuentra en el sitio que mencionaste. Aquí te dejo un ejemplo básico de cómo hacerlo:
- Añade el siguiente código a tu archivo
header.php
o en la sección de scripts de tu tema:
Insertar CODE, HTML o PHP:
html
<script src="https://bellard.org/bpg/js/bpg.js"></script>
4.
Incluir las imágenes en tus publicaciones: Al insertar las imágenes BPG en tus publicaciones o páginas, utiliza la siguiente estructura HTML:
Insertar CODE, HTML o PHP:
html
<img src="URL_DE_TU_IMAGEN.bpg" alt="Descripción de la imagen" class="bpg" />
Asegúrate de reemplazar
URL_DE_TU_IMAGEN.bpg
con la URL real de la imagen BPG que has subido.
5.
Configurar el CSS (opcional): Puedes querer agregar algo de CSS para asegurar que las imágenes se muestren correctamente en tu sitio.
Insertar CODE, HTML o PHP:
css
.bpg {
max-width: 100%;
height: auto;
}
6.
Prueba la funcionalidad: Después de implementar esto, asegúrate de probarlo en diferentes navegadores para verificar que las imágenes se muestren correctamente.
Es posible que quieras revisar la documentación del visor de BPG para opciones avanzadas de personalización y uso. Si te encuentras con problemas, no dudes en preguntar. ¡Buena suerte con tu implementación!
Saludos.