Las imágenes a menudo pueden mejorar la calidad de su sitio web y son clave para implementar una estrategia de marketing visual . Sin embargo, cuanto más contenido multimedia tenga su sitio, mayor será el impacto en sus tiempos de carga . Si su sitio web tarda demasiado en cargarse, no importa cuán impresionante se vea, asustará a los visitantes.
La respuesta es comprimir u optimizar tus imágenes , para que se vuelvan más pequeñas sin perder calidad. En este artículo, hablaremos más sobre la compresión de imágenes, cómo puede ayudarlo y usaremos datos para mostrar exactamente la diferencia que puede hacer cuando se trata de tiempos de carga. ¡Hagámoslo!
La compresión de imágenes es una excelente manera de optimizar los tiempos de carga de su sitio.
En pocas palabras, comprimir imágenes implica reducir el tamaño del archivo para que ocupe menos espacio, y existen dos métodos: ‘lossy’ y ‘lossless’. El primero optimiza sus imágenes drásticamente mientras reduce potencialmente la calidad visual , y el segundo solo comprime sus archivos tanto como sea posible sin afectar la forma en que se ven.
Por lo general, querrá optar por la optimización sin pérdidas . Sin embargo, la diferencia con las técnicas con pérdida no es necesariamente evidente a simple vista. Veamos un ejemplo con la imagen original a la izquierda y una versión optimizada a la derecha:
Debería poder detectar algunas diferencias si se acerca lo suficiente. Sin embargo, dado que no mostramos ninguna de las imágenes a resolución completa, las diferencias son difíciles de distinguir. Dadas las limitaciones de espacio que tienen muchos sitios web, no hay razón para cargar una imagen de 5 MB de alta calidad cuando una versión comprimida de 500 KB podría ser igual de adecuada.
En cualquier caso, el principal beneficio de la optimización de imágenes es fácil de entender. Cuanto menos espacio de almacenamiento ocupen sus gráficos, más claras serán sus páginas. Esto significa que los usuarios podrán cargar su sitio web más rápido, lo que debería tener un impacto directo en su usabilidad y ‘adherencia’. Con esto en mente, averigüemos cuánto impacto tiene realmente la compresión de imágenes en el rendimiento de un sitio web promedio.
Cómo la compresión de imágenes afecta los tiempos de carga de su sitio web (en números)
No hay dos sitios web que tengan tiempos de carga idénticos, ya que todos son únicos. En resumen, el propósito de esta prueba es determinar (en promedio) cuánto impacto tiene la optimización de imágenes en los tiempos de carga. Con ese fin, configuramos un sitio web con tres páginas individuales, construidas con Divi . La primera página presenta el diseño de la cartera de la página de inicio , que configuramos para incluir diez imágenes:
Ninguna de estas imágenes está optimizada y, en total, la página pesa 1,7 MB. Tampoco tenemos complementos activos en este sitio web de prueba, para evitar cualquier elemento que pueda afectar nuestros resultados. Después de configurar todo, probamos cuánto tiempo tardó en cargarse esta página utilizando el servidor de Pingdom Tools en San José, California:
Más adelante, le mostraremos los resultados de nuestra prueba en números. Por ahora, vamos a configurar una página de prueba Divi adicional, para que tengamos más datos para respaldar nuestros resultados. Para nuestra segunda entrada, elegimos el diseño del blog de mampostería , ya que nos ofrece la oportunidad de mostrar bellamente varias imágenes destacadas (siete, en este caso):
Esta página pesaba 1,3 MB y presentaba el mismo conjunto de imágenes no optimizadas que nuestro ejemplo anterior, solo que con un diseño diferente:
Ahora, vamos a crear copias al carbón de ambas páginas y reemplazar sus imágenes con versiones optimizadas. Con ese fin, vamos a utilizar dos complementos de optimización de imágenes diferentes por separado: Comprimir imágenes JPEG y PNG y WP Smush . Ambos complementos fueron valores atípicos en nuestra comparación anterior de complementos de optimización de imágenes , por lo que deberían darnos una idea clara de qué esperar. Aquí están los resultados de ambas páginas, usando cada complemento por separado:
| Tamaño de página inicial | Tamaño de página optimizado | Tiempo de carga inicial | Comprimir resultados de imágenes JPEG y PNG | Resultados de WP Smush | |
|---|---|---|---|---|---|
| Portafolio | 1,3 MB | 1 MB (-23,07 %) | 2,84 segundos | 2,15 segundos (-24,29%) | 2,45 segundos (-13,73%) |
| Blog de albañilería | 1,7 MB | 1.3MB (-23.52%) | 1,69 segundos | 1,49 segundos (-11,83%) | 1,52 segundos (-10,05%) |
Hay mucha información para desglosar aquí, así que hablemos de lo que significan esos números.
Lo que nos dicen los resultados
Según nuestros resultados, la optimización de imágenes tiene un impacto significativo en los tiempos de carga del sitio web. Para ser más específicos, nuestras pruebas encontraron que, en promedio, puede esperar ver una mejora de al menos un 10% en los tiempos de carga si optimiza cada imagen en su sitio.
Algunos de ustedes podrían pensar que el 10% no es suficiente para justificar la molestia de comprimir cada imagen en su sitio web. Sin embargo, hay muchas formas de automatizar el proceso dentro de WordPress. Si no lo hace, esencialmente está diciendo «No» a un mejor rendimiento.
Más importante aún, la optimización de imágenes es solo uno de los muchos ajustes que debe implementar en su sitio para mejorar sus tiempos de carga. Por ejemplo , se pueden tener en cuenta el almacenamiento en caché , la compresión GZIP, el uso de un tema bien optimizado y muchos otros aspectos . Si los implementa todos, ¡su sitio web debería ser increíblemente rápido!
Finalmente, vale la pena señalar que el 10 % se encuentra en el extremo inferior de nuestros resultados de puntaje. Sus ganancias dependerán de cuántas imágenes incluyan sus páginas en promedio y qué herramientas de compresión utilice. Con toda probabilidad, sus tiempos de carga probablemente mejorarán aún más. Sin embargo, no lo sabrás hasta que lo pruebes por ti mismo.
Conclusión
Optimizar sus imágenes es una de las muchas formas en que puede reducir los tiempos de carga de su sitio web. Sin embargo, a menudo es difícil imaginar cuánto impacto puede tener en el rendimiento general. En cualquier caso, WordPress ofrece muchas herramientas que puedes usar para optimizar tus imágenes. Incluso puede automatizar el proceso si lo desea, por lo que no hay motivo para evitarlo.
Durante nuestras pruebas, descubrimos que la compresión de imágenes mejoró los tiempos de carga en un 10 % en la mayoría de los casos. Sin embargo, esto está en el extremo inferior de la escala. Durante las pruebas, vimos resultados aún mejores, hasta un aumento del rendimiento del 24,29 %. Sus propios resultados dependerán en gran medida de cuántas imágenes incluyan sus páginas en promedio y de las herramientas de optimización que utilice.
¿Tiene alguna pregunta sobre qué complemento de optimización de imágenes debe usar para WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen en miniatura del artículo de VectorKnight / shutterstock.com.