PNG vs JPG: ¿Qué prefiere Google?

Las imágenes y los tipos / formatos de imagen preferidos son un tema común y en cierta documentación, se creía que el formato PNG era el preferido por Google. Mientras que un archivo JPEG tiene compresión, un PNG no tiene pérdidas y también admite transparencia. En términos de calidad y flexibilidad, un PNG es, por lo tanto, “superior”.

Sin embargo, en lo que respecta a los SEO, un JPEG tiene un algoritmo de compresión que puede ser útil para acelerar las páginas y las imágenes que se muestran debido a los tamaños de archivo más pequeños. Sin embargo, una desventaja de la compresión del JPEG es que un JPEG sobre comprimido exhibirá pixilación junto con la “agrupación” cuando no se usen suficientes colores.

Además, un JPEG también es bastante pobre cuando se trata de texto en imágenes y, a menudo, los bordes nítidos se vuelven borrosos con píxeles extraños de color fuera del texto en la imagen. A medida que Google impulsa la idea de hacer una mejor web a través de un mejor contenido, es lógico pensar que un PNG sería el formato favorito sobre un JPEG.

¿Google tiene una preferencia entre PNG y JPG? Probamos esto para ver cuál es el verdadero negocio y si hay un formato en particular que debería elegir, para ayudarlo a clasificarse mejor.

Configuración de prueba

Se configuraron cinco páginas sin imágenes y esperamos la estabilidad en los SERP.

Se creó una imagen JPEG y a partir de esa imagen, se produjo un PNG.

A todas las páginas se les dio una imagen al mismo tiempo, con la página en la 3ª posición dado el png. Las otras páginas tenían la imagen jpg.

Resultados

Se esperaba que la página PNG se elevara a la cima. Sorprendentemente, el PNG cayó al fondo. Lo que vale la pena señalar aquí es que los SERP nunca bailaron en absoluto desde las primeras 5 páginas indexadas hasta las imágenes que se agregaron. La caída fue el único cambio en la posición de clasificación a lo largo de la prueba.

Comentarios de Clint

En este video, Clint discute esta prueba y también habla sobre WebP y Avif, que son más relevantes y útiles en la actualidad.

Prueba número 64: PNG vs JPG: ¿Hay un mejor archivo de imagen?

Hoy en día, WebP es en realidad, todo el mundo se está subiendo al carro– oh sí, deberías hacer webp, deberías hacer webp, webp es el mejor de todos. Y todos actúan como si fuera relativamente nuevo, bueno, ha existido desde 2010. Google hizo el formato de archivo de imagen webp y muchos de los navegadores no lo implementaron para que puedan leerlo. Y así, lo que terminamos con es una transición lenta de JPEG a web P. Y antes de eso, era PNG a JPEG.

La razón por la que quieres hacer eso, se trata de PageSpeed. Un webp o un JPEG podría ser un archivo bastante grande y un webp está mejor optimizado. Es como el 33%, podría optimizarse un 33% mejor que el JPEG, por lo que lleva menos tiempo cargar esa imagen.

Lo que fue esta prueba, en el momento en que se realizó la prueba, creo que fue una prueba de 2018. La idea era que alguien se les ocurriera que los PNG eran realmente preferidos por Google. Lo cual es extraño, porque los PNG generalmente se cargan más lentamente que los JPG.

A partir del resultado de la prueba, puede verlo allí mismo, en la parte inferior. Tan pronto como el PNG se puso en la página, la página de prueba cae a la parte inferior de los otros resultados. Es una indicación de un cambio significativo en PageSpeed, que causó esa caída.

Lo que quiero decir con eso es que, digamos que todas las páginas de prueba se cargaban a 1.5 segundos, pusimos el JPEG allí, y esa página fue de dos segundos, y luego pusimos el PNG allí, y fue de 3.54 segundos. Esa diferencia significativa entre todas esas páginas, significa que esta es la más lenta, por lo que no vamos a reducirla en los rankings.

Si cambias eso, y el PNG realmente se cargó, probablemente lo mismo que el JPEG, dudo que hubiéramos visto una caída significativa. Pero es el tiempo de carga lo que lo estaba matando en esta prueba.

Ahora, de nuevo, la nueva moda dentro del mundo del marketing en Internet y el mundo del SEO, por ejemplo, es webP. Ahora esto ha existido desde 2010, como dije. Hay servicios: Meshpro, WPRocket y algunas otras cosas que le permiten implementar esto, pero la razón por la que no había saltado es porque Google lo hizo pero no actualizó Chrome y las diferentes instancias de Chrome, como la última lo obtendrían, pero las más antiguas no lo harían y no podía ver que webp estaba en los navegadores.

Firefox era igual de lento, era una cosa de Google, esto es Google y estamos tratando de implementar esto en Firefox también, no nos importa google en esta cosa webp en particular hasta que mucha gente lo esté usando.

