Imágenes de producto borrosas al subirlas: dónde se pierden los píxeles

Las imágenes de producto borrosas al subirlas casi nunca son un problema de cámara. El archivo que salió de tu computadora estaba nítido. El archivo que el teléfono del comprador realmente descargó no es ese archivo: fue remuestreado, recodificado, topado y vuelto a servir, por lo general cuatro o cinco veces, por sistemas ajustados para la velocidad de carga de la página y no para tus cotas.

Nadie sube una imagen borrosa. La nitidez no se pierde al subir el archivo: se gasta, una etapa a la vez, y la mayoría de esas etapas son invisibles desde el panel del vendedor. Aquí está el proceso completo en una sola tabla, y después qué hacer con las tres etapas que más te cuestan.

Imágenes de producto borrosas al subirlas: las ocho etapas, en orden

#	Etapa	Qué le hace a tu archivo	Qué pierdes	¿Bajo tu control?
1	Captura	Movimiento, foco fallado, difracción con aperturas muy cerradas	Detalle real, irrecuperable después	Sí
2	Remuestreo de exportación	Reducción al tamaño en píxeles objetivo sin enfoque de salida	Microcontraste en bordes, puntas de flecha y texto pequeño	Sí
3	Tu codificación JPEG	El ajuste de calidad y el submuestreo de croma descartan detalle de color	Líneas de color delgadas, texto de cota rojo y azul	Sí
4	Ingesta de la plataforma	El marketplace decodifica tu JPEG y lo recodifica con sus propios ajustes	Pérdida generacional, halos de ringing en bordes duros	No
5	Techo de píxeles	La plataforma almacena según su propio lado mayor máximo	Todo lo que supere el tope, de forma permanente	Solo eligiendo el tamaño de exportación correcto
6	Tamaños derivados	La página pide una copia del tamaño de la miniatura, no tu archivo maestro	Detalle en proporción a la razón de reducción	En parte, según a qué espacio apuntes
7	Densidad de píxeles del dispositivo	Una pantalla de teléfono 3x quiere tres píxeles de imagen por cada píxel CSS	Dos tercios de la nitidez aparente en pantallas densas	En parte
8	Entrega	Marcadores de carga diferida, ajustes del tema, alternativas para redes lentas	Suavidad temporal o persistente en el primer render	En parte

Las etapas 1 y 2 son tuyas. Las etapas 4 y 5 son de la plataforma y no se negocian. En la práctica, la mayoría de los reclamos por imágenes de producto borrosas al subirlas se rastrean a las etapas 3, 4 y 7: la codificación, la recodificación y la pantalla. Por eso volver a fotografiar casi nunca arregla nada.

Etapa 3: el submuestreo de croma es la razón por la que tu flecha de cota roja muere primero

El submuestreo de croma es un atajo de la codificación JPEG que guarda el brillo a resolución completa pero el color solo a una fracción de ella: en el modo 4:2:0, el más común, una muestra de color por cada bloque de 2x2 píxeles. El detalle de brillo sobrevive; el detalle de color queda reducido a la cuarta parte antes de que el archivo salga de tu máquina.

Es un intercambio razonable para la foto de un sofá. Es un intercambio pésimo para una flecha roja de un píxel trazada sobre un panel gris, porque una línea roja de tono medio sobre gris de tono medio casi no tiene diferencia de brillo con su fondo. Casi toda su visibilidad la carga el matiz, justo el canal que el codificador descarta primero. La línea no desaparece: se difumina en un moretón rosa de unos dos píxeles de ancho, y la punta de la flecha pierde el filo.

La solución no es subir el control de calidad. La solución es hacer que las cotas ganen por brillo y no por color:

Línea oscura sobre fondo claro, o línea clara sobre fondo oscuro. Contraste en luminancia, no en matiz.
Dale a la línea un contorno o halo delgado de contraste para que el borde sobreviva a un promedio de color de 2x2.
Mantén el texto de las cotas con al menos 2 px de grosor en el tamaño entregado, no en el tamaño del archivo maestro.
Evita texto rojo o azul saturado directamente sobre un producto de tono medio. Son los dos matices que se degradan primero.

Etapa 4: la recodificación que nadie ve

Todo marketplace decodifica lo que subes y escribe su propia copia. JPEG tiene pérdida, así que la segunda codificación no se limita a repetir los errores de la primera: cuantiza una imagen que ya contiene artefactos de compresión, y esos artefactos son tratados como detalle digno de preservarse. El resultado visible es el ringing: halos tenues abrazando cada borde duro, más evidentes en texto negro sobre blanco y en las líneas rectas de un diagrama de especificaciones.

