Definir cuál sea el mejor formato para imágenes web es bastante improbable. Porque cada formato de compresión tiene sus ventajas e inconvenientes.
Sin dudas pero creo que el formato WebP sea el más útil para el SEO On Page.
En las dos primeras entradas sobre la optimización de las imágenes para conseguir la mejor velocidad de carga de una web, expliqué las características más generales a las que hay que prestar atención, y la inutilidad de establecer una resolución, ya que no es relevante para la visualización en pantalla.
Y luego mencioné que uno de los factores más importantes en la optimización de las imágenes para la web es la elección de la correcta compresión de imágenes.
Por ejemplo, en Photoshop, cuando se ejecuta “Guardar para Web”, se puede elegir uno de los varios formatos de compresión de imagenes que el software nos ofrece.
Mejor formato para imágenes web: tener claro el objetivo
Te acuerdas que te había dejado con la fatídica pregunta de cuál es el mejor formato para guardar imagenes según lo que necesites:
¿Cuál es el objetivo, es decir, qué debe representar la imagen que quieres publicar?
De hecho, si hay varios tipos de archivos cuyas compresiones son Lossy (con pérdidas) o Lossless (sin pérdidas), cada uno tiene sus ventajas… pero también sus aspectos negativos.
¿Y cuál es la tarea de un buen webmaster que piensa en el SEO?
Si has leído el primer episodio de la miniserie, sabrás que una de las tareas de un buen webmaster es prestar atención a las diferencias de cada formato de imagen, para sacar el máximo provecho en términos de peso/solución/propósito.
Por eso hay que tener claras las ventajas y los inconvenientes de cada formato.
En primer lugar, hay que entender cuál es el formato de imagen con mejor calidad para cada caso concreto. Y luego entender cuál será el más apropiado para tus necesidades.
Estos son los tipos de formatos de imágenes más comunes:
Formato JPG
Según las estadísticas de W3Techs, actualmente (mayo de 2022) el 74,5% de los sitios web de todo el mundo publican imágenes en formato JPG de 8 bits por canal. En cualquier caso, te aconsejo que sigas el enlace para ver las estadísticas actualizadas sobre los tipos de formatos de imágenes publicados en todas las webs, que son muy interesantes.
JPG es la extensión más común del estándar JPEG (Joint Photographic Experts Group).
Sin entrar en demasiados detalles, al elegir este formato tienes la posibilidad de guardar imágenes en tono continuo, tanto en niveles de gris como en color, con diferentes niveles de compresión desde el 1%, la máxima compresión de la que también se deriva la mayor pérdida de datos, hasta el 100% sin pérdida de datos.
Así que puede buscar el equilibrio adecuado, o el compromiso, entre el peso en KB y la calidad del resultado gráfico.
En general, los archivos JPG, guardados con un nivel de compresión medio, tienen la ventaja de contener (o comprimir justamente) las informaciones y por tanto el peso, reproduciendo una imagen con escalas de color de 8 bits por canal, con hasta 16,7 millones de colores disponibles.
Esto significa que los matices de la luz y los colores reales pueden reproducirse con bastante fidelidad, por lo que el JPG es una compresión de imágenes tan popular para las fotografías que se publican en la web (pero en general para todas las fotografías). De hecho, la mayoría de los dispositivos digitales (cámaras profesionales o de aficionado, action cams, smartphones, etc.) ofrecen la posibilidad de crear directamente ficheros de imágenes en formato JPG.
Sin embargo, tenga cuidado porque cuando estos dispositivos digitales producen imágenes con la extensión .jpg, generan archivos con niveles de compresión mínimos. Por lo tanto, son de un tamaño enorme, y por esta razón no son adecuados para la web, ya que son demasiado pesados.
Por eso te aconsejo que optimices siempre estas imágenes, para reducir el tamaño y aumentar la compresión hasta conseguir el mejor compromiso, es decir, el archivo más ligero posible.
Y las imágenes en formato JPG se pueden comprimir mucho, con muy buenos resultados.
Todo esto suena bien, ¿verdad?
Entonces, ¿se puede decir que el JPG sea el mejor formato para imágenes web?
Yo digo que no, o al menos… no del todo, porque los archivos JPG también tienen una gran limitación.
Al tratarse de imágenes de tono continuo, el formato JPG no admite la transparencia, y en lugar de un píxel transparente, conservará un fondo blanco.
Por lo tanto, los archivos JPG son perfectos para fotos «completas» o con fondo blanco o de color, pero no son adecuados si quieres publicar imágenes con fondo transparente.
Si necesitas publicar imágenes con fondo transparente, la mayoría de los webmasters utilizan el formato PNG.
Formato PNG
El formato de imagen PNG (Portable Network Graphics) produce archivos gráficos raster y que admiten la compresión de imágenes sin pérdidas (lossless).
A diferencia de los archivos JPG, el formato PNG admite la transparencia, lo que ofrece algunas ventajas considerables para la publicación de imágenes en la web.
Según las estadísticas del W3Techs, en el momento de escribir este artículo el 80% de las webs publican imágenes en formato PNG.
Las principales ventajas del formato PNG son la posibilidad de modular la profundidad hasta 8 bits por canal, con un total de 24 bits como el total de los 3 canales cromáticos (RGB), por lo tanto, siempre hasta 16,7 millones de colores como en los archivos JPG, pero añadiendo un cuarto canal alfa dedicado a la transparencia, de nuevo con 8 bits de profundidad, lo que permite un ajuste realmente fenomenal de los tonos y la transparencia.
Además, el formato PNG no tiene pérdida de datos durante la compresión, lo que lo hace especialmente útil para imágenes que deben mantener líneas rectas y bien definidas, es decir, donde los contrastes deben estar bien definidos, que son los puntos débiles de la compresión «lossy» del formato JPG.
Por ejemplo, el PNG es el estándar básico que utilizan los dispositivos al hacer capturas de pantalla, para mantener las líneas bien definidas de las ventanas, el texto y los elementos típicos que se muestran en una pantalla.
Pero el formato PNG se utiliza también y sobre todo para elementos gráficos como logotipos o iconos, que casi siempre tienen líneas que no coinciden con los bordes de la imagen y, por tanto, necesitan un fondo transparente.
O cuando es necesario convertir gráficos vectoriales en gráficos rasterizados, de nuevo gracias a la capacidad de mantener los contrastes bien definidos.
Perfecto, entonces con PNG hemos encontrado el mejor formato para imágenes web, ¿verdad?
Lo siento, pero no. Por qué el PNG también tiene sus desventajas: en primer lugar, es una compresión de imágenes mucho más pesada que la que se consigue con los archivos JPG.
Por eso es bueno diferenciar y elegir el más adecuado entre los diferentes tipos de formatos de imágenes.
A menudo he encontrado sitios web con fotos en formato PNG sin necesidad de esto, ya que no eran transparentes. En ese caso, estas web publicaban fotografías demasiado pesadas. Podrían haberlas optimizado convirtiéndolas a JPG, lo que habría ahorrado mucho peso, y esto siempre redunda en una mayor velocidad de carga de la web.
Pero eso no es todo.
¿Conoces esas imágenes animadas típicas de los banners o memes?
Aquí es donde entran los archivos GIF.
Formato GIF
Además, hay archivos en formato GIF (Graphics Interchange Format), que es un formato de compresión de imágenes más antiguo que JPG y PNG.
El formato GIF admite un máximo de 256 colores, sin transparencia, por lo que los archivos generados en GIF tienen una limitación de color muy grande.
Pero el punto fuerte de este formato es precisamente la posibilidad de crear imágenes animadas, que es sinceramente la única razón por la que se sigue utilizando.
Pero las imágenes animadas en formato GIF tienen un peso considerable, por lo que mi consejo es emplear este tipo de imágenes solamente en casos muy especiales, para imágenes pequeñas o muy pequeñas en las que la animación sea absolutamente necesaria.
También porque de nada sirve, por ejemplo, insertar un banner animado en una página pensando que atraerá la atención del usuario, si luego por culpa de ese banner que hace que la página pese como un peñasco, la página tarda una eternidad en cargar y el usuario, creyendo que el sistema está bloqueado, hace clic en la flecha de «atrás» y abandona la web.
Además, hoy en día debería estar claro para todos que la velocidad de carga es un factor de ranking muy importante y, por lo tanto, el sitio web podría ser penalizado por los motores de búsqueda debido a la latencia en la carga, por lo que la culpa será de ese banner en formato GIF.
En mi opinión, es mejor intentar no utilizar nunca imágenes GIF animadas en un sitio web, ya que casi siempre es posible crear pequeñas animaciones utilizando el CSS, especialmente en el caso de los botones y las call to actions.
De hecho, este formato está cayendo cada vez más en desuso.
Sin embargo, en mayo de 2022, el 20,5% de los sitios web todavía publica imágenes en formato GIF.
¡Para mí, la mayoría de los Webmasters de ese 20,7% están LOCOS!
Sin duda, el GIF no es el mejor formato para imágenes web.
SVG
Otro formato muy útil, pero que inicialmente pasó desapercibido para las aplicaciones web, es el formato SVG (Scalable Vector Graphics).
Sin embargo, debo señalar que no se trata realmente de un formato de compresión de imágenes, ya que en realidad es un Markup Language.
Y tras las «dudas» iniciales al respecto, el SVG se ha convertido en el formato recomendado por el W3C (World Wide Web Consortium).
Al menos para ciertos tipos de objetos gráficos:
- formas geométricas definidas, es decir, líneas formadas por segmentos de líneas rectas y curvas, es decir, áreas delimitadas por líneas cerradas;
- gráficos rasterizados e imágenes digitales;
- textos de gran formato.
El SVG permite crear imágenes vectoriales, no solo rasterizadas, de modo que pueden cambiar de tamaño a voluntad sin perder la resolución gráfica.
De hecho, las imágenes vectoriales se definen matemáticamente (en términos de vectores), en lugar de tratarse mediante los distintos puntos, es decir, los píxeles.
Por ello, este tipo de imágenes son especialmente útiles para dispositivos como los ordenadores, ya que es posible redimensionar cualquier elemento gráfico a voluntad, manteniendo su calidad y nitidez, simplemente resolviendo un cálculo matemático, cuyo resultado puede ser dinámico en función del redimensionamiento constante del espacio que debe cubrir la imagen.
Por ejemplo, al cambiar el tamaño de la ventana del navegador, las imágenes SVG se reducen o amplían manteniendo las proporciones exactas y sin pérdida de calidad.
De hecho, una imagen vectorial puede ampliarse indefinidamente sin pérdida de calidad, sin que aparezcan granos o pixelados.
Además, el SVG es un código derivado del XML, por lo que el peso del archivo es proporcional únicamente a la complejidad de la fórmula necesaria para generar el vector, es decir, las líneas de código.
En pocas palabras, el peso del archivo generado en SVG ya no depende del tamaño de la imagen y de la compresión utilizada, sino exclusivamente de la complejidad de los componentes gráficos y de la programación de los códigos que generarán esas formas.
See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.
Become a Traveler Today | Autor: J. Aguinaga
¿Ves lo genial que es esta demo? Es probablemente la animación SVG más popular en CodePen, y joder… cómo me flipa. Por supuesto, se necesita algo más que un par de líneas de código para programarlo, pero el resultado es increíble. Y hay herramientas que vienen en nuestra ayuda. De hecho, Aguinaga procesó los gráficos con Illustrator y luego los exportó con el plugin SVG Export. Por último, el autor ha optado por asignar estilos a través del preprocesador Sass (nótese el SCSS).
Ahora es tu turno… intenta seleccionar el texto «TRAVELER» que está en el centro de la imagen.
Ten cuidado, porque desde el punto de vista del SEO, las imágenes SVG pueden tener una clara ventaja sobre otros formatos: con el estándar HTML5, SVG ha pasado a formar parte del lenguaje HTML.
Al insertar un SVG en tu página, un usuario podrá seleccionar el código HTML y, sobre todo, el código será legible por los motores de búsqueda.
¿Has visto que realmente puedes seleccionar ese texto?
Google puede leerlo. Poderoso, ¿verdad?
Por último, el SVG también puede ser animado, e incluso puede convertirse en interactivo insertando en el código eventos como «onmouseover», «onclick» y también añadir código JavaScript.
See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.
El autor de esta formidable obra interactiva nos muestra de forma eficaz cómo se pueden crear controles deslizantes utilizando tanto Sass como JavaScript. El objetivo es hacer que el usuario participe con nuestra aplicación.
¡Prueba a mover los controles deslizantes!
Por todas estas razones, el W3C confía cada vez más en que el SVG se generalice, y he observado que los webmasters también lo utilizan cada vez más. En febrero de 2022, lo empleaba el 47% de los sitios web y ahora, casi al final de mayo, está presente en el 50,1% de los sitios web.
Sin embargo, el SVG también tiene sus limitaciones.
Por ejemplo, no es en absoluto adecuado para la creación de fotografías.
Pero sin duda es muy útil para crear logotipos, iconos, infografías y textos, ya sean estáticos, animados o interactivos.
Además, los archivos SVG tienen otra gran desventaja, razón por la cual, por ejemplo, el formato SVG aún no se ha integrado en el núcleo nativo de WordPress. Los archivos SVG se basan en el lenguaje XML, lo que los hace vulnerables a los ataques de entidades externas, entre otros riesgos.
Por lo tanto, tienen un cierto factor de riesgo para los ataques de fuerza bruta.
Por esta razón, si quieres aprovechar las fabulosas ventajas de los SVG, te recomiendo que generes reglas que restrinjan el acceso a las cargas de SVG solamente a los administradores de tu web, o al menos solo a los usuarios de confianza.
Una operación aún más segura es «sanear» los archivos SVG antes de subirlos. Esto elimina cualquier línea innecesaria de código XML que pueda hacer que tu sitio sea vulnerable a los ataques.
Algunos plugins para WordPress incluyen la desinfección automática, pero hay que tener cuidado porque no todos son capaces de hacerlo.
Seguramente trataré este tema en otro post, ya que considero que los SVG son muy útiles para el SEO.
Formato WebP
El WebP es un formato de compresión de imágenes moderno, aunque no exactamente nuevo, que en mi opinión es indispensable para nuestra querida velocidad de carga.
Y, efectivamente, mi web ofrece a los usuarios la posibilidad de inicializar imágenes WebP.
Retomando y traduciendo palabra por palabra lo que Google sugiere en su plataforma para desarrolladores, WebP es simplemente
Un formato de imagen para la web. | Google
Así es, amigo mío.
Es el propio Google el que ha desarrollado este formato que proporciona una compresión superior, tanto Lossy como Lossless, para las imágenes aptas para la web.
Con WebP, los administradores de páginas web pueden crear imágenes más pequeñas y ricas que hacen que la web sea más rápida.
¡OJO! Esta es una directriz explícita de Google.
Sin embargo, incomprensiblemente, el formato WebP es utilizado actualmente solo por el 4,2% de los sitios web, siempre según el análisis realizado por el W3Techs en mayo de 2022 (de nuevo, te invito a comprobar las estadísticas actualizadas).
Entonces, ¿por qué tan pocas webs han implementado este formato de compresión de imágenes?
Amigo mío, si aún no lo has hecho, muévete porque es el momento de modernizar tus imágenes.
Porque, como promedio, las imágenes WebP son un 26% más ligeras que los archivos PNG, y un 25-34% más ligeras que las imágenes JPG, manteniendo una resolución equivalente.
Además, la compresión WebP sin pérdidas también admite el canal alfa de transparencia.
¿Qué opinas, te parece muy interesante este WebP?
Pero tal vez los webmasters que comiencen desganados al leer el comunicado de Google piensen inmediatamente:
¡OSTRAS! Pero ahora convertir en WebP todas las imágenes de mi web, que actualmente están en JPG y PNG… ¡Me va a llevar siglos!
Oye, webmaster preocupado por el SEO, ¡tengo buenas noticias para ti!
Existen plugins para WordPress, addons para Prestashop y, ahora, toda una serie de aplicaciones que, partiendo de las imágenes originales JPG y PNG del servidor, pueden convertirlas en WebP, incluso directamente desde tu CMS, de forma automática y sin tener que perder mucho tiempo.
El único inconveniente puede ser la supuesta incompatibilidad con algunos navegadores.
Por el momento, los archivos WebP solo son compatibles de manera nativa con los navegadores Google Chrome, Firefox, Edge y Opera. Otros navegadores requieren que los usuarios descarguen e instalen extensiones en su navegador.
Pero incluso este inconveniente es superable, ya que los mismos plugins, o addons o apps que pueden automatizar el proceso de compresión directamente en tu CMS, se encargarán de mostrar el archivo WebP solo si lo soporta el navegador del usuario, de lo contrario ofrecerán el archivo original en JPG o PNG, que se guarda como repuesto.
Me gusta pensar en el WebP como el actor principal de una película, mientras que los archivos PNG y JPG pueden ser sustitutos que intervienen si el actor principal no se encuentra.
Por lo tanto, no hay ningún inconveniente en utilizar el formato WebP.
Solamente existe la posibilidad de hacer la web más rápida.
En este caso sí que puede ser legítimo preguntar…
¿Cuál es el mejor formato de compresión de imágenes para la web?
El mejor formato de compresión de imágenes actualmente podría ser, sin duda, el formato WebP.
Al fin y al cabo, este formato de compresión de imágenes combina las ventajas de los estándares JPG y PNG, solo que acelera el proceso de carga.
¿A qué esperas para pasarte al formato WebP?
Conclusión
Por tanto, no existe el mejor formato para imágenes web en términos absolutos.
En realidad, se trata de sopesar las ventajas e inconvenientes decada uno de los tipos de formatos de imágenes en función del uso que se vaya a hacer de una determinada imagen.
Sin embargo, desaconsejo totalmente el empleo de imágenes GIF, que pesan mucho y son poco útiles.
En el caso de logotipos, infografías y otras imágenes «artificiales» compuestas principalmente por líneas y curvas, la mejor solución será casi con toda seguridad el SVG, tomando las precauciones de seguridad necesarias.
Para las fotografías, el formato JPG. Y para las imágenes que requieren transparencia, el PNG.
Pero el mejor consejo que puedo darte es que implementes el formato WebP en tu web (si aún no lo has hecho), ya que puede sustituir automáticamente las imágenes JPG y PNG por imágenes especialmente concebidas para la web.
Si tienes alguna duda o necesitas consejos sobre este tema, escríbeme en los comentarios.
Y avísame si te interesa saber más sobre cada uno de los diferentes tipos de formatos de imágenes y sus aplicaciones, pues esto podría ser objeto de nuevos post mucho más técnicos.
Antes de cerrar, quiero dejarte con una joya que será el tema del próximo artículo.
Porque ahora que has visto los formatos de compresión y los aspectos fundamentales de la optimización de imágenes, debes saber que existe una función que te permitirá acelerar aún más la carga de la página en relación con las imágenes (pero también con otros contenidos), posponiendo temporalmente su inicialización.
La joya de hoy: ¡El LAZY LOAD!
El Lazy Load es un proceso de programación web que pretende acelerar la carga de las páginas.
Por lo tanto, es absolutamente esencial para el SEO.
El Lazy Load se basa en un principio: posponer la inicialización de los objetos pesados, como las imágenes y los vídeos, hasta el momento en que se van a mostrar, reduciendo así al mínimo el tiempo necesario para mostrar la primera parte de cada página.
En otras palabras, este proceso permite que el navegador cargue el contenido de la parte superior de las páginas, mientras retrasa la descarga y el renderizado de lo que está por debajo, es decir, lo que se encuentra después del desplazamiento de la página.
De esta manera, el usuario tendrá acceso mucho más rápido a los contenidos principales, los que se pueden ver al entrar en una página.
Por ello, el Lazy Load es una opción que, en cierto modo, puede formar parte del proceso de optimización de imágenes en el lado del servidor.
En el próximo post explicaré en detalle los beneficios de Lazy Load y los métodos para implementarlo.
Así que no dudes en suscribirte a mi newsletter para no perderte los nuevos posts.
Te doy las gracias y como siempre te saludo con un bonito …
¡Hasta la optimización! Siempre.