Como desarrolladores y diseñadores web y etc, atrapados en que webp era fascinante que JPEG, obtuvieron más y más y luego, finalmente, Firefox y Safari ahora están permitidos o pueden leer webp. Por lo general, como predeterminado, como webmaster, ahora, puede ir directamente a webp y estará bien. No tiene que tener un servicio para empujarlo.

Pero hay incluso uno mejor, se llama Avif. Y si no sabes qué es Avif, es básicamente, hay un formato de película para Avif y luego ahora hay una imagen construida a partir de la parte posterior de ese formato de película para mejorar las imágenes. En este caso, en realidad son un 50% más pequeños que un JPEG y realmente no se puede notar la diferencia entre la imagen que está en JPEG y las imágenes en Avif. La compresión no estropea la imagen, no la hace aún más granulada y esas cosas.

Si eres fotógrafo, probablemente hayas notado la granulosidad. Seamos honestos, si eres fotógrafo, y miras tu imagen, y la pones en el webp, probablemente te hayas dado cuenta de la granulosidad entre los dos. Pero para el usuario promedio, ni siquiera podrían notar la diferencia entre los dos y la velocidad de su página sería mucho mejor.

Todavía puede implementar estas cosas: avif, webp y jpeg hoy en día, y hay una herramienta llamada Squoosh. Es una aplicación de Google. Así que dejas caer tu imagen aquí, y luego puedes elegir el formato que quieras, y luego subirlo a tu sitio web, y puedes ahorrarte la suscripción a los complementos de optimización de imágenes o cualquier otra cosa, si lo deseas. Solo tienes que agregar este pequeño paso a tu flujo de trabajo que esos están haciendo por ti automáticamente.

Si va a cambiar a avif y ver si eso funciona para usted, y lo hace, hace que sus sitios sean mucho mejores, prácticamente ha eliminado el Squoosh. Traté de verificar Photoshop, pero estoy en una Mac y Photoshop recién actualizado y se quedaron atascados en la verificación y está tomando demasiado tiempo, y estoy un poco impaciente. Pero puede verificar en Photoshop y ver si puede guardar en avif. Si no, simplemente lo traes aquí, traes tus JPEG aquí con los que has terminado, has editado y modificado, y luego lo transfieres y los comprimes en Squoosh. Y boom, Bob es tu tío, tienes una página o imagen optimizada realmente buena que se rompe, y mucha menos tensión en tus servidores en Internet, y toda esa locura.

Así que ten esto en cuenta. Quiero decir, tienes que usar avif, es realmente bueno saber, si tienes todos los webps allí y tienes un complemento que se encarga de las cosas de la web, ¿van a ver esa diferencia entre los dos? Porque no es significativo, ¿verdad? Permítanme mostrarles los números aquí: es como el 33% frente al 30%.

Un usuario promedio, ¿realmente se va a dar cuenta de esto? Probablemente no, a menos que tenga muchas imágenes y todas puedan sumar. Pero si tiene un complemento que ya está convirtiendo todos sus JPEG a webp para usted, entonces avif probablemente, agregar ese paso probablemente no sea necesario. A menos que desee eliminar ese complemento por completo de su conjunto de herramientas. Y en algunos casos, algunos de esos complementos de optimización de imágenes se están volviendo un poco demasiado contraproducentes en comparación con otras cosas. Así que como si tuviera un Smush Pro, y tengo un cargador perezoso, y CDN y todas esas otras cosas, pero todo lo que realmente quiero es optimizar mis imágenes. No necesito toda esa otra mierda. Puedo usar WP Rocket y WP offload para configurar CDN y todas esas cosas, no necesito que agregues todas estas otras características, solo optimiza mis imágenes para mí, ¿verdad? Entonces, si ese es el caso, te vas a cansar de hacer eso, puedes cambiar a avif por completo para futuras páginas, apague los complementos de optimización, y luego simplemente haga cargas directas avif, y estará bien.

Uno de los factores si haces eso, ten en cuenta, si haces eso, digamos que esta imagen es de 1200 por 780 y ese es el requisito, pero cuando lo minimico, va a cambiar el tamaño de la imagen dentro de lo que carga y eso puede ser menos, ¿verdad? Los constructores modernos de oxígeno, por ejemplo, tendrán tamaños establecidos para estos y luego estos complementos crearán tamaños establecidos para esas diferentes vistas. Así que no está cargando un 1200 por 80, está cargando un 500 por lo que sea, correcto, y reduciendo el tiempo de carga de la página para un usuario móvil. Así que tenlo en cuenta también, que tienes que tener en cuenta eso, especialmente si estás usando un tamaño de imagen más grande, cosas de dimensión de imagen más grandes. Si vas a seguir toda esa ruta manual, yo los mezclaría a ambos, personalmente. Tal vez poner avif y usar un plugin para crear esos. Pero tienes que ver si tu plugin es compatible con avif, para lograrlo.

Con suerte, esto te ayuda. Una vez más, PNG es más lento que JPEG y JPEG es más lento que WebP, y WebP es más lento que Avif, y si realmente eres un fanático de la velocidad de la página, eso te importa. Implemente eso en su negocio tal como se aplica a usted.