[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # Cómo configurar Joomla para gestionar ficheros de imagen AVIF [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 02 Octubre 2024 [Tips Joomla](https://sergioiglesias.net/blog/joomla) 2 - 3 minutos Visitas: 5565 - - [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla) - [ Blog Joomla ](https://sergioiglesias.net/etiquetas/blog-joomla) - [ SEO Joomla ](https://sergioiglesias.net/etiquetas/seo-joomla) - [ herramienta online ](https://sergioiglesias.net/etiquetas/herramienta-online) - [ Joomla5 ](https://sergioiglesias.net/etiquetas/joomla5) ![](https://sergioiglesias.net/images/blog/tips/avif-joomla.webp) En este pequeño tutorial de hoy voy a enseñarte **cómo configurar Joomla para que puedas gestionar archivos de imagen de tipo AVIF** sin ningún tipo de problemas. Cómo configurar #Joomla para gestionar ficheros de imagen AVIF #Joomla5 [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/como-configurar-joomla-para-gestionar-ficheros-de-imagen-avif "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-configurar-joomla-para-gestionar-ficheros-de-imagen-avif&text=C%C3%B3mo%20configurar%20%23Joomla%20para%20gestionar%20ficheros%20de%20imagen%20AVIF%20%23Joomla5 "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=C%C3%B3mo%20configurar%20%23Joomla%20para%20gestionar%20ficheros%20de%20imagen%20AVIF%20%23Joomla5%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-configurar-joomla-para-gestionar-ficheros-de-imagen-avif "Envíalo") Ya te comenté hace algún tiempo [cómo configurar Joomla para gestionar ficheros SVG](https://sergioiglesias.net/blog/joomla/como-configurar-joomla-4-para-gestionar-ficheros-svg). Siguiendo la misma idea, hoy hacemos lo mismo para el formato AVIF. Pero antes... ## Qué es un archivo AVIF Puedes [leer en la Wikipedia](https://es.wikipedia.org/wiki/AVIF) la siguiente definición: > El formato de archivo de imagen AV1 (AVIF) es una especificación de formato de archivo de imagen para almacenar imágenes o secuencias de imágenes comprimidas AV1 en el formato de contenedor HEIF.1 Compite con HEIC, que usa el mismo formato de contenedor basado en ISOBMFF, pero HEVC para la compresión. La versión 1.0.0 de la especificación se finalizó en febrero de 2019. Aunque, como puedes ver, no es un formato nuevo, parece que se "está poniendo de moda" desde que Google lo haya "aceptado" en su motor a partir de su último cambio de algoritmo. Este tipo de ficheros tiene un nivel de comprensión bastante alto con respecto a otros formatos (como PNG, JPG, e incluso WebP). Un ejemplo rápido que te presento sería el siguiente. Para la imagen de portada de ester artículo, en formato PNG, pesa 136 KB: - En WebP: 28,4 KB - En AVIF: 11,0 KB Aquí puedes ver los 3 formatos de la misma imágen (PNG, WebP y AVIF): [![avif joomla](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/avif-joomla_1230.png?version=457d9bc459719ca455e0a6580321051c)](https://sergioiglesias.net/images/blog/tips/avif-joomla.png) [![avif joomla](https://sergioiglesias.net/images/blog/tips/avif-joomla.webp)](https://sergioiglesias.net/images/blog/tips/avif-joomla.webp) [![avif joomla](https://sergioiglesias.net/images/blog/tips/avif-joomla.avif)](https://sergioiglesias.net/images/blog/tips/avif-joomla.avif) Para otra imagen, que pesa bastante más en PNG, 1,75 MB, se reduce a: - WebP: 146 KB - AVIF: 27,1 KB Como puedes observar, la reducción del peso de la "misma" imagen es considerable y hará que tu página pese menos y, por tanto, cargue más rápido. La nitidez de la imagen es bastante buena y apenas se diferencia de las otras. Para pasar de PNG a AVIF he utilizado Squoosh: [Squoosh App](https://squoosh.app/) Pues bien, si intentas subir la imagen AVIF a Joomla a través del gestor multimedia, verás que te lanza el siguiente error de "Ha ocurrido un error." ![avif joomla error](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/avif-joomla-error_1230.png?version=30c974b9b93fd069b321a4f81c443644) A continuación te explico cómo soluciunar esto. ## Configurar Joomla para gestionar archivos con formato AVIF Lo primero que tienes que hacer es ir al apartado de configuración del gestor multimedia. En la misma pantalla que puedes ver en la figura de la captura anterior, verás que arriba a la derecha hay un botón que pone "Configuración". Si pinchas en él irás a la siguiente pantalla: ![avif joomla configpng](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/avif-joomla-configpng_1230.png?version=6973f81e56a4aeef6edc5497bfbf50d9) Dentro de esta pantalla tienes que buscar los siguientes campos y añadir el tipo correspondiente a cada uno de ellos: - **Extensiones permitidas**: avif (añadir al final separado del anterior por una coma) - **Extensiones de imagen permitidas**: avif (añadir al final separado del anterior por una coma) - **Tipos de MIME permitidos**: image/avif (añadir al final separado del anterior por una coma) Una vez hecho esto, guardas y cierras la configuración. A partir de ahora ya **podrás subir y utilizar imágenes AVIF en tu página web gestionada con Joomla**. --- Espero que este pequeño tutorial te pueda servir en tus proyectos Joomla Y como siempre te digo, si crees que puede ayudar a más gente... comparte ;-) Cómo configurar #Joomla para gestionar ficheros de imagen AVIF #Joomla5 [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/como-configurar-joomla-para-gestionar-ficheros-de-imagen-avif "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-configurar-joomla-para-gestionar-ficheros-de-imagen-avif&text=C%C3%B3mo%20configurar%20%23Joomla%20para%20gestionar%20ficheros%20de%20imagen%20AVIF%20%23Joomla5 "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=C%C3%B3mo%20configurar%20%23Joomla%20para%20gestionar%20ficheros%20de%20imagen%20AVIF%20%23Joomla5%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-configurar-joomla-para-gestionar-ficheros-de-imagen-avif "Envíalo") [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### Suscríbete a mi newsletter ¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo. Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### No hay comentarios ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*