{"id":60566,"date":"2024-12-13T07:00:00","date_gmt":"2024-12-13T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=60566"},"modified":"2025-01-16T12:49:28","modified_gmt":"2025-01-16T20:49:28","slug":"formatos-modernos-imagen","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/formatos-modernos-imagen\/","title":{"rendered":"\u00bfNecesitas Velocidad? Conoce WebP, AVIF y Los Formatos de Imagen Modernos"},"content":{"rendered":"\n

Todav\u00eda hay verdad en el dicho centenario: “Una imagen vale m\u00e1s que mil palabras”.<\/p>\n\n\n\n

De hecho, en una \u00e9poca en la que un sitio web puede ser el \u00fanico punto de conexi\u00f3n que los emprendedores tienen con su audiencia objetivo, los gr\u00e1ficos pueden ser m\u00e1s cruciales que nunca para contar tu historia.<\/p>\n\n\n\n

Lo que nos lleva a la pregunta: \u00bfQu\u00e9 dicen tus im\u00e1genes sobre ti?<\/p>\n\n\n\n

\u00bfSe cargan r\u00e1pido y de forma clara, creando una impresi\u00f3n moderna y llevando a los compradores m\u00e1s profundamente en tu embudo de conversi\u00f3n?<\/p>\n\n\n\n

\u00a0\u00bfO tus im\u00e1genes est\u00e1n un poco borrosas o son lentas, lo que hace que los visitantes se pregunten sobre la confiabilidad de tu marca y si deber\u00edan hacer clic en un competidor en su lugar?<\/p>\n\n\n\n

El rendimiento, \u00e9xito y experiencia del usuario de un sitio web de peque\u00f1a empresa dependen en gran medida de los formatos de imagen modernos. Y actualizar los tuyos puede ser m\u00e1s f\u00e1cil de lo que piensas.<\/p>\n\n\n\n

En esta gu\u00eda, exploraremos cu\u00e1les son esos formatos modernos, c\u00f3mo elegir el que es mejor para ti, un plugin de WordPress para hacerlo posible con solo unos pocos clics y, finalmente, una estrategia para monitorear el rendimiento del sitio y asegurarte de que sigas alineado con las tendencias contempor\u00e1neas de los consumidores.<\/p>\n\n\n\n

Entendiendo las Im\u00e1genes WebP y AVIF<\/h2>\n\n\n\n

El formato WebP apareci\u00f3 en 2010 para mejorar el formato de imagen JPEG ofreciendo una calidad superior y mayor compresi\u00f3n, sin aumentar el tama\u00f1o del archivo.<\/p>\n\n\n\n

Soporta compresi\u00f3n con p\u00e9rdida (reducci\u00f3n significativa del tama\u00f1o con m\u00ednima p\u00e9rdida de calidad) y compresi\u00f3n sin p\u00e9rdida (sin p\u00e9rdida de calidad), lo que permite archivos m\u00e1s peque\u00f1os sin sacrificar claridad visual. WebP tambi\u00e9n maneja caracter\u00edsticas como la transparencia (como los PNG) y animaciones (como los GIFs).<\/p>\n\n\n\n

Gracias a su eficiencia, versatilidad y compatibilidad con todos los navegadores modernos, WebP se ha convertido en un formato de referencia<\/a>.<\/p>\n\n\n\n

El AVIF (Formato de Imagen AV1) fue lanzado en 2019 para ofrecer mejor calidad de imagen y compresi\u00f3n que WebP. Ofrece visuales de mayor calidad con tama\u00f1os de archivo m\u00ednimos, gracias a una compresi\u00f3n avanzada de im\u00e1genes y la capacidad de producir colores m\u00e1s ricos.<\/p>\n\n\n\n

Aunque los archivos AVIF a\u00fan no est\u00e1n tan adoptados como WebP debido a que es un formato m\u00e1s joven, su popularidad est\u00e1 creciendo a medida que m\u00e1s plataformas comienzan a aceptarlo.<\/p>\n\n\n\n

Para resumir<\/strong>, los formatos JPEG y PNG son formatos m\u00e1s antiguos que resultan en tama\u00f1os de archivo m\u00e1s grandes y, por lo tanto, tiempos de carga m\u00e1s lentos. Los formatos WebP y AVIF son m\u00e1s nuevos y altamente compresibles, lo que los hace m\u00e1s peque\u00f1os y r\u00e1pidos de cargar, usualmente sin perder mucha calidad, si es que alguna.<\/p>\n\n\n\n

Una cosa m\u00e1s que deber\u00edas saber<\/strong>: “Modern Image Formats<\/a>” tambi\u00e9n es el nombre de un plugin dise\u00f1ado para sitios de WordPress.org que habilita el soporte para AVIF y WebP en las cargas de medios.<\/p>\n\n\n\n

En breve, te explicaremos c\u00f3mo instalarlo en tu propio sitio web para aprovechar los beneficios de estos formatos modernos.<\/p>\n\n\n\n

Por qu\u00e9 los Formatos Modernos Son Importantes (Pista: \u00a1Velocidad!)<\/h2>\n\n\n\n

Las im\u00e1genes contribuyen significativamente al peso de una p\u00e1gina web<\/a>, con las im\u00e1genes de escritorio que promedian m\u00e1s de 1,000 KB de un total de 2,315 KB. \u00a1Eso es casi el 50%!<\/p>\n\n\n\n

En dispositivos m\u00f3viles, las im\u00e1genes representan casi 900 KB de un total de 2,020 KB.<\/p>\n\n\n\n

\"Gr\u00e1fico<\/figure>\n\n\n\n

Dado que las im\u00e1genes constituyen la mayor\u00eda del peso de una p\u00e1gina web, su formato se vuelve crucial. Esto se debe a que los diferentes formatos pueden influir dr\u00e1sticamente en el tama\u00f1o, el peso y, en \u00faltima instancia, el tiempo de carga de las im\u00e1genes.<\/p>\n\n\n\n

Y quieres que tus im\u00e1genes se carguen lo m\u00e1s r\u00e1pido posible, ya que el impacto es doble.<\/strong><\/p>\n\n\n\n

Primero, es crucial para la optimizaci\u00f3n en motores de b\u00fasqueda (SEO)<\/a>.<\/p>\n\n\n\n

Google utiliza algo llamado M\u00e9tricas Web Principales<\/a>, un conjunto de m\u00e9tricas que mide para cada sitio web, para evaluar qu\u00e9 tan amigable es tu sitio con los usuarios en funci\u00f3n de la estabilidad, la capacidad de respuesta y, lo adivinaste, \u00a1la velocidad!<\/p>\n\n\n\n

Usar\u00e1 tus M\u00e9tricas Web Principales, junto con otros factores, para determinar en qu\u00e9 lugar aparece tu sitio web frente a los competidores en las p\u00e1ginas de resultados del motor de b\u00fasqueda. (\u00a1Mantente atento, m\u00e1s adelante profundizaremos en las M\u00e9tricas Web Principales!)<\/p>\n\n\n\n

Adem\u00e1s, la velocidad de carga y la precisi\u00f3n son elementos clave de la experiencia del cliente y, como tal, afectan enormemente tu capacidad de conversi\u00f3n. Esto se demuestra por el hecho de que las conversiones disminuyen a medida que los sitios se vuelven m\u00e1s lentos<\/a>.<\/p>\n\n\n\n

\"Gr\u00e1fico<\/figure>\n\n\n\n

Elegir Entre AVIF o WebP<\/h2>\n\n\n\n

Antes de sumergirte en el uso de WebP o AVIF en tu sitio web para mejorar la velocidad, querr\u00e1s determinar qu\u00e9 formato prefieres, para qu\u00e9 im\u00e1genes.<\/p>\n\n\n\n

La verdad es que tanto AVIF como WebP son formatos de imagen excelentes para la web, por lo que la elecci\u00f3n depende realmente de tus prioridades.<\/p>\n\n\n\n

Aqu\u00ed est\u00e1 nuestro veredicto:<\/p>\n\n\n\n

AVIF Para Calidad de Imagen<\/h3>\n\n\n\n

AVIF es perfecto para im\u00e1genes n\u00edtidas y detalladas, como portafolios de fotograf\u00eda, arte digital o sitios de comercio electr\u00f3nico<\/a> que muestran productos de alta gama. Ofrece visuales impresionantes con un impacto m\u00ednimo en los tiempos de carga.<\/p>\n\n\n\n

WebP Para Versatilidad<\/h3>\n\n\n\n

WebP funciona bien para la mayor\u00eda de los sitios web, manejando fotos, ilustraciones, logotipos y animaciones<\/a> con facilidad. Est\u00e1 ampliamente soportado, lo que lo convierte en una opci\u00f3n confiable para im\u00e1genes de alta calidad que se cargan r\u00e1pidamente en la web.<\/p>\n\n\n\n

De hecho, ya escribimos una gu\u00eda detallada para ayudarte a tomar esta decisi\u00f3n, as\u00ed que si quieres m\u00e1s detalles, no te pierdas AVIF vs. WebP: C\u00f3mo elegir el formato de imagen moderno adecuado<\/a>.<\/p>\n\n\n\n

\"Comparativa<\/figure>\n\n\n\n

Sube Tus Mejores Im\u00e1genes Con El Plugin Modern Image Formats Para WordPress<\/h2>\n\n\n\n

\u00bfEl plugin que mencionamos antes, Modern Image Formats<\/a>? Puede ser la mejor manera para que los propietarios y operadores de sitios peque\u00f1os suban sus gr\u00e1ficos actualizados.<\/p>\n\n\n\n

As\u00ed que, exploremos qu\u00e9 caracter\u00edsticas tiene la herramienta, c\u00f3mo instalarla y usarla, sus beneficios y c\u00f3mo determinar si es la soluci\u00f3n adecuada para ti.<\/p>\n\n\n\n

\u00bfQu\u00e9 Es El Plugin Modern Image Formats Para WordPress?<\/h3>\n\n\n\n

WordPress introdujo el soporte para AVIF en 2024<\/a> con la versi\u00f3n 6.5, por lo que algunos sitios web a\u00fan no est\u00e1n configurados para usar este formato.<\/p>\n\n\n\n

Ah\u00ed es donde entra un plugin como Modern Image Formats (anteriormente parte del plugin Performance Lab, luego separado y conocido como WebP Uploads hasta 2024).<\/p>\n\n\n\n

El plugin Modern Image Formats<\/a> fue creado para habilitar el uso de los formatos de imagen WebP y AVIF en WordPress. Siempre que tu servidor de hosting soporte AVIF, ser\u00e1 el formato predeterminado que el plugin utilizar\u00e1; de lo contrario, se usar\u00e1 WebP. Cuando ambos son compatibles, puedes elegir tu resultado preferido en el men\u00fa de “Ajustes”.<\/p>\n\n\n\n

Nota r\u00e1pida:<\/strong> Solo puedes modernizar los formatos de los nuevos archivos subidos usando este plugin, por lo que no funcionar\u00e1 retroactivamente con los gr\u00e1ficos que ya tienes en tu sitio.<\/p>\n\n\n\n

\u00bfYa tienes elegido tu tipo de archivo moderno ideal y listo para actualizar tus gr\u00e1ficos y la velocidad de tu sitio? Perfecto, \u00a1vamos a sumergirnos en el uso del plugin Modern Image Formats!<\/p>\n\n\n\n

Recordatorio:<\/strong> Tu entorno de hosting<\/a> tambi\u00e9n debe ser capaz de soportar WebP y AVIF si deseas utilizar estos formatos de archivo. Si no est\u00e1s seguro de si lo hace, \u00a1contacta con tu proveedor!<\/p>\n\n\n\n

[SUBSCRIBER]<\/p>\n\n\n\n

C\u00f3mo Empezar A Usar Formatos De Imagen Modernos<\/h3>\n\n\n\n

Como todos los plugins, instalar\u00e1s Modern Image Formats a trav\u00e9s de tu administrador de WordPress. Solo inicia sesi\u00f3n y navega a Plugins > A\u00f1adir Nuevo Plugin<\/strong> en el men\u00fa de la izquierda.<\/p>\n\n\n\n

\"Captura<\/figure>\n\n\n\n

Busca “Modern Image Formats”, haz clic en Instalar Ahora<\/strong>, luego espera a que se instale antes de presionar el bot\u00f3n Activar<\/strong>.<\/p>\n\n\n\n

\"Captura<\/figure>\n\n\n\n

Cuando termine, ser\u00e1s redirigido a la p\u00e1gina de Plugins instalados, que est\u00e1 organizada alfab\u00e9ticamente.<\/p>\n\n\n\n

Despl\u00e1zate hacia abajo hasta encontrar Modern Image Formats<\/strong> y luego haz clic en Configuraci\u00f3n<\/strong>.<\/p>\n\n\n\n

Aqu\u00ed solo necesitas echar un vistazo y asegurarte de que te gusten todos los ajustes predeterminados relacionados con el formato de salida de imagen preferido, la salida de im\u00e1genes de respaldo y m\u00e1s.<\/p>\n\n\n\n

Cuando est\u00e9s contento con tu configuraci\u00f3n, utiliza el bot\u00f3n Guardar Cambios<\/strong>.<\/p>\n\n\n\n

\"Detalles<\/figure>\n\n\n\n

Ahora, cuando subas un gr\u00e1fico nuevo, el plugin deber\u00eda convertirlo autom\u00e1ticamente al formato predeterminado que hayas elegido.<\/p>\n\n\n\n

Probemos eso publicando un gr\u00e1fico r\u00e1pidamente. Vamos a ir a Publicaciones > Nueva Publicaci\u00f3n<\/strong> y simplemente arrastrar una imagen a la p\u00e1gina.<\/p>\n\n\n\n

\"Captura<\/figure>\n\n\n\n

Ponle un t\u00edtulo y presiona el bot\u00f3n Publicar<\/strong> en la esquina superior derecha. En la publicaci\u00f3n en vivo, pasa el cursor sobre la imagen, haz clic derecho e Inspeccionar<\/strong>. \u00a1Deber\u00edas ver que la imagen est\u00e1 en tu formato preferido!<\/p>\n\n\n\n

De forma predeterminada, cuando subes im\u00e1genes JPEG o PNG, las versiones redimensionadas se crear\u00e1n en formatos modernos como WebP o AVIF. No te preocupes, \u00a1el archivo original permanecer\u00e1 en su formato JPEG o PNG original!<\/p>\n\n\n\n

Nota r\u00e1pida<\/strong>: Solo puedes modernizar los formatos de los nuevos archivos subidos utilizando este plugin, por lo que no funcionar\u00e1 retroactivamente con los gr\u00e1ficos que ya tienes en tu sitio.<\/p>\n\n\n

\n\tRelated Article<\/span>\n\t
\n\t\t
\n\t\t\tProblemas Comunes Al Subir Im\u00e1genes En WordPress Y C\u00f3mo Solucionarlos (5 M\u00e9todos)\n\t\t<\/div>\n\t\t\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n

Beneficios del Plugin Modern Image Formats<\/h3>\n\n\n\n

Realmente, el mayor beneficio de este plugin, y su objetivo principal, es que facilita a los propietarios de sitios web de todos los niveles t\u00e9cnicos hacer algo para modernizar su sitio<\/strong>. Una vez instalado, hace que tu sitio sea compatible de inmediato con los formatos de imagen m\u00e1s eficientes de hoy en d\u00eda, asegurando cargas r\u00e1pidas, alta calidad y mejores experiencias.<\/p>\n\n\n\n

Secundariamente, otro beneficio clave de elegir este plugin es que simplifica la selecci\u00f3n de formatos<\/strong>. Lo hace seleccionando autom\u00e1ticamente el formato \u00f3ptimo, seg\u00fan las capacidades de tu servidor. AVIF se prioriza cuando est\u00e1 soportado, y WebP se usa como formato de respaldo, a menos que elijas ajustar los ajustes de otro modo. Esto hace que sea una cosa menos en la que pensar cuando se trata de la gesti\u00f3n y optimizaci\u00f3n del sitio<\/a>.<\/p>\n\n\n\n

\u00bfEs Modern Image Formats la Herramienta Adecuada Para Ti?<\/h3>\n\n\n\n

Como siempre, es dif\u00edcil para nosotros decir exactamente qu\u00e9 es lo adecuado para ti. Las herramientas que utilizas para apoyar tu peque\u00f1a empresa son muy personales para tu marca, tu sitio web, las habilidades de ti y\/o tu equipo, y el tiempo que tienes disponible para dedicar a todo lo anterior.<\/p>\n\n\n\n

Dicho esto, hemos trabajado con muchos propietarios de peque\u00f1as empresas y sitios web a lo largo de los a\u00f1os como un proveedor independiente de hosting web<\/a> (\u00a1uno de los \u00faltimos!), ayudante para la creaci\u00f3n de sitios web<\/a> y orgulloso proveedor de servicios profesionales<\/a>.<\/p>\n\n\n\n

As\u00ed que, s\u00ed, tenemos una opini\u00f3n sobre qui\u00e9n es el plugin Modern Image Formats m\u00e1s adecuado.

Recomendar\u00edamos usar esta herramienta si el \u00e9xito de tu sitio web y negocio depende de las im\u00e1genes<\/strong>. Esto puede aplicarse a fot\u00f3grafos<\/a>, proveedores de servicios digitales que necesitan mostrar muestras de trabajo de alta calidad, vendedores de comercio electr\u00f3nico, etc.<\/p>\n\n\n\n

B\u00e1sicamente, si tu sitio est\u00e1 lleno de gr\u00e1ficos, debes asegurarte no solo de que se vean bien, sino de que no afecten la velocidad de carga ni en escritorio ni en m\u00f3vil.<\/strong><\/p>\n\n\n\n

Si esto te suena, no hay problema en usar un plugin para facilitar la actualizaci\u00f3n r\u00e1pida de tus im\u00e1genes al mejor y m\u00e1s r\u00e1pido formato cuando las subas a tu sitio.<\/p>\n\n\n\n

Mide Tus Esfuerzos de Optimizaci\u00f3n de Im\u00e1genes con M\u00e9tricas Web Principales<\/h2>\n\n\n\n

Ahora que has hecho este gran ajuste, si a\u00fan no lo est\u00e1s haciendo, es hora de comenzar a monitorear tus puntajes de M\u00e9tricas Web Principales para comprender c\u00f3mo afectan el rendimiento de tu sitio web.<\/p>\n\n\n\n

Recordatorio, este es un conjunto de m\u00e9tricas: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP), que Google rastrea en los sitios web para ayudar a determinar su usabilidad y clasificarlos en los resultados de b\u00fasqueda de Google. <\/p>\n\n\n\n

\"LCP<\/figure>\n\n\n\n

Aqu\u00ed hay tres formas de determinar tus puntajes de M\u00e9tricas Web Principales para hacer un seguimiento y mejorar el rendimiento de tu sitio:<\/p>\n\n\n\n