Tener imágenes atractivas, claras y de carga rápida en su sitio de WordPress es una de las formas más efectivas de atraer a un usuario/cliente. Hay una razón por la que los concesionarios de automóviles dedican tanto tiempo a asegurarse de que los nuevos modelos estén impecables y relucientes. El impacto visual de un producto a menudo puede ser la decisión decisiva entre el éxito y el fracaso. Las salas de exhibición en línea no son diferentes, además existe la complicación adicional de cómo una imagen puede afectar su velocidad de carga. Es una métrica muy utilizada y famosa, que un usuario abandonará un sitio web si tarda más de 3 segundos en cargarse. Si un sitio web tarda más de 3 segundos en cargarse, es muy probable que las imágenes que tiene en su sitio sean parte de ese motivo.

Entonces, como propietario de un sitio de WordPress, ¿qué puede hacer para asegurarse de que las imágenes que tiene en su sitio sean atractivas para los usuarios y permitan que su sitio se cargue rápidamente? Su instinto inicial podría ser reducir la imagen de un tamaño de imagen de 1800 × 1400 a un tamaño de imagen de 300 × 200. Este sería el curso de acción incorrecto a tomar, ya que si bien el tamaño de su archivo de imagen ahora podría ser mucho más pequeño, la calidad de la imagen y la experiencia del usuario se han visto afectadas como resultado. Si tiene un sitio web de ventas de salas de exposición de automóviles, por ejemplo, los clientes querrán echar un buen vistazo al automóvil y poder ver todas las características y detalles. Al hacer que la imagen sea mucho más pequeña, cualquier inspección detallada del automóvil ahora es imposible, lo que deja al cliente potencial frustrado y buscando en otra parte.

entonces cuales son tus opciones? Afortunadamente, hay docenas de diferentes opciones de archivo de imagen entre las que puede elegir, que van desde el BMP de alta calidad pero de gran tamaño, el probado JPEG, hasta el nuevo y ampliamente desconocido formato WebP. Además de elegir el formato correcto, es importante recordar que, independientemente del formato que elija, también puede reducir el tamaño del archivo de imagen empleando un proceso a través de WP-Optimize conocido como "compresión".

La velocidad del sitio es uno de los 10 factores más importantes que observan los robots de Google que rastrean su sitio web cuando clasifican su sitio en los resultados de búsqueda. Tener una velocidad de carga deficiente puede tener un impacto negativo en la clasificación de su sitio y puede hacer que su sitio pase fácilmente de la primera página a no ser indexado por Google. Google es muy estricto con la forma en que clasifica los sitios en su algoritmo de búsqueda y si descubre que el sitio ofrece una experiencia de usuario deficiente debido a los tiempos de carga lentos, es posible que ni siquiera se tome la molestia de rastrearlo y hacerlo reconocible a través de la búsqueda de Google. .

¿Qué formato de imagen elegir?

Dado que las imágenes de alta calidad son tan importantes para cualquier sitio web moderno de WordPress, debe saber qué formato usar, cómo afectan el rendimiento de su sitio y cómo aprovechar al máximo su selección de archivos.

Los dos formatos de archivo de imagen más populares para sitios web son PNG y JPEG/JPG. Según w3techs , más del 70% de todos los sitios web utilizan este tipo de archivos. Alrededor del 30% de los sitios usan SVG y el 22% usan GIF.

Aquí es donde los tipos de archivos de imagen entrarían en juego, ya que el tipo de archivo que usa para cargar sus imágenes juega un papel importante. Como hay tantos tipos de archivos diferentes, a continuación repasaremos los más populares y sus ventajas y desventajas:

Antes de pasar al tipo de archivo, debemos comprender algunos conceptos, como ¿qué son una imagen ráster y un mapa de bits? ¿Qué es la compresión? ¿Cuál es la diferencia entre una compresión con pérdida y sin pérdida?

Compresión: con pérdida frente a sin pérdida

