Primer artículo de nuestra serie Consejos para clientes, para quienes actualizan su propia web.
Has hecho una foto estupenda y quieres subirla hoy mismo. Lógico. Pero una foto recién salida del móvil o de un programa de diseño puede pesar varios megas, y con unas cuantas cualquier página se arrastra en el móvil. La buena noticia: arreglarlo lleva un minuto.
Por qué importa
En una web de cliente en la que trabajamos, la de Madriz Ink, un estudio de tatuajes en Square Online, las imágenes de todo el sitio sumaban unos 750 MB. Después de comprimirlas, el total quedó en unos 80 MB. Ambas cifras son aproximadas, como se indica en el caso de estudio. Casi todo el peso venía de archivos PNG grandes que no necesitaban ser PNG.
No hace falta que recuerdes nada de eso. Solo tres números.
Las tres reglas
- JPG para las fotos. Deja el PNG solo para imágenes con fondo transparente, como algunos logos.
- Máximo 1200 px de ancho. Es más que suficiente para una imagen de contenido normal en la mayoría de las webs.
- Menos de 500 KB por foto.
Paso a paso con Squoosh (gratis, en el navegador)
Squoosh es una herramienta gratuita del equipo de Chrome. Funciona en el navegador y tus imágenes no salen de tu dispositivo. La interfaz está en inglés, así que te dejamos los nombres tal y como aparecen.
- Entra en https://squoosh.app.
- Arrastra la foto a la página (Drop), pégala (Paste) o pulsa el botón redondo que hay encima para abrir un archivo.
- En el panel de la derecha, en Edit, activa Resize (redimensionar). Pon Width: (ancho) en 1200. Deja marcado Maintain aspect ratio (mantener proporciones) para que el alto se ajuste solo.
- En Compress, comprueba que está elegido el formato MozJPEG (viene por defecto en el lado derecho).
- Mueve el control Quality: (calidad) mientras miras el tamaño que aparece abajo en el panel. Para cuando el archivo pese menos de 500 KB y la foto se siga viendo bien. Arrastra la línea del centro de la imagen para compararla con la original (Original Image).
- Pulsa el botón de descarga (la flecha abajo a la derecha) y guarda el archivo con un nombre claro, por ejemplo
escaparate-estudio.jpg.
Listo. Repite con cada foto.
Si tu foto ya mide menos de 1200 px de ancho, no la redimensiones; solo comprímela.
En Square y otros creadores de webs: reemplaza, no borres
Al cambiar una foto, tienta borrar la antigua y añadir una nueva. En un creador de webs eso puede hacer más daño del que parece. Al borrar una imagen puedes perder su texto alternativo, su enlace o su posición en una galería o en un producto, y toca configurarlo todo de nuevo.
Square Online tiene una opción Reemplazar para esto. En el editor del sitio, selecciona la imagen y haz clic en Reemplazar en el panel de edición (en algunas secciones está en ••• > Reemplazar). Después guarda y pulsa Publicar (artículo de ayuda de Square).
Así trabajamos en la web de Madriz Ink: los PNG pesados se reemplazaron en su sitio por JPG comprimidos, y los textos alternativos, los enlaces y el orden se mantuvieron igual.
Otros creadores de webs suelen tener una opción parecida para reemplazar. Búscala antes de ir al icono de la papelera.
Lista rápida
- JPG (PNG solo si necesitas transparencia)
- 1200 px de ancho o menos
- Menos de 500 KB
- Nombre de archivo claro (
lo-que-se-ve.jpg, noIMG_4821.jpg) - Reemplaza la imagen antigua en lugar de borrarla
- Guarda, publica y revisa la página en el móvil
¿Te echamos una mano?
Todas las webs que creamos o reparamos incluyen una guía de cuidados sencilla como esta, para que puedas mantenerlas rápidas por tu cuenta. Si tu web ya va lenta, envíanosla →.
Relacionado: Web en Square Online lenta: qué la frena y cómo la optimizamos.