No puedes desactivarlo. Lo que sí puedes es dejar de alimentarlo con material dañado:

Conserva un maestro sin pérdida (PNG, TIFF o el original por capas). Nunca edites el JPEG exportado y lo vuelvas a guardar.
Exporta una sola vez, desde el maestro, al tamaño final en píxeles. Cada guardado intermedio en JPEG es una generación que estás pagando.
No precomprimas para alcanzar un objetivo de peso de archivo que el propio techo de la plataforma ya resuelve.

La regla que se desprende de las etapas 3 y 4: la cantidad de veces que una imagen de listado se codifica en JPEG importa más que el control de calidad de cualquier codificación individual.

Etapa 5: el piso de píxeles que mantiene vivo el zoom

El zoom es la función que usa el comprador para verificar si una especificación se lee, y toda plataforma lo condiciona a un umbral de píxeles. Si no alcanzas el umbral, la imagen no está borrosa: simplemente nunca se genera una versión en alta resolución para servir.

Plataforma	Mínimo aceptado	Umbral de zoom	Techo
Amazon	500 px en el lado mayor	1,000 px como mínimo; 1,600 px o más para la mejor experiencia de zoom	10,000 px en el lado mayor
eBay	500 px en el lado mayor	1,600 px en el lado mayor	12 MB por foto
Shopify	Sin piso publicado	Más de 800 x 800 px para que el zoom funcione	5,000 x 5,000 px, hasta 20 MB; 2,048 x 2,048 px recomendado para formato cuadrado

De ahí se desprenden dos cosas. Primera, subir un archivo físicamente más grande no agrega resolución que nunca se capturó: es la misma confusión que está detrás de la discusión de 300 DPI contra 72 DPI, donde un número guardado en el encabezado del archivo se confunde con detalle de imagen. Segunda, exportar al techo de la plataforma normalmente sale gratis y siempre es más seguro que exportar al tamaño que tu tema hoy muestra por casualidad.

Etapa 7: el impuesto 2x de las pantallas densas

La densidad de píxeles del dispositivo es la cantidad de píxeles físicos de pantalla que el navegador usa para un píxel CSS. Los teléfonos actuales suelen reportar 2 o 3. Una imagen de 1,000 píxeles colocada en un espacio de 500 píxeles CSS se ve nítida en una laptop vieja y visiblemente suave en un teléfono, porque el teléfono pidió 1,500 píxeles y recibió 1,000.

Esta es la razón más frecuente por la que un vendedor dice "en mi monitor se ve bien". Probablemente sí. Tu monitor pidió menos píxeles que el teléfono de tu comprador. Revisa cada imagen del listado en un teléfono, al 100%, antes de decidir que el archivo está bien.

Recortar lo agrava. Si el espacio de visualización de la plataforma tiene una forma distinta a la de tu exportación, la parte nítida de tu imagen puede quedar cortada antes de que siquiera se escale: una falla distinta que al ojo se lee como la misma suavidad. Esa es una decisión aparte, y la cubrimos en proporción de las imágenes de producto.

Qué cambiar, en orden de retorno

Exporta al techo de la plataforma, una sola vez, desde un maestro sin pérdida. Es la ganancia individual más grande y no cuesta nada.
Arregla el contraste de las cotas antes de tocar el control de calidad. La luminancia le gana al matiz en toda codificación.
Enfoca después de redimensionar, nunca antes. Enfocar un maestro de 6,000 px y después reducirlo tira el enfoque a la basura y suma halos.
Deja de reciclar JPEG. Una exportación por cada tamaño entregado, desde el maestro.
Verifica en un teléfono. No en la vista previa de escritorio, ni en el cuadro de subida.

Hay una quinta palanca que está aguas arriba de todo esto: cómo se creó la cota en primer lugar. Las líneas de cota y el texto de especificación dibujados como geometría y exportados una sola vez al tamaño entregado en píxeles se mantienen nítidos a través de la recodificación de la plataforma, porque son formas de borde duro y alto contraste de luminancia renderizadas a resolución nativa. Los mismos números escritos en un editor de imágenes sobre una vista ampliada y luego reducidos llegan suaves antes de que la compresión siquiera empiece. Las herramientas que ajustan la medida a los bordes reales del producto y exportan la imagen anotada al tamaño de diagrama de cada plataforma se saltan por completo las etapas 2 y 3; y como la geometría se mide en lugar de generarse, el número sobre la flecha es el número de la cinta métrica, no una cifra verosímil inventada por un modelo de imagen. Si estás evaluando enfoques, la lista corta de herramientas para agregar dimensiones a fotos de producto es un punto de partida sensato.

