La velocidad de carga de una página web es uno de los factores que debemos trabajar si queremos que las personas que visiten nuestro sitio tengan una buena experiencia de usuario 😊. No sólo depende de un buen hosting y es un factor SEO muy importante de cara al posicionamiento de una página. Una de las cosas más básicas que influyen en la velocidad de carga de una web es el tamaño de las imágenes que tengas subidas a la misma. No te vayas porque en este post te vamos a enseñar diferentes formas de optimizar imágenes para web.
Contenido
Importancia de optimizar las imágenes en una página web
Podría parecer lógico pensar que la mayoría de los sitios web tiene las imágenes optimizadas pero la realidad es otra y la mayoría de proyectos que llegan a mis manos para realizar una auditoria SEO tiene las imágenes subidas a todo meter de píxeles en plan 2000×4000 😱, lo que influye de forma nociva en:
➡️Velocidad de Carga
El hecho de no tener las imágenes optimizadas hace que una página web tarde más de lo que debería en cargarse y como consecuencia, el usuario puede volver por donde vino o lo que es peor, saltar a la competencia. La gente no tiene todo el día para ver tu sitio y sino lo pones fácil estás potenciando que se vayan. No sólo es negativo para los usuarios que visitan nuestra web sino que también es motivo de penalización para los buscadores.
➡️Experiencia de Usuario
Obviamente si el usuario tiene que esperar, recargar mil veces la página y al final se va, la experiencia del usuario es negativa.
➡️Posicionamiento Web
Google tiene en cuenta todos estos datos y en consecuencia, si son negativos, nos restará posiciones en las SERP,s en beneficio de nuestra competencia y haciéndonos perder mucho dinero por algo que es bastante fácil de solucionar.
➡️Sobrecargar nuestro servidor
Si no optimizamos las imágenes el servidor tendrá que soportar mayor peso y en consecuencia tendremos menos espacio y velocidad afectando al rendimiento de nuestro sitio.
Cómo optimizar las imágenes en una página web
Para optimizar las imágenes en una página web debemos tener en cuenta 2 aspectos importantes a trabajar: ajustar las imágenes y optimizarlas.
➡️Ajustar las imágenes
Para ajustar las imágenes a un ancho determinado debemos conocer el tamaño del espacio donde queremos insertarla. Lo normal es que si usas WordPress según el módulo que quieras incluir se te recomienden dimensiones adecuadas.
Si no es así puedes utilizar extensiones de Chrome como LightShot para saber las medidas adecuadas de altura y ancho.
Una vez conozcamos la altura y el ancho que debe tener la imagen que queremos insertar, podremos editarla en Photoshop o cualquier otra herramienta para no cargar en la web imágenes que se van a mostrar a 500 píxeles con un tamaño de 4000.
Dentro de Photoshop iremos a Imagen > tamaño de imagen donde podremos realizar el cambio adecuado y luego exportar para web.
➡️Comprimir las imágenes
Una vez que hemos ajustado el tamaño de la imagen debemos tratar de bajar su peso lo máximo posible sin perder la calidad. Existen herramientas que nos ayudan en este proceso sin que tengamos que perder la cabeza 😁.
Herramientas para optimizar las imágenes en una página web
✔️Photoshop
Como hemos visto en el apartado anterior podemos redimensionar la imagen al tamaño que nedesitemos y guardarla para web lo que optimizará al máximo la resolución para que se vea bien pero no se pierda calidad.
✔️kraken.io
Optimizador y compresor de imagen bastante rápido que permite optimizar imágenes en bloque.
✔️TinyPNG
Utiliza técnicas de compresión con pérdida inteligente para reducir el tamaño de los archivos disminuyendo selectivamente el número de colores de la imagen por lo que se requieren menos bytes para almacenar los datos. El efecto es casi invisible, pero marca una gran diferencia en el tamaño del archivo.
✔️Compressor.io
Herramienta online para reducir drásticamente el tamaño de las imágenes y fotos mientras mantiene una alta calidad.
✔️Smush.it
Optimiza las imágenes, carga, redimensiona, comprime y mejora la velocidad de tu página. Smush es un plugin de WordPress que comprime todas las imágenes sin una caída visible de la calidad. Te permite optimizar 50 imágenes en un sólo clic y además redimensionarlas. Del mismo modo te permite localizar rápidamente las imágenes que están ralentizando tu sitio web. Una de sus características más especiales es su integración con los bloques de Gutenberg .
✔️Compressnow
Puedes seleccionar hasta 10 imágenes a la vez o soltar una imagen en el cuadro Drag & Drop. Te permite seleccionar un nivel de compresión (%), y luego habilitarla. Puedes descargar las imágenes comprimidas o todas juntas en un ZIP.
✔️Imsanity
Imsanity redimensiona automáticamente las imágenes que subes a un tamaño standard de uso típico en webs. Esto es muy útil si tienes colaboradores en el blog o personas que gestionan el WordPress que no tienen mucha idea de optimización de imágenes.
El plugin se puede configurar con un máximo de ancho, alto y calidad (por ejemplo máximo de 1024 px). Cuando un colaborador sube una imagen que sea más grande el plugin de WordPress la escala automáticamente al tamaño configurado y reemplaza la imagen más grande.
CONCLUSIÓN
Si te tomas la molestia de probar o instalar alguna de estas herramientas en tu WordPress te vas a dar cuenta que la optimización de imágenes es algo muy fácil y rápido y que vale más ir gestionando en el momento de la subida. No te quiero contar lo que significa tener que meterte con 800 imágenes de una web subidas a 5000 px y tener que optimizarlas de una tacada. Hacer las cosas bien día a día supone tener tu web ordenada y limpia.
Esperamos que estas formas de optimizar imágenes para web te ayuden y que si tienes alguna herramienta más que sueles usar y no está incluida nos la compartas 😊. Muchas gracias por haber llegado hasta aquí y si te ha gustado te agradecemos de corazón que lo compartas. ¡Nos vemos en próximos posts! 🚀🌟