Ambos tipos de compresión tienen como objetivo reducir el tamaño del archivo, pero lo que realmente importa es lo que eliminan. En compresión con pérdida; se eliminan los datos importantes que son relevantes para la calidad de la imagen. Esto puede reflejarse en la imagen pixelada en algunos casos, ya que su computadora puede tener problemas para reconstruir la imagen.

En la compresión sin pérdidas, se reducen los datos irrelevantes que están presentes en la imagen (como los metadatos), lo que ayuda a reducir el tamaño del archivo. La calidad de la imagen no se ve afectada en absoluto en este proceso.

Raster Vs Vector

Los tipos de archivos de imagen más comúnmente utilizados suelen estar basados ​​en ráster. Esto significa que tienen un valor de color RGB fijo asociado con cada píxel y todos esos píxeles se combinan y utilizan para crear una imagen completa.

Los ejemplos de tales formatos de archivo incluyen jpg, png y gif.

Alternativamente, se crea una imagen vectorial utilizando formas y líneas que se pueden escalar infinitamente sin que se pixelen. Los vectores se crean usando fórmulas matemáticas que permiten a los usuarios cambiar los valores, sin afectar la calidad de la imagen.

Ahora que hemos repasado los conceptos básicos de las imágenes, ahora podemos ver los detalles de los diferentes tipos de archivos.

JPEG:

Este es un formato de imagen digital que contiene datos de imagen comprimidos. Con una relación de compresión de 10:1, se utilizan imágenes JPEG porque son muy compactas. El formato JPEG contiene detalles importantes de la imagen y es el formato de imagen más popular para compartir fotos y otras imágenes en Internet. El pequeño tamaño de archivo de las imágenes JPEG también puede permitir a los usuarios almacenar miles de imágenes (por ejemplo, en un sitio de arte) sin necesidad de espacio de almacenamiento adicional en su sitio.

JPEG es un tipo de archivo de compresión con pérdida que funciona bien para fotos, pero se recomienda que utilice otro formato cuando trabaje con gráficos, como PNG.

Un ejemplo de archivo de imagen JPEG. Puede ver que el detalle y la calidad se han mantenido al cargar.

PNG:

PNG es un formato de imagen de mapa de bits popular y es la abreviatura de "Formato de gráficos portátiles". Este formato se creó como una alternativa al formato de intercambio de gráficos (GIF). PNG tiene algunas características excelentes, como contener paletas de colores RGB de 24 bits, imágenes en escala de grises y mostrar fondos transparentes. También se utiliza un método de compresión de datos sin pérdidas en imágenes PNG cuando se trabaja con imágenes o gráficos de alta calidad. Las imágenes PNG también se usan con frecuencia en la edición de imágenes, ya que pueden brindar al usuario más control y opciones sobre la imagen que el formato JPEG tradicional.

PNG también utiliza un algoritmo de compresión sin pérdidas, lo que significa que este formato puede retener más datos que JPG. Al usar un archivo de imagen PNG, los usuarios también pueden guardar estas imágenes con un fondo transparente. Al usar este formato, los usuarios tienen la opción de trabajar con imágenes en capas que pueden mostrar un fondo claro (por ejemplo, solo las flores en la imagen de abajo y no la pared de fondo), lo que les permite agregar la imagen a otras imágenes sin necesidad. para recortarlo y eliminar el fondo existente, como lo haría con una imagen JPEG. Esta es una de las principales razones por las que es la opción preferida para gráficos como diagramas e ilustraciones. Se sabe que los PNG son más populares entre los usuarios que trabajan con gráficos, en lugar de cargar fotos estándar.

Una imagen PNG mantiene una alta calidad, al mismo tiempo que le permite tener más control sobre la imagen.

GIF:

Probablemente conozca mejor el término "GIF" por los innumerables clips cortos que le envían en las aplicaciones de mensajería. GIF significa "Formato de intercambio de gráficos" y se usa principalmente para admitir animaciones sin audio

