Preparar una imagen para publicarla

Redimensiona al tamaño en el que la imagen se va a mostrar realmente, como mucho al doble para pantallas de alta densidad. Recorta a la forma que necesita la maquetación en lugar de dejar que el navegador la aplaste. Comprime hasta que empiecen a aparecer artefactos y luego retrocede un paso. Elimina los metadatos al final. El orden importa: cada paso posterior al primero trabaja con muchos menos píxeles.

Las dimensiones van primero

El número de píxeles crece con el cuadrado del ancho, así que una diferencia modesta en dimensiones es una diferencia enorme en datos. Una imagen guardada a 4000 píxeles de ancho y mostrada en una columna de 800 píxeles carga unas veinticinco veces los datos que necesita, y eso no lo recupera ningún ajuste de calidad.

Para elegir un ancho objetivo, mide lo más ancho que llega a renderizarse la imagen en la maquetación, no lo más ancha que llega a ser la pantalla. Una tarjeta en una rejilla de tres columnas quizá no pase nunca de 380 píxeles de ancho. Si un mismo archivo sirve para varios sitios, dimensiónalo para el más grande.

Píxeles de dispositivo, píxeles CSS y el mito de los DPI

Un píxel CSS es una unidad de maquetación, no un punto físico. La relación de píxeles del dispositivo es cuántos píxeles de dispositivo pinta la pantalla por cada píxel CSS: 1 en monitores antiguos, 2 en la mayoría de teléfonos y portátiles modernos, 3 en algunos teléfonos. Una columna de 800 píxeles CSS con relación 2 se pinta con 1600 píxeles de dispositivo, y por eso una imagen dimensionada a su ancho CSS se ve blanda.

La regla práctica es 2x. Exporta al doble del ancho mostrado y deja que el navegador reduzca. Pasar a 3x cuesta otro 125% de datos a cambio de una diferencia que poca gente ve a una distancia de visión normal.

Los DPI y los PPI guardados en un archivo son irrelevantes para la web. Son un número de cabecera que dice a qué tamaño físico debería imprimirse el archivo, y los navegadores lo ignoran por completo.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Exportar a «300 DPI» no añade ningún píxel ni cambia ningún dato de la imagen.

Qué hace el remuestreo

Reducir significa que muchos píxeles de origen se convierten en uno. El detalle más fino que la nueva rejilla no se puede representar, y si el remuestreador toma muestras de demasiado pocos píxeles de origen en lugar de promediar toda el área, ese detalle vuelve doblado como un patrón falso: diagonales dentadas y muaré en texturas finas que se repiten, como una camisa de rayas o una tabla con bordes de un píxel. Una buena reducción promedia todos los píxeles que contribuyen, y normalmente necesita un poco de enfoque después.

Ampliar no crea detalle. La interpolación solo estima valores entre píxeles que ya existen, así que el resultado es blando o cuadriculado. Los ampliadores basados en aprendizaje automático se inventan detalle plausible, que no es lo mismo que recuperarlo.

Relación de aspecto: recortar, poner bandas o estirar

Recortar mantiene el sujeto a su escala correcta y descarta los bordes, y es la opción por defecto adecuada. Poner bandas conserva el encuadre completo, pero añade barras y obliga a elegir su color; se gana su sitio cuando no se puede cortar nada, como con una obra gráfica o un diagrama. Estirar deforma, y el ojo lo detecta al instante en caras, círculos y tipografía.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Cuando un mismo archivo aparece con varias formas, piensa en términos de zona segura: la región que sobrevive a todos los recortes. Un banner 16:9 corta arriba y abajo, un mosaico 1:1 y una tarjeta 4:5 cortan por los lados, así que lo que conservan todos es una franja que pasa por el centro. Mantén el sujeto y cualquier texto dentro de ella, o el recorte cuadrado decapitará una cara que esté cerca del borde de una foto apaisada.

Encontrar el ajuste de calidad

Un número de calidad no es un porcentaje de nada, y las escalas no son comparables entre codificadores. JPEG 80, WebP 80 y AVIF 80 son tres ajustes sin relación entre sí.

El método es el mismo para todos. Exporta con varios ajustes, mira el resultado al tamaño en el que se va a mostrar y comprueba dónde salen antes los artefactos: los degradados suaves, como los cielos, que hacen bandas y manchas; y los bordes duros y el texto, que producen anillos. Encuentra dónde el daño se hace visible, retrocede un paso y para.

Un número fijo es incorrecto para cualquier imagen porque el contenido decide cuánto se puede tirar: una fotografía ruidosa y con textura necesita más bits para sobrevivir, mientras que una ilustración plana se deshace con un ajuste que una foto recargada aguanta sin despeinarse.

Recortes, bordes suaves y halos

Quitar el fondo tiene sentido cuando la imagen tiene que colocarse sobre más de un color de fondo, o solaparse con otros elementos: fotos de producto, logotipos, una persona compuesta dentro de una maquetación. No lo tiene cuando el contorno es genuinamente fino, como con el pelo, el follaje o el cristal, porque una máscara mala se ve peor que un rectángulo honesto.

Un borde duro es binario, con cada píxel totalmente opaco o totalmente transparente, lo que encaja con gráficos planos pero produce escalones en cualquier cosa fotográfica. Una máscara suave permite opacidad fraccionaria, de modo que un píxel puede ser un 40% sujeto, que es la única manera de que el pelo se vea bien.

El halo viene de los píxeles del contorno. El desenfoque del objetivo y el suavizado ya mezclaron el color del sujeto con el fondo antiguo, así que cada uno contiene:

observed = alpha * foreground + (1 - alpha) * background

La eliminación de fondo calcula solo el alfa. El color que queda en esos píxeles sigue contaminado, así que un sujeto recortado de una toma de estudio con fondo blanco arrastra un borde pálido: invisible sobre una página blanca y evidente sobre una oscura. Un recorte bien hecho también resuelve el color del primer plano, y esa opción se expone como «quitar borde» o «descontaminar colores». Si no dispones de eso, estrecha la máscara hacia dentro una fracción de píxel y vuelve a difuminarla.

Rotación y metadatos

Una imagen que está derecha en un programa y tumbada en otro es casi siempre la orientación EXIF. Las cámaras guardan la imagen del sensor sin rotar y añaden una etiqueta que dice cómo hay que girarla. El software que lee la etiqueta la muestra bien; el que la ignora, incluidas muchas bibliotecas de imagen y generadores de miniaturas, muestra los píxeles en bruto de lado.

La solución es fijar la rotación en los propios píxeles y poner la etiqueta a 1 o eliminarla. Girar en pasos de 90 grados reordena los píxeles sin remuestrearlos. Ojo con la doble rotación: píxeles ya girados y etiqueta todavía puesta, así que cualquier visor que cumpla la norma los gira otra vez.

Eliminar los metadatos es una medida de privacidad, no una limpieza. Los bloques EXIF, IPTC y XMP llevan habitualmente coordenadas GPS con una precisión de unos pocos metros, la hora de captura, la marca, el modelo y el número de serie de la cámara, el nombre del propietario y, a veces, una miniatura incrustada que todavía muestra la imagen antes de recortarla. Una foto tomada en casa y publicada intacta publica una dirección particular.

Elimínalos al final, con una excepción: el perfil de color ICC vive junto a esos metadatos, y quitarlo de una imagen de gamut amplio deja unos números que se leerán como sRGB y se verán como un color plano o sobresaturado. Convierte primero a sRGB y después elimina todo lo demás.