Optimice sus imágenes y no pierda más tiempo

Según HTTPArchive, el tamaño promedio de un sitio web casi se ha duplicado en 5 años, de 1 MB en 2014 a 2 MB en 2019. Claro, el acceso a Internet es más rápido que nunca, pero aún así, ¿por qué los sitios web son tan grandes ahora? La respuesta se encuentra parcialmente en los activos multimedia en general y en las imágenes en particular.

Ha pasado mucho tiempo desde que los sitios web ya no son simples páginas de texto. Ahora son dinámicos, llenos de imágenes, videos, GIF... y queremos que todos estos activos se vean bien y nítidos en pantallas con resoluciones enormes.

Si tu sitio web carga muy lento y nunca optimizaste tus imágenes, te tengo una buena noticia: hoy aprenderás qué puedes hacer para acelerar tu WordPress. Veamos las herramientas que puedes utilizar para mejorar el rendimiento de tu sitio web y evitar que las imágenes entorpezcan la experiencia de tus usuarios.

Por qué es importante la optimización de imágenes

Antes de explicar los diferentes métodos disponibles para optimizar los activos de imagen y acelerar su sitio web, me gustaría dedicar un par de minutos a convencerlo de la importancia de hacerlo.

Las imágenes tienen un gran impacto en el tamaño total de una página web

Como decía al principio, el peso de las imágenes en una web representa un porcentaje importante del total. Por ejemplo, considere esta publicación de blog: DevTips: cómo evitar que WordPress adivine las URL. Esta es una publicación bastante corta, con menos de 400 palabras, que ofrece una solución rápida a un problema claro.

Según GTMetrix, cargar esta publicación utiliza 850 KB de datos. Pero, ¿por qué una publicación tan corta usa tantos datos? Bueno, las imágenes son en parte responsables de este problema: solo la imagen destacada de la publicación pesa más de 200 KB, lo que representa el 25% del total.

Tráfico móvil

Según los datos encontrados en statcounter, el 52% del tráfico web proviene de dispositivos móviles y el 45% de computadoras de escritorio. Es por eso que hoy en día se pone tanto énfasis en usar diseños receptivos que funcionen bien en pantallas pequeñas.

Como seguramente usted mismo ha experimentado, la conexión a Internet en el móvil no siempre es excelente (especialmente si está viajando o en el metro). Según Statistia, en 2019 la velocidad media ronda los 14 Mbps. Por tanto, si queremos acelerar nuestras webs en móvil, tenemos que reducir al máximo su peso, incluido el de sus imágenes.

Costos de almacenamiento y transferencia de datos

Otro motivo por el que debes preocuparte por utilizar imágenes con las dimensiones adecuadas es el dinero. Los criterios por los cuales los proveedores de alojamiento ofrecen sus planes incluyen la cantidad de espacio en disco que utiliza su sitio web y la cantidad de datos que envía desde sus servidores a sus visitantes. Cuanto más espacio en disco se utilice y más datos se envíen, más pagará.

Al reducir el tamaño de sus imágenes, reducirá ambos factores y ahorrará algo de dinero cada mes.

Acciones de optimización de imágenes

Ahora que sabe por qué debería preocuparse por optimizar sus imágenes, veamos qué puede hacer para acelerar su sitio de WordPress.

#1 Cargue imágenes correctamente escaladas

Sorprende la cantidad de gente que sube imágenes extraídas directamente de su nueva cámara DSLR. El problema es que cualquier foto tomada con una cámara DSLR probablemente sea demasiado grande y pesada para un sitio web.

Lo primero que tienes que hacer es reducir las imágenes a un tamaño razonable antes de subirlas a tu sitio web. Por ejemplo, en nuestro sitio web, las imágenes más grandes que solemos subir son las imágenes destacadas de nuestras publicaciones. Decidimos que limitaríamos esas imágenes a solo 1200x800px. En este otro post expliqué un método para escalar y comprimir imágenes rápidamente antes de subirlas.

#2 Modifique su tema para generar miniaturas apropiadas

Cuando subes una imagen a WordPress, WordPress genera varias miniaturas. Estas miniaturas están definidas por su tema, ya que es su tema el que sabe cuándo necesita una versión más grande o más pequeña de una imagen.