A diferencia de JPEG y PNG, los GIF se usan en un caso más específico y no se usan normalmente para imágenes estáticas (aunque esto es posible). Si usa un GIF en su sitio de WordPress, lo más probable es que sea para mostrarles a los visitantes una animación o proceso simple. Los GIF tienen una gama de colores limitada y se utilizan mejor para gráficos simples. Usan compresión sin pérdidas y tienden a ser más pequeños que los JPG. Por lo general, se recomienda usar GIF con moderación en su sitio, ya que pueden aumentar los tiempos de carga (dado el tamaño del archivo) y están limitados a 256 colores.

Un ejemplo de una imagen GIF. La calidad de la imagen original se ha reducido considerablemente para producir la animación.

SVG:

Scalable Vector Graphics (SVG) es un formato de archivo vectorial apto para la web. A diferencia de los archivos de imágenes rasterizados basados ​​en píxeles como los JPEG, los archivos vectoriales almacenan imágenes a través de fórmulas matemáticas basadas en puntos y líneas en una cuadrícula. Esto significa que los archivos vectoriales como SVG se pueden redimensionar significativamente sin perder nada de su calidad, lo que los hace ideales para logotipos y gráficos complejos en línea.

Los vectores son mejores solo para gráficos, formas e ilustraciones simples. Los SVG son una buena opción para los logotipos, especialmente si necesita que su logotipo responda y sea compatible con la mayoría de los navegadores, incluidos Chrome, Firefox, Edge y Opera.

Un ejemplo de los girasoles en formato SVG que usarías para un logo.

BMP:

BITMAP ahora se considera un formato de imagen obsoleto. BMP carga las imágenes en un formato de imagen sin pérdidas que puede generar archivos de gran tamaño debido a la falta de compresión. Teniendo en cuenta la importancia de la velocidad de carga y cómo los creadores de sitios quieren mantener el tamaño de las imágenes al mínimo (sin mencionar la popularidad de los formatos SVG y JPEG), este formato ha dejado de usarse para las imágenes en línea.

La calidad original de la imagen se mantiene cuando se carga en formato BMP, pero el tamaño del archivo ralentizará mucho su sitio y no se recomienda.

WebP:

Este formato de imagen fue creado por Google en 2010 y está comenzando a ser popular entre las personas que suben muchas imágenes a su sitio, ya que tiene varias ventajas sobre JPEG y PNG, como tener un mejor rendimiento de compresión con pérdida y sin pérdida.

WebP también suele cargar en tamaños de archivo más pequeños que los formatos JPEG o PNG debido a su rendimiento de compresión mejorado y ocupará menos espacio en su sitio, lo que le permitirá cargar más rápido. Si bien no es compatible con todos los navegadores, es compatible con todos los navegadores más populares, incluidos Chrome, Firefox, Edge y Opera.

Aunque no es tan conocido como JPEG y PNG, WebP podría convertirse en el formato de imagen elegido en el futuro.

Conclusión:

Hay muchos tipos de formatos de imagen que se pueden usar en su sitio de WordPress, pero es importante evaluar el propósito de la imagen. Si su sitio es para un fotógrafo de bodas, por ejemplo, querrá mantener imágenes de alta calidad que aún se carguen rápidamente y sean fáciles de usar ( JPEG ). Sin embargo, si está vendiendo imágenes en una tienda de carteles en línea, querrá mantener la mayor cantidad posible de detalles e información de imagen ( PNG ).

Como regla general, si solo está cargando imágenes estándar para su tienda en línea, blog, cartera, redes sociales o sitio de redes sociales, se recomienda que cargue sus imágenes en un formato JPEG estándar y luego use WP-Optimize para comprimir aún más tus imágenes

Sin embargo, si desea preparar sus imágenes para el futuro y mejorar su velocidad de carga tanto como sea posible, WebP puede ofrecer una compresión superior con pérdida y sin pérdida, manteniendo altos niveles de detalles. Decidas lo que decidas, recuerda siempre comprimir tus imágenes usando WP-Optimize para la compresión líder en el mercado.