Imágenes y fotografías · Editor de imágenes y dibujos del navegador
Gráficos rasterizados versus gráficos vectoriales: por qué los dibujos en una foto se convierten en píxeles
· Antecedentes
edición de imágenes lienzo procesamiento del navegador
Las imágenes rasterizadas son cuadrículas de píxeles; Los gráficos vectoriales son instrucciones para dibujar formas. Esta publicación explica la diferencia, por qué una foto solo puede ser rasterizada y por qué cualquier cosa que dibujes en ella hereda el mismo destino al exportar.
El logo que se volvió borroso y la foto que nunca pudo ser 'vectorizada': dos confusiones cotidianas con una explicación
Un logotipo borroso y una fotografía anotada a menudo se atribuyen al mismo problema, pero comienzan como tipos diferentes de material. Un logotipo vectorial es un conjunto de instrucciones para trazados, trazos y rellenos; una fotografía es un campo finito de color muestreado. El editor abre la fotografía como un mapa de bits rasterizado del tamaño de un lienzo, por lo que su mundo de trabajo ya es una cuadrícula de píxeles antes de dibujar una línea o un rectángulo.
Dibuja un cuadro sobre la foto, expórtala y amplía el borde. El resultado es una imagen rasterizada cuya anotación ocupa píxeles junto a la fotografía. Compare ese archivo con un SVG original en un tamaño de visualización más grande y la distinción se vuelve visible: al ampliar la exportación se vuelve a muestrear su cuadrícula, mientras que al ampliar el SVG se recalcula su ruta. Este editor no convierte el primer objeto en el segundo.
Ráster: una cuadrícula de celdas coloreadas: cómo PNG, JPEG y WebP almacenan imágenes y por qué la ampliación inventa los píxeles
Las imágenes rasterizadas registran el color en posiciones en una cuadrícula. PNG, JPEG y WebP difieren en su codificación y compresión, pero la imagen exportada aún se resuelve en píxeles cuando se muestra. Un límite de un píxel, una curva suavizada y un título pequeño son muestras finitas en la imagen final. Escalar el archivo hacia arriba requiere un proceso de interpolación para estimar muestras adicionales; no recupera una instrucción de dibujo original.
Esa limitación es importante cuando una anotación debe permanecer nítida en muchos tamaños. Una captura de pantalla destinada a una pantalla fija puede ser exactamente correcta como exportación ráster, mientras que una marca destinada a letreros, impresiones y múltiples interfaces normalmente debería permanecer disponible como un recurso vectorial. Utilice el editor para la imagen compuesta, no como sustituto de la obra de arte original que debe escalarse de forma independiente.
Vector: formas descritas matemáticamente: trazados, trazos y rellenos en formatos como SVG, y por qué se escalan sin pérdida
Los vectores describen la geometría en lugar de almacenar cada píxel mostrado. Una ruta SVG puede especificar una curva, un ancho de trazo, un relleno y una transformación; Luego, un renderizador calcula los píxeles apropiados para el tamaño actual. Es por eso que una misma marca simple puede permanecer limpia cuando se coloca en varias dimensiones. La explicación es un contexto a nivel de formato, no una afirmación de que este editor emita o conserve dichas instrucciones.
El editor del navegador utiliza información geométrica temporalmente para gestos de líneas y formas, lo que permite una vista previa siguiendo el puntero antes de liberarlo. Una vez que finaliza el gesto, el resultado se pinta en una capa rasterizada. Exportar compone las capas visibles y llama a canvas.toBlob para PNG, JPEG o WebP. No hay ningún documento de proyecto vectorial o de exportación SVG en esta ruta, por lo que la geometría no sobrevive como un objeto independiente.
Por qué las fotografías son rasterizadas por naturaleza: los sensores capturan muestras, no formas, y no hay cambios de conversión que
Las fotografías son material rasterizado porque una cámara registra muestras de luz a través de un sensor y las almacena como datos de imagen. Describir una fotografía como vectores requeriría una interpretación que reemplace su textura, ruido, sombras y detalles irregulares con formas inventadas. Ampliarlo o exportarlo de manera diferente puede cambiar la cuadrícula, pero ninguna operación cambia el tipo de información que contiene la captura original.
Esta distinción también explica por qué una foto y un logotipo pueden coexistir en una edición sin convertirse en la misma cosa. El logotipo puede comenzar como un vector en otro lugar, pero después de dibujarlo en una foto rasterizada en este editor, el resultado combinado es una cuadrícula de píxeles. Conserve el logotipo original por separado cuando sea necesario reutilizarlo en el futuro y trate la exportación del navegador como la imagen terminada para su propósito actual.
Dibujar en una trama: lo que hace el editor: las anotaciones pueden ser formas mientras editas, pero la imagen exportada es una cuadrícula única
Durante un gesto, las herramientas de línea y forma pueden comportarse como instrucciones geométricas compactas: el editor conoce el punto inicial, el punto final, el contorno y la vista previa actual. En el lanzamiento, esas instrucciones se representan en una capa ráster. Las marcas de pincel son pintura rasterizada tal como se crean, y el texto se rasteriza al colocarlo en lugar de conservarse como un objeto de texto móvil. Por lo tanto, la sesión ofrece comodidad sin prometer capacidad de edición a nivel de objeto más adelante.
La exportación hace que el límite sea explícito. Las capas ráster visibles se componen en un lienzo y luego se codifican como PNG, JPEG o WebP a través del navegador. Al volver a abrir ese archivo, se obtiene la fotografía y las marcas como píxeles normales; no le proporciona al destinatario un rectángulo seleccionable, una ruta reutilizable o un título editable. Conserve la sesión en capas o los recursos de origen si necesita cambiar la anotación en lugar de simplemente compartir la imagen.
Elegir el tipo adecuado para el trabajo: cuándo solicitar un logotipo vectorial y cuándo una exportación ráster es exactamente lo que desea
Elija un recurso vectorial cuando la propia marca deba viajar: un logotipo necesita varios tamaños, un diagrama puede revisarse o un símbolo debe colocarse en muchos fondos. Elija una exportación ráster cuando el objetivo sea una captura de pantalla lista para compartir, una prueba con una leyenda o una fotografía que contenga una nota visible. La decisión correcta surge del siguiente uso, no de la creencia de que un formato es siempre superior.
El editor de imágenes y dibujos del navegador es adecuado para la segunda categoría. Puede colocar marcas de pincel, línea, rectángulo, elipse y texto rasterizado en una foto y luego exportar la composición como un archivo rasterizado. No puede generar SVG ni conservar un modelo de objetos vectoriales. Si un cliente solicita el logotipo como un activo independiente, regrese a la fuente del vector original en lugar de extraer una versión más grande de los píxeles editados.
Conclusión: sepa cuál tiene: cómo el Editor de imágenes y dibujos del navegador edita imágenes rasterizadas y las exporta, por diseño
El modelo mental confiable es simple: el editor puede usar geometría para describir un gesto, pero el documento y su exportación son imágenes rasterizadas. Cada capa de fotografía y editor abierta tiene una cuadrícula de píxeles finita. Al ampliar esa cuadrícula se vuelve a muestrear la información existente y al exportar se componen las capas visibles en otro ráster. Ningún paso de este flujo de trabajo crea una ruta vectorial reutilizable a partir de una línea que ya se ha convertido en píxeles.
Verifique el tipo de archivo y el destinatario previsto antes de dibujar. Si el destinatario necesita ver una imagen terminada, exporte el ráster e inspeccione sus bordes en el tamaño de visualización real. Si el destinatario necesita editar marcas, cambiar el color de un logotipo o escalar una obra de arte repetidamente, proporcione un vector adecuado o una fuente en capas. Esa distinción evita que una exportación técnicamente válida se confunda con un tipo diferente de entregable.