Redimensionador de imagen

A resolução de imagens digitais é uma ideia que parece simples mas esconde décadas de decisões de engenharia que moldam como vemos o mundo em telas. O conceito de DPI (dots per inch — pontos por polegada) veio do mundo da impressão: uma impressora laser dos anos 1980 imprimia a 300 DPI. Telas de computador ficaram em 72 ou 96 PPI por muito tempo — o Macintosh original de 1984 usava 72 PPI, que correspondia aos pontos por polegada das impressoras da época, tornando o WYSIWYG real possível. A primeira tela CGA da IBM, em 1981, tinha resolução de 320×200 pixels. O VGA, em 1987, chegou a 640×480. O Full HD (1920×1080) virou padrão na década de 2000. Em 2010, a Apple lançou o iPhone 4 com 326 PPI e cunhou o termo Retina display — uma tela onde o olho humano não consegue distinguir pixels individualmente a uma distância normal de uso. Isso forçou desenvolvedores a pensar em imagens em múltiplos tamanhos: a mesma arte em resoluções diferentes para dispositivos diferentes.

Quando você redimensiona uma imagem, o algoritmo de interpolação determina como os novos pixels são calculados. O mais simples é o vizinho mais próximo (nearest neighbor): rápido, mantém bordas nítidas em arte pixel, mas produz serrilhado em fotos. A interpolação bilinear considera os 4 pixels vizinhos — resultado mais suave, bom para reduções moderadas. A bicúbica considera os 16 pixels ao redor — ainda mais suave, preferida para reduções de fotos. O algoritmo Lanczos usa uma janela sinc que preserva frequências altas melhor que o bicúbico — comum em ferramentas de edição profissional. Em redimensionamentos para web, a diferença raramente é visível a olho nu, mas em impressão ou ampliação grande o algoritmo importa muito.

Para desenvolvimento web, redimensionar imagens corretamente tem impacto direto em performance e SEO. Uma imagem de 4000×3000 pixels exibida numa miniatura de 200×150 faz o navegador baixar 20 vezes mais dados do que o necessário. O atributo `srcset` do HTML5 permite servir imagens em tamanhos diferentes por resolução de tela, mas isso começa com ter os arquivos nos tamanhos certos. Tamanhos que aparecem constantemente no dia a dia: Open Graph (1200×630), Twitter Card (1200×628), favicon (16×16, 32×32, 180×180), thumbnail de YouTube (1280×720) e ícones de PWA (192×192, 512×512). Esta ferramenta redimensiona PNG, JPEG e WebP no canvas do navegador, sem upload, com bloqueio de proporção opcional para não distorcer o conteúdo.

The resolution of digital images seems simple but hides decades of engineering decisions that shape how we see the world on screens. The concept of DPI (dots per inch) came from the printing world: a laser printer in the 1980s printed at 300 DPI. Computer screens stayed at 72 or 96 PPI for a long time — the original 1984 Macintosh used 72 PPI, matching the dots per inch of printers of the time and enabling true WYSIWYG. The first IBM CGA screen, in 1981, had a resolution of 320×200 pixels. VGA, in 1987, reached 640×480. Full HD (1920×1080) became standard in the 2000s. In 2010, Apple launched the iPhone 4 with 326 PPI and coined the term Retina display — a screen where the human eye cannot distinguish individual pixels at a normal viewing distance. That forced developers to think in multiple image sizes: the same artwork at different resolutions for different devices.

When you resize an image, the interpolation algorithm determines how new pixels are calculated. The simplest is nearest neighbor: fast, keeps sharp edges in pixel art, but produces jagged edges in photos. Bilinear interpolation considers the 4 neighboring pixels — smoother result, good for moderate downscaling. Bicubic considers the 16 surrounding pixels — even smoother, preferred for photo reductions. The Lanczos algorithm uses a sinc window that preserves high frequencies better than bicubic — common in professional editing tools. For web resizing, the difference is rarely visible to the naked eye, but in print or large enlargements the algorithm matters a great deal.

For web development, resizing images correctly has a direct impact on performance and SEO. A 4000×3000 pixel image displayed in a 200×150 thumbnail forces the browser to download 20 times more data than necessary. HTML5's `srcset` attribute lets you serve images at different sizes per screen resolution, but that starts with having the files at the right dimensions. Standard sizes that come up constantly in daily work: Open Graph (1200×630), Twitter Card (1200×628), favicon (16×16, 32×32, 180×180), YouTube thumbnail (1280×720), and PWA icons (192×192, 512×512). This tool resizes PNG, JPEG, and WebP on the browser canvas, without upload, with optional aspect-ratio lock to avoid distortion.

La resolución de las imágenes digitales parece sencilla, pero esconde décadas de decisiones de ingeniería que moldean cómo vemos el mundo en pantallas. El concepto de DPI (dots per inch — puntos por pulgada) viene del mundo de la impresión: una impresora láser de los años 80 imprimía a 300 DPI. Las pantallas de ordenador se mantuvieron en 72 o 96 PPI durante mucho tiempo — el Macintosh original de 1984 usaba 72 PPI, que coincidía con los puntos por pulgada de las impresoras de la época y hacía posible el WYSIWYG real. La primera pantalla CGA de IBM, en 1981, tenía una resolución de 320×200 píxeles. El VGA, en 1987, llegó a 640×480. El Full HD (1920×1080) se convirtió en estándar en la década de 2000. En 2010, Apple lanzó el iPhone 4 con 326 PPI y acuñó el término pantalla Retina — una pantalla en la que el ojo humano no puede distinguir píxeles individuales a una distancia normal de uso. Eso obligó a los desarrolladores a pensar en imágenes en múltiples tamaños: la misma imagen en distintas resoluciones para distintos dispositivos.

Cuando redimensionas una imagen, el algoritmo de interpolación determina cómo se calculan los nuevos píxeles. El más sencillo es el vecino más próximo (nearest neighbor): rápido, mantiene bordes nítidos en pixel art, pero produce dentado en fotos. La interpolación bilineal considera los 4 píxeles vecinos — resultado más suave, bueno para reducciones moderadas. La bicúbica considera los 16 píxeles del entorno — aún más suave, preferida para reducir fotos. El algoritmo Lanczos usa una ventana sinc que preserva las frecuencias altas mejor que el bicúbico — habitual en herramientas de edición profesional. En redimensionamientos para web, la diferencia rara vez es visible a simple vista, pero en impresión o ampliaciones grandes el algoritmo importa mucho.

Para el desarrollo web, redimensionar imágenes correctamente tiene un impacto directo en el rendimiento y el SEO. Una imagen de 4000×3000 píxeles mostrada en una miniatura de 200×150 obliga al navegador a descargar 20 veces más datos de los necesarios. El atributo `srcset` de HTML5 permite servir imágenes en distintos tamaños según la resolución de pantalla, pero eso empieza por tener los archivos en las dimensiones correctas. Tamaños estándar que aparecen constantemente en el trabajo diario: Open Graph (1200×630), Twitter Card (1200×628), favicon (16×16, 32×32, 180×180), miniatura de YouTube (1280×720) e iconos de PWA (192×192, 512×512). Esta herramienta redimensiona PNG, JPEG y WebP en el canvas del navegador, sin subida, con bloqueo opcional de proporción para no distorsionar el contenido.