Una de las principales causas de ralentización en sitios web y aplicaciones es el uso inadecuado de imágenes. Aprenda a optimizar las imágenes para la web, convertirlas en poderosas aliadas de los motores de búsqueda y contribuir a un mayor índice de permanencia.
Google Chrome sigue permitiendo que los sitios web detecten el modo anónimo
WhatsApp prepara el acceso en cuatro dispositivos al mismo tiempo
Comprender los fundamentos de la compresión, la calidad de la imagen y las ventajas de utilizar cada tipo de imagen nos permite elegir mejor. Esto puede significar imágenes de mejor calidad y velocidades de carga más rápidas.
¿Qué es optimizar una imagen?
Una imagen optimizada significa que tiene un alto rendimiento, es decir:
Alta calidad de formato de archivo;
Tamaño de archivo óptimo: utiliza el valor seguro más pequeño posible.
¿Por qué optimizar las imágenes para la web?
A partir de informes realizados en miles de sitios web, identificaron que el tiempo de carga ideal para un sitio es, como máximo, de 3 segundos. Falta de paciencia o no, lo que señala el estudio es que más de la mitad de los visitantes abandonan si el intervalo es superior a este tiempo. Además, imágenes optimizadas:
Mejorar la experiencia del usuario;
Reducir el abandono prematuro de los usuarios;
Permita que el visitante profundice y visite más páginas del sitio;
Mejore su ranking, su posición en los buscadores – más oportunidades frente a la competencia, sin costes.
Errores comunes al elegir el tipo de archivo:
Tamaño inadecuado: imágenes grandes en altura y anchura;
Formato inadecuado: cada formato tiene un uso mejor en una situación determinada;
Imágenes pesadas – demasiados KB;
Menos almacenamiento y ancho de banda: posible ahorro en alojamiento y CDN (Content Delivery Network);
Copias de seguridad más rápidas del contenido del sitio.
Cómo optimizar las imágenes para la web
Puedes optimizar la imagen original utilizando un programa de gráficos, un sitio web, una utilidad informática o un plug-in.
Uso de Photoshop
Abra la imagen en Photoshop;
Menú Archivo > Guardar para Web;
En el cuadro de diálogo, elija la opción JPEG y una de las opciones de calidad;
Puedes hacer clic en «Vista previa» para ver cómo queda la imagen y en «Guardar» para confirmar.
Uso de GIMP
Abra la imagen en GIMP;
Menú Archivo > Exportar como;
En el cuadro de diálogo, asigne un nombre al archivo y haga clic en «Exportar».
Uso de Affinity Photo
Abra la imagen en Affinity Photo;
Menú «Archivo» > «Exportar»;
En el cuadro de diálogo, elija la opción JPEG;
Reduzca la calidad de la imagen a un 80% aproximadamente;
En la parte inferior del cuadro de exportación, haz clic en «Más» y selecciona «Progresivo»;
Desmarque «Incrustar perfil ICC» e «Incrustar metadatos»;
Haga clic en «Cerrar».
Eliminar los metadatos adjuntos a la imagen hace que se elimine lo que no es necesario para la web, aligerando la imagen.
Algunas medidas sugeridas:
Banners grandes: 1200px – 1400px;
Imágenes que ocupan la mitad de la página web y sobrepasan el contenido: 600px a 800px;
Imágenes más pequeñas y miniaturas: de 250px a 450px.
Uso de TinyPNG/TinyJPG
Ambas son aplicaciones gratuitas que utilizan una ingeniosa técnica de compresión con cierta pérdida al reducir el tamaño de los archivos PNG y JPG respectivamente.
Visite el sitio web de TinyPNG/TinyJPG;
Cargue o simplemente arrastre y suelte las imágenes en la casilla correspondiente;
Una vez finalizada la compresión, descarga los archivos.
También tienen una extensión de Photoshop que combina lo mejor de TinyPNG y TinyJPG dentro de Photoshop.
Uso de JPEG Mini
Utiliza una tecnología de compresión sin pérdidas que reduce significativamente el tamaño de las imágenes sin afectar a la calidad y con comparación en tiempo real de la calidad de tu imagen original y la imagen comprimida.
Puedes utilizar gratuitamente la versión web o comprar el programa para tu ordenador. También tienen una API de pago para automatizar el proceso para su servidor.
Utilizando la utilidad ImageOptim (iOS) o Trimage (Windows)
Para los que prefieran utilizar utilidades, ambas permiten comprimir sin pérdida de calidad, buscando mejores parámetros de compresión al eliminar perfiles de color innecesarios.
Uso de plugins de optimización de imágenes para WordPress
Si tienes un sitio web con varios autores y necesitas una solución automatizada, puedes probar un plugin de compresión de imágenes para WordPress. El uso de cualquiera de ellos le ayudará a acelerar su sitio.
Optimiole – popular plugin del equipo detrás de ThemeIsle;
EWWW Image Optimizer – permite optimizar imágenes automáticamente durante la descarga, a partir de imágenes antiguas, con la ventaja de optimizar imágenes generadas por otros plugins de WordPress y almacenadas fuera de su biblioteca multimedia.
Comprimir imágenes JPG y PNG – plugin del equipo TinyPNG. Requiere la creación de una cuenta y está limitado a 100 fotos optimizadas al mes en la cuenta gratuita.
Imagify – plugin de WP Rocket. Comprime imágenes, basándose en algoritmos. Restaura automáticamente las imágenes de la galería cuando se desinstala.
ShortPixel – optimiza las imágenes en cuanto se activa el plugin y guarda las imágenes originales en una carpeta aparte. La cuenta gratuita sólo permite 100 imágenes al mes.
Smush – detecta las imágenes que son más grandes que el espacio en el que se está utilizando. El plugin resalta la imagen en el sitio para que esté optimizada para el tamaño exacto y puede optimizar varias imágenes simultáneamente.
reSmush.it – permite optimizar automáticamente las imágenes durante la descarga y ofrece una opción para optimizar imágenes antiguas. Si no buscas opciones de compresión de imágenes muy flexibles, ofrece el mejor rendimiento, con una diferencia real en el tamaño de los archivos.