El diagnóstico de 60 segundos

Haz esto antes de volver a fotografiar cualquier cosa. Separa las tres causas de las imágenes de producto borrosas al subirlas (pocos píxeles, demasiadas codificaciones, pantalla demasiado densa) en aproximadamente un minuto:

Abre el listado publicado en un teléfono y haz zoom con los dedos. ¿El zoom se activa siquiera? Si no, estás por debajo del umbral de zoom de la plataforma: es un problema de cantidad de píxeles, no de nitidez.
Haz clic derecho sobre la imagen publicada y ábrela en una pestaña nueva. Compara sus dimensiones en píxeles con las de lo que subiste. Un número menor significa que la plataforma la topó o la volvió a derivar.
Mira un borde duro de negro sobre blanco al 200%. Halos claros y tenues a ambos lados indican recodificación, no foco suave.
Mira una línea de cota de color al 200%. Si la línea se corrió hacia los lados pero el texto negro cercano está limpio, eso es submuestreo de croma.
Revisa el archivo que subiste. Si alguna vez fue abierto y vuelto a guardar como JPEG, rehaz la exportación desde el maestro.
Compara el lado mayor del maestro con el techo de la plataforma. Si está muy por debajo, vuelve a exportar más grande.

Si los seis puntos pasan y la imagen sigue viéndose suave, recién entonces es un problema de captura, y en ese punto lo que hay que corregir es la toma, no la exportación. Montar una toma que se mantenga medible es una disciplina en sí misma, y la cubrimos en cómo fotografiar un producto para medirlo.

Preguntas frecuentes

¿Por qué mis imágenes de producto se ven borrosas al subirlas a Shopify pero nítidas en mi computadora?

Porque tu computadora te muestra el maestro y la tienda muestra un derivado. Shopify redimensiona las imágenes automáticamente para ajustarlas a pantallas más chicas, así que el comprador casi siempre recibe una copia escalada y no tu archivo. Shopify acepta imágenes de hasta 5,000 x 5,000 px y 20 MB, recomienda 2,048 x 2,048 px para imágenes de producto cuadradas y necesita imágenes de más de 800 x 800 px para que el zoom funcione; si lo que subes está muy por debajo de eso, cada derivado arranca con muy poco detalle.

¿Subir un archivo más grande hace que la imagen se vea más nítida?

Solo hasta la resolución que realmente capturaste. Más píxeles ayudan cuando el umbral de zoom de la plataforma o sus tamaños derivados están dejando la visualización sin material; por ejemplo, pasar de 800 px a 1,600 px en Amazon o eBay activa el zoom. Escalar una foto de 900 px a 3,000 px agrega peso y ningún detalle, y muchas veces suma además una suavidad visible por interpolación.

¿Por qué el texto de mis cotas se ve bien en la imagen principal pero pastoso en la miniatura de la galería?

La miniatura es un derivado aparte, generado por reducción. Un texto de 14 px de alto en un maestro de 1,600 px mide unos 4 px en una miniatura de 450 px, por debajo del tamaño en el que las letras sobreviven a cualquier remuestreo. Dimensiona el texto de las cotas contra el espacio más chico en el que va a aparecer, no contra el maestro.

¿Debería subir PNG en lugar de JPEG para los diagramas de especificaciones?

Donde la plataforma lo permita, sí para imágenes que son mayormente color plano, líneas duras y texto, porque PNG no tiene pérdida y es inmune al submuestreo de croma. La trampa es que casi todos los marketplaces recodifican a JPEG en la ingesta de todos modos, así que el PNG protege las etapas 2 y 3 pero no la 4. Aun así vale la pena: una entrada limpia sobrevive una recodificación mucho mejor que una ya degradada.

¿Por qué mis imágenes se ven peor con datos móviles que con wifi?

Algunos navegadores y redes sustituyen una versión de menor calidad en conexiones limitadas, y muchas tiendas muestran un marcador borroso y diminuto mientras carga el archivo real. Si la imagen se define después de un segundo, eso es el marcador y no hay nada que arreglar. Si se queda suave, vuelve sobre las etapas 5 a 7.