Por ejemplo, nuestras imágenes destacadas son 1200x800px. Estas dimensiones funcionan muy bien cuando se ve la publicación en sí:

que es claramente demasiado para algo como esto:

Es por eso que, para este caso particular, nuestro tema registra un nuevo tamaño de miniatura que es de solo 480x320px y se usa en la pantalla de la lista de publicaciones.

Si cree que su tema no genera miniaturas adecuadas, le recomiendo que lea la documentación de WordPress para saber cómo definir el tamaño de una miniatura con set_post_thumbnail_size o incluso cómo definir miniaturas adicionales con add_image_size .

Y, como siempre, si necesita ayuda con esto, hágamelo saber en la sección de comentarios a continuación y estaré encantado de ayudarlo (¿o incluso escribir una publicación al respecto?)

#3 Usa los tamaños de imagen inteligentemente

WordPress genera múltiples miniaturas de las imágenes que tiene en su biblioteca de medios para que su tema pueda usar la mejor imagen en cada escenario posible. Pero aquí viene la parte interesante: tú también puedes usar miniaturas al insertar imágenes en tus páginas y publicaciones.

Al insertar una imagen en la publicación, eche un vistazo a la barra lateral y elija el tamaño que mejor se adapte a sus necesidades:

Por ejemplo, si vas a poner una imagen estrecha y pequeña como esta, entonces una imagen pequeña (300x200px) podría ser perfecta:

pero usar esa misma miniatura para una imagen más grande genera resultados terribles:

Mejor usar una versión con más resolución:

#4 Usa el Formato de Imagen Apropiado

Existen diferentes formatos de imagen, cada uno con sus fortalezas y debilidades para comprimir imágenes. Los formatos más utilizados son:

• PNG. Excelente formato de imagen para compartir capturas de pantalla que no tienen imágenes, como, por ejemplo, una captura de pantalla del editor de WordPress.
• JPG. Uno de los formatos más extendidos en el mundo. Funciona muy bien con prácticamente cualquier tipo de fotografía, permitiendo relaciones de compresión muy altas. Sin embargo, no es perfecto: si la foto tiene bordes muy nítidos (por ejemplo, si hay texto o dibujos), tendrá que usar tasas de compresión más bajas o arriesgarse a que la imagen tenga artefactos desagradables.
• GIF. Rey de Internet (y plataformas de redes sociales). Es un tipo de formato que permite animaciones. Para ser honesto, creo que todos los "GIF" que usamos ahora son en realidad videos (cortos), que ofrecen mejores índices de compresión y mayor calidad...

#5 Eliminar imágenes no utilizadas

A medida que pasa el tiempo, es fácil mantener muchas imágenes heredadas en su sitio de WordPress que nadie usa en ninguna parte. Si quieres eliminarlos rápidamente, en este post Toni te explica cómo.

#6 Habilitar la carga diferida

Entonces, las imágenes ralentizan sus sitios web, ¿verdad? ¿Por qué no les decimos simplemente a los sitios web que no carguen imágenes a menos que sea absolutamente necesario? Eso aceleraría las cosas, ¿no? Introduzca carga diferida.

Lazy Loading es una idea bastante simple: una imagen no se cargará hasta que se suponga que sea visible en el navegador del visitante. Por ejemplo, si nuestro sitio web tiene una determinada imagen en el pie de página, ¿por qué tenemos que molestarnos en cargarla antes de que el usuario haya llegado al final de nuestro sitio web? Espere hasta que lleguen allí y, una vez que lo hagan, cargue la imagen (y si no lo hacen, ¡guarde una carga de imagen!)

Hay muchos complementos de Lazy Loading para WordPress. Algunos proveedores de hosting como SiteGround event incluyen esta opción en sus instalaciones. Simplemente busque la opción en su Tablero y habilítela.

Espero que la publicación de hoy te ayude a mejorar un poco la velocidad de carga de tu web. Hay pocas cosas que son tan fáciles de arreglar y dan tan buenos resultados. Saludos y suerte!

Imagen destacada del equipo de Icons8 en Unsplash.