Bitmap and vector graphics · Gráficos bitmap e vetoriais
| English | Português |
|---|---|
| bitmap/ˈbɪtmæp/ | bitmap |
| vector/ˈvektə/ | vetor |
| pixel/ˈpɪksl/ | pixel |
| file header/faɪl ˈhedə/ | cabeçalho do arquivo |
| colour depth/ˈkʌlə depθ/ | profundidade de cor |
| image resolution/ˈɪmɪdʒ ˌrezəˈluːʃn/ | resolução da imagem |
| screen resolution/skriːn ˌrezəˈluːʃn/ | resolução da tela |
| frame/freɪm/ | quadro |
| frame rate/freɪm reɪt/ | taxa de quadros |
| drawing list/ˈdrɔːɪŋ lɪst/ | lista de desenho |
| drawing objects/ˈdrɔːɪŋ ˈɒbdʒekts/ | objetos de desenho |
| primitives/ˈprɪmɪtɪvz/ | primitivas |
| properties/ˈprɒpətiz/ | propriedades |
| render/ˈrendə/ | renderizar |
Why the logo on the billboard is not a photograph
- A company's logo appears on a business card two centimetres wide and on a motorway billboard six metres wide. It is the same file, and it is sharp on both.
- Enlarge a photograph the same way and it turns to blocks. Nothing is wrong with the photograph; the two files answer different questions.
- A photograph stores what colour is at each point. A logo stores what shapes to draw. Enlarging the first spreads a fixed number of dots; enlarging the second redraws the shapes at the new size.
- This lesson is bitmap 位图 and vector 矢量 images, the file-size calculation the exam asks for, and how to justify a choice.
Por que o logotipo no outdoor não é uma fotografia
- O logotipo de uma empresa aparece num cartão de visita de dois centímetros de largura e num outdoor de rodovia de seis metros. É o mesmo arquivo, e está nítido em ambos.
- Amplie uma fotografia dessa forma e ela vira blocos. Nada está errado com a fotografia; os dois arquivos respondem a perguntas diferentes.
- Uma fotografia armazena que cor está em cada ponto. Um logotipo armazena quais formas desenhar. Ampliar a primeira espalha um número fixo de pontos; ampliar a segunda redesenha as formas no novo tamanho.
- Esta aula trata de imagens bitmap 位图 e vetor 矢量, o cálculo de tamanho de arquivo cobrado na prova, e como justificar uma escolha.
How a bitmap is encoded
- A bitmap (a bitmapped image) stores the colour of every pixel 像素 in a grid, row by row.
- At the start of the file, a file header 文件头 records the metadata the software needs to read the pixels that follow: the width, the height and the colour depth.
- Image resolution 图像分辨率 is the image's own size in pixels, width by height. Screen resolution 屏幕分辨率 is what the display can show. An image larger than the screen is scaled down to fit; a low-resolution image stretched onto a high-resolution screen looks blocky.
- Colour depth 颜色深度 (bit depth) is the number of bits storing one pixel's colour: 1 bit gives black and white, 8 bits give 256 colours, 24 bits give 16.7 million, called true colour.
Fewer pixels, bigger blocks
Como um bitmap é codificado
- Um bitmap (imagem bitmap) armazena a cor de cada pixel 像素 em uma grade, linha por linha.
- No início do arquivo, um cabeçalho de arquivo 文件头 registra os metadados que o software precisa para ler os pixels seguintes: a largura, a altura e a profundidade de cor.
- Resolução da imagem 图像分辨率 é o tamanho próprio da imagem em pixels, largura por altura. Resolução da tela 屏幕分辨率 é o que o display pode mostrar. Uma imagem maior que a tela é escalonada para caber; uma imagem de baixa resolução esticada numa tela de alta resolução parece pixelizada.
- Profundidade de cor (profundidade de bits) é o número de bits que armazenam a cor de um único pixel: 1 bit fornece preto e branco, 8 bits fornecem 256 cores, 24 bits fornecem 16.7 milhões, chamado de verdadeira cor.
Menos pixels, blocos maiores
Computing concept lab · Laboratório de conceitos de computação
Classify concrete examples by the computing idea they demonstrate. · Classifique exemplos concretos pelo conceito de computação que eles demonstram.
The colour depth (bit depth) of a bitmap image is: · A profundidade de cor (profundidade de bits) de uma imagem bitmap é:
Colour depth is bits per pixel — more bits means more possible colours (8 bits → 256, 24 bits → 16.7 million). · A profundidade de cor são bits por pixel — mais bits significam mais cores possíveis (8 bits → 256, 24 bits → 16.7 milhões).
How many bits of colour depth are needed to store 256 different colours? · Quantos bits de profundidade de cor são necessários para armazenar 256 cores diferentes?
$2^8 = 256$, so 8 bits per pixel give 256 colours. · $2^8 = 256$, então 8 bits por pixel dão 256 cores.
What does the file header of a bitmap image store? · O que o cabeçalho do arquivo de uma imagem bitmap armazena?
The header is metadata: without the width and colour depth the pixel bytes cannot be split into rows and pixels. A drawing list belongs to a vector file. · O cabeçalho é metadado: sem a largura e profundidade de cor, os bytes de pixel não podem ser divididos em linhas e pixels. Uma lista de desenho pertence a um arquivo vetorial.
Bitmap file size
- Divide by 8 for bytes, then by 1000 or 1024 depending on which prefix family you are using, and say which. Add the header if the question gives its size.
- A $3000 \times 2000$ image at 24 bits per pixel is $1.44 \times 10^8$ bits, which is 18.0 MB using decimal prefixes or 17.2 MiB using binary ones. Both are accepted when the working shows which.
Tamanho do arquivo bitmap
- Divida por 8 para bytes, depois divida por 1000 ou 1024 dependendo de qual família de prefixos você está usando, e diga qual. Adicione o cabeçalho se a questão fornecer seu tamanho.
- Uma imagem $3000 \times 2000$ em 24 bits por pixel tem $1.44 \times 10^8$ bits, o que equivale a 18.0 MB usando prefixos decimais ou 17.2 MiB usando prefixos binários. Ambos são aceitos quando o desenvolvimento mostra qual foi utilizado.
A $100 \times 100$ pixel image has a colour depth of 24 bits. What is its file size in bits? · Uma imagem de $100 \times 100$ pixels tem profundidade de cor de 24 bits. Qual é seu tamanho de arquivo em bits?
size · tamanho $=$ width · largura $\times$ height $\times$ depth · profundidade $= 100 \times 100 \times 24 = 240\,000$ bits. · tamanho $=$ largura $\times$ altura $\times$ profundidade $= 100 \times 100 \times 24 = 240\,000$ bits.
Worked example: size a photograph, then a video
- A photograph is $4000 \times 3000$ pixels with a colour depth of 24 bits. Find its file size in MiB.
- $4000 \times 3000 \times 24 = 2.88 \times 10^8$ bits. Divide by 8: $3.6 \times 10^7$ bytes. Divide by $1024^2$: 34.3 MiB.
- A video is a sequence of bitmap frames 帧. Its uncompressed size is one frame $\times$ the frame rate 帧率 $\times$ the duration. At 30 frames per second, $1920 \times 1080$, 24 bits: $30 \times 1920 \times 1080 \times 24 \approx 1.5 \times 10^9$ bits, about 187 MB, per second. That is why video is always compressed.
Exemplo resolvido: dimensionar uma fotografia, depois um vídeo
- Uma fotografia tem $4000 \times 3000$ pixels com profundidade de cor de 24 bits. Encontre seu tamanho de arquivo em MiB.
- $4000 \times 3000 \times 24 = 2.88 \times 10^8$ bits. Divida por 8: $3.6 \times 10^7$ bytes. Divida por $1024^2$: 34.3 MiB.
- Um vídeo é uma sequência de quadros 帧 bitmaps. Seu tamanho não comprimido é um quadro $\times$ a taxa de quadros 帧率 $\times$ a duração. A 30 quadros por segundo, $1920 \times 1080$, 24 bits: $30 \times 1920 \times 1080 \times 24 \approx 1.5 \times 10^9$ bits, cerca de 187 MB, por segundo. É por isso que vídeo sempre é comprimido.
An uncompressed video is 1920 x 1080 pixels, 24-bit colour, 30 frames per second. How many bits does ONE second need? Give the power of 10 to two significant figures, e.g. 1.5e9. · Um vídeo não compactado é 1920 x 1080 pixels, cor de 24 bits, 30 quadros por segundo. Quantos bits UM segundo precisa? Dê a potência de 10 com duas figuras significativas, ex: 1.5e9.
1920 x 1080 x 24 = 4.98e7 bits per frame, times 30 frames = 1.5e9 bits, about 187 MB for every second. That is why video is always compressed. · 1920 x 1080 x 24 = 4.98e7 bits por quadro, vezes 30 quadros = 1.5e9 bits, cerca de 187 MB para cada segundo. É por isso que vídeo é sempre compactado.
Changing the settings
- Lower image resolution: fewer pixels, so a smaller file, but less detail; enlarged, the picture looks blocky because each pixel covers more of the screen.
- Lower colour depth: fewer bits per pixel, so a smaller file, but smooth shades show banding, visible steps where there should be a gradient.
- Higher of either: a larger file and better quality. Answer in these syllabus terms, not "the picture gets worse".
Alterando as configurações
- Resolução de imagem menor: menos pixels, então um arquivo menor, mas menos detalhes; ampliado, a imagem parece pixelizada porque cada pixel cobre mais da tela.
- Profundidade de cor menor: menos bits por pixel, então um arquivo menor, mas tons suaves mostram banding, degraus visíveis onde deveria haver um gradiente.
- Maior de qualquer um: um arquivo maior e melhor qualidade. Responda nestes termos do programa, não "a imagem fica pior".
Match each change to its effect on the image. · Combine cada alteração com seu efeito na imagem.
Answer in the syllabus terms, banding and blockiness, not "the picture gets worse". · Responda nos termos do programa, faixamento e quadrados, não "a imagem fica pior".
How a vector graphic is encoded
- A vector graphic stores the instructions to draw the image, as a drawing list 绘图列表: an ordered list of drawing objects 绘图对象, which are geometric primitives 图元 such as lines, curves, rectangles, polygons and circles.
- Each drawing object carries properties 属性: its position or coordinates, line colour and width, fill colour, radius and so on.
- To display it, the program renders 渲染 the drawing list at whatever size is needed, so it scales without any loss of quality. It cannot describe arbitrary pixel detail, so it is no good for a photograph.
A list of shapes and their properties, not a grid of dots
Como um gráfico vetorial é codificado
- Um gráfico vetorial armazena as instruções para desenhar a imagem, como uma lista de desenho 绘图列表: uma lista ordenada de objetos de desenho 绘图对象, que são primitivas geométricas 图元 como linhas, curvas, retângulos, polígonos e círculos.
- Cada objeto de desenho carrega propriedades 属性: sua posição ou coordenadas, cor e largura da linha, cor de preenchimento, raio, etc.
- Para exibi-lo, o programa renderiza 渲染 a lista de desenho no tamanho necessário, então ele escala sem nenhuma perda de qualidade. Ele não pode descrever detalhes arbitrários de pixel, então não serve para uma fotografia.
Uma lista de formas e suas propriedades, não uma grade de pontos
A vector logo becomes blurry when you enlarge it a lot. · Um logotipo vetorial fica desfocado quando você o amplia muito.
Vectors are re-rendered from instructions at any size, so they stay sharp. It is bitmaps that blur when enlarged. · Vetores são re-renderizados a partir de instruções em qualquer tamanho, então permanecem nítidos. São os bitmaps que ficam desfocados ao serem ampliados.
The main advantage of a vector graphic is that it: · A principal vantagem de um gráfico vetorial é que ele:
Because it is drawn from instructions, a vector scales without blur — ideal for logos and diagrams (but not photos). · Por ser desenhado a partir de instruções, um vetor escala sem desfoque — ideal para logotipos e diagramas (mas não fotos).
Worked example: justify the choice
- A logo must appear on a business card and on a billboard. Which format, and why? [3]
- A vector graphic. It is stored as drawing objects with properties, so the program re-renders it at whatever size is required and the edges stay sharp.
- A bitmap has a fixed number of pixels, so enlarging it to billboard size would make each pixel visible and the logo would look blocky.
- And for a photograph? A bitmap: a photograph has no geometric shapes to describe, so the colour of every pixel must be stored individually.
Exemplo resolvido: justificar a escolha
- Um logotipo deve aparecer num cartão de visita e num outdoor. Qual formato, e por quê? [3]
- Um gráfico vetorial. Ele é armazenado como objetos de desenho com propriedades, então o programa o renderiza novamente no tamanho exigido e as bordas permanecem nítidas.
- Um bitmap tem um número fixo de pixels, então ampliá-lo para o tamanho do outdoor tornaria cada pixel visível e o logotipo pareceria pixelizado.
- E para uma fotografia? Um bitmap: uma fotografia não tem formas geométricas para descrever, então a cor de cada pixel deve ser armazenada individualmente.
Which terms describe how a vector graphic is encoded? Select all · todos that apply. · Quais termos descrevem como um gráfico vetorial é codificado? Selecione todos os que se aplicam.
An ordered drawing list of drawing objects, each with properties. Colour depth is a bitmap term, bits per pixel. · Uma lista ordenada de objetos de desenho, cada um com propriedades. Profundidade de cor é um termo de bitmap, bits por pixel.
Choosing between them
| Task | Choice | Why |
|---|---|---|
| photograph | bitmap | per-pixel detail cannot be described as shapes |
| logo, icon, road sign | vector | sharp at any size, small file |
| engineering drawing | vector | precise geometry, scales exactly |
| painting, texture | bitmap | smooth tonal detail across an area |
Escolhendo entre eles
| Tarefa | Escolha | Por quê |
|---|---|---|
| fotografia | bitmap | detalhe por-pixel não pode ser descrito como formas |
| logotipo, ícone, sinal de trânsito | vetor | nítido em qualquer tamanho, arquivo pequeno |
| desenho técnico | vetor | geometria precisa, escala exatamente |
| pintura, textura | bitmap | detalhe tonal suave através de uma área |
Which format is better for storing a photograph? · Qual formato é melhor para armazenar uma fotografia?
A photo has complex per-pixel detail that cannot be described as shapes, so a bitmap is the right choice. · Uma foto tem detalhes complexos por pixel que não podem ser descritos como formas, então um bitmap é a escolha certa.
Marks that slip away
- Work in bits, divide by 8 once, and state whether you used 1000 or 1024. Mixing bits and bytes halfway is the usual lost mark.
- Image resolution is the image's pixels; screen resolution is the display's. The question names one.
- A vector is a drawing list of objects with properties, not "a picture made of lines". Use the three terms.
- A "justify" answer links the format to the task: the billboard, the photograph. A definition alone does not justify anything.
Marcas que escapam
- Trabalhe em bits, divida por 8 uma única vez, e declare se usou 1000 ou 1024. Misturar bits e bytes pela metade é o erro comum de perda de nota.
- Resolução da imagem é os pixels da imagem; resolução da tela é do display. A questão nomeia um.
- Um vetorial é uma lista de desenho de objetos com propriedades, não "uma imagem feita de linhas". Use os três termos.
- Uma resposta "justifique" conecta o formato à tarefa: o outdoor, a fotografia. Uma definição sozinha não justifica nada.
You've got it
- a bitmap stores every pixel's colour after a file header; image resolution is its pixel size, colour depth the bits per pixel
- size in bits = width $\times$ height $\times$ colour depth; a video adds $\times$ frame rate $\times$ duration
- lower resolution means blocky, lower colour depth means banding; both mean a smaller file
- a vector graphic is a drawing list of drawing objects with properties, rendered at any size, so it scales without loss but cannot store a photograph
Entendeu?
- um bitmap armazena a cor de cada pixel após um cabeçalho de arquivo; resolução da imagem é seu tamanho em pixels, profundidade de cor os bits por pixel
- tamanho em bits = largura $\times$ altura $\times$ profundidade de cor; um vídeo adiciona $\times$ taxa de quadros $\times$ duração
- resolução menor significa pixelizado, profundidade de cor menor significa banding; ambos significam um arquivo menor
- um gráfico vetorial é uma lista de desenho de objetos de desenho com propriedades, renderizado em qualquer tamanho, então escala sem perda mas não pode armazenar uma fotografia