Tutoriales
¿Cómo comprimir imágenes de productos sin perder detalles importantes?
Elija un formato de entrega, compare las exportaciones y verifique sus imágenes de productos cargadas. Incluye una lista de verificación de calidad práctica y un presupuesto ilustrativo de tamaño de archivo.
Comprima las imágenes de productos creando una copia de entrega con el tamaño que el destino requiere, eligiendo un formato aceptado y comparando las exportaciones con los detalles que los clientes deben ver. Conserve el original. Juzgue el resultado tanto después de la carga como antes, porque el destino puede redimensionar o recomprimir su archivo. No existe un objetivo único de kilobytes que funcione para cada imagen de producto.
Una botella simple sobre un fondo liso y un anuncio ilustrado de cuatro paneles tienen diferentes puntos de fallo. La botella puede perder detalles de la etiqueta; el anuncio puede perder líneas finas de los paneles y texto pequeño. Su archivo más pequeño es útil solo si la información importante sobrevive.
Separe las dimensiones, el formato y el peso del archivo
Las dimensiones en píxeles describen el ancho y alto de la imagen. El peso del archivo describe los bytes que deben almacenarse o transferirse. El formato y la compresión determinan cómo se representan esos píxeles. Cambiar una etiqueta de resolución como DPI, sin cambiar los píxeles o la codificación, no es una forma práctica de aligerar una imagen web.
La guía de rendimiento de imágenes de web.dev explica cómo hacer coincidir la entrega de imágenes con su tamaño de visualización y reducir los bytes de imagen innecesarios. La entrega responsiva puede proporcionar diferentes tamaños de origen para diferentes pantallas. Esa es una característica del sitio web; cargar un archivo enorme por sí solo no garantiza que la versión más pequeña correcta llegue a un teléfono.
Para su propia tienda, inspeccione el tamaño realmente descargado en el navegador. Para un marketplace o plataforma social, verifique sus requisitos de carga actuales y su vista previa final. Esos son entornos de entrega diferentes.
Elija un formato que se ajuste a la imagen y al destino
La referencia de formatos de imagen de MDN documenta las capacidades de JPEG, PNG y los formatos web modernos. La siguiente es una guía de selección práctica, no una promesa de que un formulario de carga particular acepte todos los formatos.
| Tipo de archivo | Candidato útil para | Detalle a inspeccionar |
|---|---|---|
| JPEG | Imágenes fotográficas sin transparencia | Bordes de etiquetas, textura y halos de compresión |
| PNG | Una copia sin pérdidas o imágenes que requieren áreas transparentes | Si el archivo resultante es innecesariamente grande para el destino |
| WebP | Entrega para sitios web que lo soporten, utilizando codificación con o sin pérdidas según corresponda | Texto fino y degradados con la configuración elegida |
| AVIF | Entrega para sitios web con una cadena de publicación compatible | Calidad, flujos de trabajo compatibles y el resultado codificado real |
No convierta una fotografía a una extensión diferente renombrando el archivo. Exporte a través de una herramienta que realmente codifique el formato elegido. Además, una exportación sin pérdidas no puede restaurar información ya descartada por una exportación con pérdidas anterior.
Realice una comparación de tres copias
Considere un anuncio ficticio de cuatro paneles para un organizador de escritorio azul marino. Incluye una textura de tela, un pequeño logotipo blanco, un divisor de panel delgado y las palabras “Room for the essentials.” Prepare tres copias de entrega del mismo original: una configuración de calidad conservadora, una configuración moderada y un candidato más pequeño.
Utilice las mismas dimensiones en píxeles para esta comparación, de modo que esté probando la compresión en lugar de varios cambios a la vez. Registre el formato, la configuración de exportación y los bytes resultantes. Los números de calidad son específicos del codificador; “80” en una herramienta no tiene por qué coincidir con “80” en otra.
Compare cada copia al tamaño que verá un cliente. Luego, haga zoom brevemente para localizar daños. Un defecto visible solo con una magnificación extrema puede no importar para la ubicación prevista, pero las palabras ilegibles a tamaño normal sí importan.
| Punto de inspección | Resultado aceptable | Razón para rechazar un candidato |
|---|---|---|
| Nombre del producto | Legible al tamaño de visualización previsto | Las letras se fusionan o desaparecen |
| Textura fina | Sigue comunicando el material con precisión | La tela se convierte en una mancha borrosa |
| Límites del panel | Separación clara entre escenas | Los halos o el ruido distraen de la secuencia |
| Fondo liso | Visualmente uniforme en la vista normal | Aparecen bandas obvias en un degradado |
| Silueta del producto | Contorno limpio y reconocible | Los artefactos de borde cambian la impresión de la forma |
Si las tres versiones se ven débiles, verifique el original y el tamaño de visualización. La compresión no puede resolver un texto que ya era demasiado pequeño en la composición.
Presupuesto para la página, no solo para un archivo
Imagine una página que carga ocho imágenes de productos inmediatamente. Con un hipotético 600 KB cada una, esas imágenes suman aproximadamente 4.8 MB utilizando unidades decimales. Con 180 KB cada una, suman aproximadamente 1.44 MB. Esa aritmética ilustra el tamaño de transferencia acumulativo; no es una mejora medida del tiempo de carga ni un límite universal recomendado.
La experiencia real también depende de qué imágenes se cargan inicialmente, las condiciones de conexión, el almacenamiento en caché, otros recursos de la página y el manejo de imágenes del sitio web. Una imagen grande debajo de la página puede no ser parte de la transferencia inicial si el sitio retrasa su carga.
Utilice el cálculo para encontrar dónde investigar. Si la primera foto del producto ya es clara y pequeña, pero se descargan doce imágenes de galería ocultas a resolución completa, otra ronda de compresión agresiva en la primera foto puede ser la solución incorrecta.
Inspeccione la copia publicada
Cargue su candidato seleccionado y luego abra el destino orientado al cliente. Compare su copia, bordes y color con su archivo de entrega. Verifique un diseño de tamaño de teléfono, así como una vista más amplia. Una plataforma puede recortar o recomprimir una imagen después de aceptar la carga.
Mantenga un pequeño registro de entrega: nombre de archivo original, dimensiones de exportación, formato, bytes resultantes, destino y versión. Si la imagen publicada se ve peor, esto facilita la separación de un original débil, un problema de exportación y una transformación de destino.
Para un creativo de cuatro paneles hecho en Panelly Studio, descargue la imagen final y prepare cualquier compresión específica del destino en su herramienta de imagen habitual. No asuma que Studio expone todos los formatos o configuraciones de codificador descritos aquí. Mantenga el original completo disponible para futuras ubicaciones.
Preguntas frecuentes
¿Debería cada imagen de producto pesar menos de 100 KB?
Utilice un presupuesto específico del destino y una comparación visual. Un límite fijo puede ser demasiado severo para imágenes detalladas e innecesariamente generoso para una miniatura diminuta. Verifique la página completa, así como el archivo individual.
¿Puedo comprimir el mismo JPEG repetidamente?
Prefiera hacer cada nueva copia de entrega a partir del original conservado. Las guardadas con pérdidas repetidas pueden acumular daños y dificultar la identificación de cuándo se perdió el detalle importante.
¿Por qué mi imagen se ve peor después de la carga?
El destino puede transformarla. Compare el original, su copia exportada y la versión mostrada a los clientes. Esa verificación de tres vías identifica dónde enfocar la próxima corrección.
