Cambiar el tamaño, comprimir, cargar. Se trata de reducir el tamaño de su archivo de imagen tanto como sea posible sin sacrificar la calidad. A continuación, te explicamos cómo hacerlo en unos sencillos pasos.
Tabla de contenidos
Paso 1: Elige el formato de archivo correcto
Paso 2: Conozca su tamaño y objetivos de compresión
Paso 3: Elige el tipo de herramienta de compresión/cambio de tamaño
Paso 4: Redúcelo a una herramienta específica
¿Por qué es importante?
Las imágenes tienen archivos de gran tamaño. Los archivos de gran tamaño equivalen a largos tiempos de carga para tu sitio.
En dispositivos móviles, a medida que el tiempo de carga pasó de 1 a 5 segundos, los clientes tenían un 90% más de probabilidades de abandonar el sitio
Si solo subes tus imágenes a tu sitio web tal como están, ralentizarán los tiempos de carga de tu sitio web y la velocidad general (algunos creadores de sitios ni siquiera te permitirán subir las imágenes si son demasiado grandes). Los archivos de imagen grandes también pueden ocupar mucho espacio de almacenamiento y ancho de banda. Y pueden hacer que sus copias de seguridad sean más lentas.
Otra cosa: a los motores de búsqueda les gustan los sitios web rápidos, por lo que, si su sitio es lento debido a muchas imágenes hermosas (pero dolorosamente grandes), realmente puede afectar su ubicación en los motores de búsqueda.
Con un poco de trabajo extra (como comprimir y cambiar el tamaño de tus imágenes antes de subirlas a tu sitio), puedes tener imágenes realmente hermosas y un sitio rápido.
Paso 1: Elige el formato de archivo correcto (JPEG, PNG, GIF?)
JPG: Este es el formato que usarás con más frecuencia para fotos e imágenes.
PNG: Úselo para imágenes con un fondo transparente, para logotipos (los logotipos tendrán un fondo transparente) o para capturas de pantalla.
GIFs: Úsalo para la animación.
Paso 2: Conozca su tamaño y objetivos de compresión
Por dónde empezar:
- Comience con una imagen grande y de alta calidad (como referencia, los teléfonos inteligentes toman imágenes de alta calidad de 3 MB o más, o de 3000 x 5000 píxeles o más).
- Usa tus propias fotos o imágenes de archivo de calidad.
- No tomes una imagen pequeña y la aumentes (terminará pixelada o borrosa).
- Para saber qué tamaño tiene su imagen en este momento, vaya a donde está almacenada su imagen en su computadora, haga clic derecho en su imagen y seleccione «Obtener información». Verás «Talla en la lista» y, en «Más información», también puedes ver las dimensiones.
Pautas de compresión:
- Las imágenes principales (imagen superior de pantalla completa más grande) o de fondo deben tener el tamaño de archivo más grande: menos de 1 MB
- Imágenes de tamaño mediano: ~ 300Kb
- Imágenes más pequeñas: < 300Kb
- Entre el 60% y el 80% de compresión es una buena pauta general
Pautas de talla:
- Piensa en píxeles en lugar de en tamaño de archivo
- Los píxeles son una pequeña unidad de medida. Por ejemplo, la mayoría de los sitios web tienen aproximadamente 1300 px por 1900 px
- Ten en cuenta el tamaño de la imagen en la página y cambia el tamaño en consecuencia. (¿La mitad del tamaño de la página? Bájalo a unos 500 píxeles de ancho. 3/4 de la página? Cambia el tamaño a alrededor de 650px.)
Tamaños de imagen recomendados para WordPress:
WordPress puede crear automáticamente 4 tamaños de imagen diferentes cuando subes una imagen (a veces tu tema también se redimensionará automáticamente):
- Tamaño de la miniatura (150 x 150px)
- Medio: 300 x 300px
- Grande: 1024 x 1024px
- Tamaño completo: tamaño original de la imagen cargada
Puedes ir a tu panel de control de WordPress y cambiar la configuración predeterminada aquí:
- Panel de administración de WP / Configuración / Medios
- Ajustar la configuración de imagen predeterminada y, a continuación, guardar los cambios
Comprueba la compatibilidad de tu tema si tus imágenes cambian de tamaño y no se actualizan cuando cambias la configuración predeterminada.
Paso 3: Elige el tipo de herramienta de compresión/cambio de tamaño
Hay 3 tipos principales de herramientas de compresión. Entraremos en más detalles sobre las opciones de herramientas individuales más adelante, pero, para comenzar, aquí hay algunos pros y contras para cada una:
Software de edición
- Pro: Si ya tienes el software (Adobe Photoshop, GIMP, Affinity Photo, On1Photo) o si siempre has querido hacerte con él y aprender, esta es una buena oportunidad para hacerlo.
- Pro: Le permite controlar todo desde su computadora, sin conexión si es necesario.
- Pro: Incluye cambio de tamaño para que pueda hacer todo (compresión y cambio de tamaño) a la vez.
- Contra: Puede llevar más tiempo aprender.
- Contra: Puede ser costoso, dependiendo del software que elijas (algunos son gratuitos).
Herramientas web
- Pro: Más fácil de usar que el software de edición.
- Pro: Puede poner en cola más de una imagen para comprimir a la vez (dependiendo de la herramienta que utilice).
- Contra: El cambio de tamaño no está incluido en las herramientas gratuitas (está incluido en la mayoría de las versiones pagas).
- Contra: Necesita conexión a internet.
Complementos
- Pro: Mantiene todo en WordPress.
- Pro: Algunos plugins incluyen compresión y cambio de tamaño.
- Contra: Puede ralentizar tu servidor mientras comprime (busca un plugin que utilice sus propios servidores para comprimir tus imágenes).
- Contra: Debe funcionar bien con tu tema y otros plugins.
Consejo: ¿Experimenta parálisis de decisión? Lo más importante es que elijas una de estas herramientas para que te ayude a cambiar el tamaño y comprimir. No hay una elección incorrecta aquí. Sólo tienes que elegir uno y probarlo.
Paso 4: Redúcelo a una herramienta específica
Ahora veamos las opciones específicas dentro de estos tres tipos de herramientas de compresión y cambio de tamaño y sus pros y contras.
Opciones de software de edición:
- Cuesta dinero, pero podría valer la pena si lo usas para otras cosas
- Realiza cambio de tamaño y compresión
- Gratis
- Realiza cambio de tamaño y compresión
- Gratis para usuarios de Mac
- Solo compresión (primero tendrás que usar otra herramienta para cambiar el tamaño de tu imagen)
- Elimina todos los metadatos y perfiles de color innecesarios
- Súper fácil de usar (solo arrastra las imágenes)
- Use la configuración predeterminada o vaya a Preferencias → Calidad, marque «con pérdida» y baje la calidad para comprimir más la imagen
- Gratis para Windows (esta es la versión para Windows de ImageOptim)
- Solo compresión (primero tendrás que usar otra herramienta para cambiar el tamaño de tu imagen)
- Solo para Windows
- Solo compresión (primero tendrá que cambiar el tamaño para que su imagen sea lo suficientemente pequeña y necesitará otra herramienta para cambiar el tamaño)
- Súper fácil de usar (solo arrastra las imágenes)
- Sugiere automáticamente el nivel de compresión
- Puede poner en cola tantas imágenes como necesite
- Muestra la comparación en paralelo
Opciones de herramientas web gratuitas:
- Solo compresión gratuita (primero tendrás que usar otra herramienta para cambiar el tamaño de tu imagen)
- Buen equilibrio entre el tamaño y la calidad de la imagen (no tan pequeño como el compresor, pero de mejor calidad)
- Permite poner en cola hasta 20 imágenes
- Establezca niveles de calidad individuales y obtenga una vista previa de ellos en comparación con la imagen original
- Compresión gratuita, pago por cambio de tamaño
- Buen equilibrio entre el tamaño y la calidad de la imagen
- Solo se puede cambiar el tamaño de una imagen a la vez
- Compresión gratuita, pago por cambio de tamaño
- Tamaño de imagen muy pequeño, con un poco menos de calidad que Kracken u Optimizilla
- Solo se puede cambiar el tamaño de una imagen a la vez
Pruebe antes de comprar:
- TinyPNG es gratis para un cierto número de imágenes, luego de pago
- JPEG Mini tiene una prueba gratuita
- También hay muchas otras opciones, con una variedad de pruebas gratuitas y servicios de pago
Plugin Opciones:
Complemento de inicio simple:
- De uso gratuito, sin límites ni versiones de pago
- Le permite establecer un límite de «cordura» para que cambie automáticamente la escala de las cargas de imágenes grandes
- Bueno para nuevos blogs
- Interfaz sencilla (no se necesita tutorial)
- Redimensionamiento masivo disponible
- No requiere la configuración de una clave de API*
- No tiene copia de seguridad ni eliminación de metadatos*
Plugins con más funcionalidades:
- Gratis
- Redimensionar y comprimir
- Optimiza de forma masiva hasta 50 imágenes con un solo clic (el tamaño de los archivos no puede superar los 5 MB)
- Compresión sin pérdidas*
- Compatible con PNG, JPG Y GIF
- Incluye opción de carga diferida
- Localiza las imágenes que ralentizan tu sitio
- Utiliza sus servidores para disminuir la tensión
- 100 créditos de imagen gratuitos al mes
- Tres algoritmos de compresión diferentes (JPG con pérdida, sin pérdida y brillante para fotógrafos)*
- Incluye cambio de tamaño y puede cambiar el tamaño y optimizar los PDF de forma masiva
- Optimiza las imágenes en la nube para que tu servidor no sufra
- Conservar o eliminar datos EXIF
- Opciones de copia de seguridad
- Requiere configuración de clave de API*
¡Y eso es todo! A partir de ahí, subes tus imágenes sin hacer que tu sitio sea lento como la melaza.
Extras
Traducciones:
Lossy: Tipo de compresión que favorece el menor tamaño sobre la calidad de la imagen.
Lossless: Tipo de compresión que favorece la calidad del sobretamaño de la imagen.
Tamaño de imagen: las dimensiones de una imagen (por ejemplo, 1024 x 680 píxeles).
Tamaño de archivo: la cantidad de espacio necesario para almacenar la imagen en el servidor (por ejemplo, 350 kilobytes).
Metadatos: datos que se almacenan con la imagen (a qué hora se tomó la foto, tipo de cámara, ubicación, etc.). Esta es principalmente información que no necesita para su sitio web y puede eliminar para ayudar con tiempos de carga más rápidos).
Configuración de la clave API: Esto suena técnicamente difícil, pero no lo es. Recibirás un correo electrónico con tu clave, y es una configuración única para algunos plugins. No es complicado, pero es un paso extra.
«Dpi» y «guardar para web»: «Guardar para web» tiene que ver con dpi (puntos por pulgada) y la resolución de la imagen. La mayoría de los monitores de computadora se muestran solo a 72 o 92 ppp, por lo que eso es todo lo que necesita. «Guardar para la web» simplemente guarda su imagen en esa resolución amigable para la web. Úsalo.
En comparación, si está imprimiendo una imagen, desea al menos 300 ppp. Pero si usas 300 ppp para la web, todo ese extra es un desperdicio (y un ancla para tu velocidad).
Puntuación de calidad: Algunas herramientas de compresión tendrán una puntuación de calidad (Photoshop, por ejemplo). La mayoría de las veces no podrá ver la diferencia de calidad entre una imagen con una puntuación de calidad de, por ejemplo, 100 y una puntuación de 80. Si ese es el caso, bájalo a 80 para reducir el tamaño del archivo.
Vigila tus tiempos de carga
Utilice la herramienta PageSpeedInsights de Google para ver cómo sus imágenes afectan los tiempos de carga de su página.
Nota: hay muchas herramientas de compresión y cambio de tamaño por ahí. Queríamos enumerar una variedad de opciones, pero de ninguna manera son una lista extensa ni están en ningún orden. Elegimos herramientas que están muy bien valoradas y que tienen un buen soporte.
