Fundamentos da Imagem Digital
- Em computação gráfica, uma imagem raster ou gráfico de bitmap é uma matriz1 de pontos, que representa geralmente uma grade retangular de pixel ou pontos de cor, que podem ser visualizados por meio de um monitor, papel ou mesmo no seu celular.
- Gráficos vetoriais são geometrias simples como pontos, linhas, curvas e formas (polígonos). São todas baseadas em expressões matemáticas, para representar as imagens na computação gráfica. Cada elemento possui pontos com uma posição definida sobre eixos X e Y do plano de trabalho e também podem receber um atributo para uma cor, forma, uma espessura e um preenchimento.
- Os exemplos mostram o efeito de uma imagem raster comparada com uma imagem vetorial. Como as imagens raster são baseadas em pixels, ao serem escaladas (ampliadas), perdem a nitidez, enquanto que as imagens baseadas em vetores podem ser dimensionadas em qualquer tamanho sem degradar a qualidade da mesma. Tipicamente, as imagens raster são imagens fotográficas, ou de satélites, e possuem a vantagem de exibir um número maior de detalhes. Já as imagens vetoriais são mais simples, sendo utilizadas em desenhos técnicos e mapas.
1 - A mesma que você estuda na matemática.
Autor: João Henrique Quoos
História de Garopaba
A seguir são mostradas duas técnicas de animação. A da esquerda utiliza uma imagem vetorial, e por isso todos os quadros (frames) podem ser calculados conforme necessário, dando um resultado final mais preciso.
Já a da direita, utiliza imagens matriciais (bitmaps). Com esse tipo de imagem, todos os possíveis quadros devem ser previamente desenhados, e a única tarefa do programa é escolher qual quadro será exibido na tela. Cada um desses tipos oferece vantagens e desvantagens.
Vantagem | Desvantagem | |
Vetorial | Precisão nos quadros gerados, sendo possível obter qualquer quadro desejado em tempo real | Custo computacional elevado, se comparado à animação matricial, devido à quantidade de cálculos necessários |
Matricial | Baixo custo computacional | Impossibilidade de se obter qualquer quadro que não esteja previamente desenhado |
Vetorial
Matricial (Sprites)
- Artigos
- O que são Imagens Vetoriais?
Olá Web Developers! Já ouviu falar de Imagens Vetoriais? Vamos ver a diferença e as vantagens em relação às imagens “comuns”. Primeiro, vamos entender o que são as imagens bitmap. É o formato mais comum de imagem, o qual é como um mapa que indica a posição de cada pixel que compõe a imagem. Os formatos mais usados na web são JPEG, PNG e GIF. Bitmap é ótimo para imagens que
precisam de muitos detalhes, como fotografias. No exemplo acima temos o logo da TreinaWeb com 16x16, ou seja, há 256 quadradinhos (pixels) formando a imagem. Porém, as fotos que tiramos hoje em dia possuem milhões de pixels. Imagens vetoriais possuem esse nome porque os formatos são gerados a partir de vetores matemáticos. Ou seja, ao invés de termos o mapeamento de cada um dos pixels da imagem, teremos uma fórmula que indica uma forma. Isso significa que imagens vetoriais não
possuem pixels. Se imagens bitmap forem redimensionadas, em determinado ponto os pixels ficarão visiveis. Como imagens vetoriais não possuem pixels, pois suas formas são indicadas por fórmulas matemáticas, podemos redimensionar o quanto quisermos sem perda de qualidade. Veja abaixo uma comparação. Altere o tamanho e note que os pixels começam a ficar visíveis na imagem bitmap, enquanto na imagem vetorial não há nenhuma diferença. Isso pode ser
uma vantagem quando precisamos redimensionar muito uma imagem sem perda de qualidade. Logos normalmente são feitos em imagem vetorial, pois assim podemos utilizar o logo em vários lugares, desde a cabeça de um alfinete até em um outdoor sem perder qualidade. Também é muito usado em animações, já que certos desenhos podem precisar de zoom para simular o movimento de câmera.Imagens Rasterizadas (bitmap)
Vetorial vs Bitmap
Imagens bitmap muito grandes possuem muitos pixels, o que significa que o arquivo será mais pesado. Já imagens vetoriais, o tamanho da imagem não necessariamente influenciará no tamanho do arquivo, pois um círculo, independente de seu tamanho, é representado pela mesma fórmula matemática.
Exatamente pelo mesmo motivo, se tivermos uma imagem pequena com muitas formas, a imagem bitmap será mais leve. Isso porque a imagem vetorial precisará das fórmulas matemáticas para definir cada forma, independentemente do tamanho da imagem, enquanto a imagem bitmap só precisa indicar a posição de cada pixel. Se a imagem for pequena, a imagem em bitmap terá menos pixels, tornando o arquivo mais leve.
Uma vantagem do bitmap, como dito antes, é possibilitar um maior nível de detalhamento. Não teria como fazer fotografias vetoriais. Só o cabelo de uma pessoa possui muitos detalhes por se tratar de vários fios, cada detalhe de luz e sombra, etc.
A imagem abaixo é outro exemplo. Poderíamos refazer essa ilustração com uma imagem vetorial, mas não conseguiríamos reproduzir os detalhes das nuvens, da grama, das montanhas, etc.
Então, não há o tipo melhor. Cada formato será melhor dependendo da sua necessidade.
Autor(a) do artigo
Akira Hanashiro
Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.
Todos os artigos
Artigos relacionados Ver todos
-
Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape
Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simpl...
-
Como construir um layout Flutter responsivo
Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativ...
-
Começando com SVG no Front-End - Parte 1
Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End.
-
O que é Design Thinking?
Confira neste artigo o que vem a ser o Design Thinking e quais são suas etapas.
-
O que é Material Design?
Se você deseja criar rapidamente aplicações bonitas e utilizáveis, dê uma conferida no Material Desi...
-
Web Designer x Web Developer: quais as diferenças?
Confira neste artigo as principais diferenças entre um Web Designer e um Web Developer.
-
Importância de pensar em Design Inclusivo
Conheça o que é design inclusivo, seus princípios e a importância de pensar em acessibilidade em seu...
- Padrões de projeto: o que são e o que resolvem
Design Patterns (Padrões de Projeto) são soluções para problemas comuns que encontramos no desenvolv...
-
Prototipagem e suas armadilhas
Protótipos fazem parte do dia a dia da equipe de design, mas como podemos otimizar e maximizar a sua...
-
TW Entrevista 06: Rafael Caferati
Fizemos uma série de entrevistas com desenvolvedores chamada "TW Entrevista". O entrevistado de hoje...
-
Refatorando código PHP para Strategy Pattern
Veremos nesse artigo o padrão de projeto Strategy em PHP, aplicaremos refatoração para implementá-lo...
- Uma breve introdução ao DDD
Confira neste artigo uma breve introdução ao DDD: o que é domínio, linguagem úbiqua e bounded contex...