Primero identifica por qué pesa
El peso depende de cuatro decisiones relacionadas: número de píxeles, complejidad visual, formato y nivel de compresión. Dos fotografías con las mismas dimensiones pueden tener tamaños distintos: una pared lisa se comprime con más facilidad que hojas, cabello o ruido de cámara.
Antes de convertir, anota dónde aparecerá la imagen y cuál es el mayor tamaño visible. Si el contenedor mide 760 píxeles, enviar una fotografía de 4,000 no añade cuatro veces más claridad. En pantallas densas puede ser razonable entregar aproximadamente el doble del tamaño CSS, pero no el archivo original completo por defecto.
Ejemplo medible
Una cabecera de artículo de 760 × 428
Prepara una copia de 1,520 × 856 para cubrir una densidad de 2×. Compara esa copia con otra de 1,200 × 675. Si ambas se ven equivalentes en el dispositivo de prueba, la menor es la candidata. La decisión se basa en el uso, no en conservar la resolución de la cámara.
Haz una prueba donde solo cambie una variable
Guarda el original. Crea tres copias con las mismas dimensiones y formato, por ejemplo WebP a 90%, 82% y 70%. Obsérvalas al 100% y dentro del diseño final. Si cambias dimensiones, formato y calidad al mismo tiempo, no sabrás qué ajuste produjo el defecto.
| Versión | Qué observar | Decisión |
|---|---|---|
| 90% | Referencia de alta calidad | Comprueba si el peso justifica la diferencia |
| 82% | Bordes, textura y gradientes | Suele ser un punto de partida, no una regla |
| 70% | Bloques, halos y pérdida de detalle | Descarta si el defecto distrae en uso real |
No evalúes únicamente la miniatura del explorador de archivos. Abre las versiones en el tamaño en que se publicarán y revisa también una ampliación. El objetivo no es ganar una competencia de kilobytes, sino evitar transferencia que no produce beneficio visible.
Cómo interpretar el ahorro
Si una copia pasa de 3.2 MB a 320 KB, la reducción es del 90%. Eso no significa que “conservó 90% de calidad”: tamaño y calidad perceptual no usan la misma escala. Describe por separado el cambio de peso y tu evaluación visual.
Una imagen puede aumentar de tamaño. Convertir una foto JPG a PNG suele ser un ejemplo. El PNG intenta conservar cada píxel sin el tipo de pérdida del JPG y puede necesitar muchos más datos. Transparencia, capturas de interfaz y gráficos planos son escenarios distintos de una fotografía.
Conserva un registro mínimo
Para una publicación importante, guarda el original fuera de la carpeta web y registra nombre de origen, dimensiones finales, formato, peso y fecha. Ese historial permite generar otra versión sin comprimir repetidamente una copia ya deteriorada.
- El archivo abre en dos navegadores o dispositivos disponibles.
- La orientación es correcta y no hay recorte accidental.
- El texto alternativo describe la función de la imagen.
- El nombre no contiene datos privados innecesarios.
- La licencia o autorización de uso está documentada.
No reemplaces todas las variantes por una sola
Una portada de escritorio, una tarjeta y una vista móvil pueden necesitar anchos diferentes. Entregar siempre la versión más grande obliga a descargar datos innecesarios; entregar solo la menor puede dejar una imagen blanda en pantallas amplias. Si administras el sitio, prepara dos o tres variantes y permite que el navegador elija mediante las funciones responsivas disponibles en tu plataforma.
También separa optimización de diseño. Si el texto forma parte de la imagen, reducirla puede volverlo ilegible. Siempre que sea posible, conserva el texto como contenido HTML y utiliza la imagen como apoyo. Así puede adaptarse, traducirse y leerse con tecnologías de asistencia.
Errores que parecen ahorro
Recortar una parte esencial, eliminar transparencia necesaria o destruir una gradación no es optimizar. Tampoco lo es publicar una miniatura y ampliarla con CSS. Un buen resultado reduce transferencia sin cambiar el significado, la legibilidad ni el derecho de uso.
Cuando termines, prueba el laboratorio de imágenes y compara los tres datos que muestra: dimensiones, peso y cambio porcentual.