Bitmap and vector graphics · 位图与矢量图形
| English | 中文 | Pinyin · 拼音 |
|---|---|---|
| bitmap/ˈbɪtmæp/ | 位图 | wèi tú |
| vector/ˈvektə/ | 矢量 | shǐ liàng |
| pixel/ˈpɪksl/ | 像素 | xiàng sù |
| file header/faɪl ˈhedə/ | 文件头 | wén jiàn tóu |
| colour depth/ˈkʌlə depθ/ | 颜色深度 | yán sè shēn dù |
| image resolution/ˈɪmɪdʒ ˌrezəˈluːʃn/ | 图像分辨率 | tú xiàng fēn biàn lǜ |
| screen resolution/skriːn ˌrezəˈluːʃn/ | 屏幕分辨率 | píng mù fēn biàn lǜ |
| frame/freɪm/ | 帧 | zhēn |
| frame rate/freɪm reɪt/ | 帧率 | zhēn lǜ |
| drawing list/ˈdrɔːɪŋ lɪst/ | 绘图列表 | huì tú liè biǎo |
| drawing objects/ˈdrɔːɪŋ ˈɒbdʒekts/ | 绘图对象 | huì tú duì xiàng |
| primitives/ˈprɪmɪtɪvz/ | 图元 | tú yuán |
| properties/ˈprɒpətiz/ | 属性 | shǔ xìng |
| render/ˈrendə/ | 渲染 | xuàn rǎn |
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.
广告牌上的标志为什么不是照片
- 一家公司的标志出现在两厘米宽的名片上,也出现在六米宽的高速公路广告牌上。是同一个文件,两处都清晰。
- 把照片同样放大,它会变成一块块的方格。照片没有毛病;这两种文件回答的是不同的问题。
- 照片存的是每一点是什么颜色。标志存的是要画什么形状。放大前者是把固定数量的点摊开;放大后者是按新尺寸重画那些形状。
- 这一课讲位图(bitmap)和矢量(vector)图像、考试要求的文件大小计算,以及怎样论证选择。
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
位图怎样编码
- 位图(位图图像)按行存储网格中每个像素(pixel)的颜色。
- 文件开头的文件头(file header)记录软件读取后面像素所需的元数据:宽度、高度和颜色深度。
- 图像分辨率(image resolution)是图像自身以像素计的尺寸,宽乘高。屏幕分辨率(screen resolution)是显示器能显示的尺寸。比屏幕大的图像会被缩小以适应;把低分辨率图像拉伸到高分辨率屏幕上会显得方块化。
- 颜色深度(colour depth,位深度)是存储一个像素颜色的位数:1 位给出黑白,8 位给出 256 色,24 位给出 1670 万色,称为真彩色。
像素更少,方块更大
Computing concept lab · 计算概念实验
Classify concrete examples by the computing idea they demonstrate. · 根据它们所演示的计算概念对具体示例进行分类。
The colour depth (bit depth) of a bitmap image is: · 位图图像的颜色深度（位深）是：
Colour depth is bits per pixel — more bits means more possible colours (8 bits → 256, 24 bits → 16.7 million). · 颜色深度是每像素的位数——位数越多，可能的颜色就越多（8 位 → 256, 24 位 → 16.7 百万）。
How many bits of colour depth are needed to store 256 different colours? · 存储256种不同颜色需要多少位的颜色深度？
$2^8 = 256$, so 8 bits per pixel give 256 colours. · $2^8 = 256$，因此每像素8位可表示256种颜色。
What does the file header of a bitmap image store? · 位图图像的文件头存储什么内容？
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. · 文件头是元数据：如果没有宽度和颜色深度，像素字节无法被分割成行和像素。绘图列表属于矢量文件。
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.
位图文件大小
以位计的大小按下式计算:
- 除以 8 得字节,再除以 1000 或 1024——取决于你用哪个前缀家族——并且说明用的哪个。若题目给出文件头大小,要加上。
- 一张 $3000 \times 2000$、每像素 24 位的图像是 $1.44 \times 10^8$ 位,用十进制前缀是 18.0 MB,用二进制前缀是 17.2 MiB。只要过程写明用的哪个,两者都被接受。
A $100 \times 100$ pixel image has a colour depth of 24 bits. What is its file size in bits? · 一个$100 \times 100$像素图像的颜色深度为24位。其文件大小是多少位？
size · 大小 $=$ width $\times$ height $\times$ depth · 深度 $= 100 \times 100 \times 24 = 240\,000$ bits. · 大小 $=$ 宽度 $\times$ 高度 $\times$ 深度 $= 100 \times 100 \times 24 = 240\,000$ 位。
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.
例题:算一张照片,再算一段视频
- 一张照片是 $4000 \times 3000$ 像素,颜色深度 24 位。求它以 MiB 计的文件大小。
- $4000 \times 3000 \times 24 = 2.88 \times 10^8$ 位。除以 8:$3.6 \times 10^7$ 字节。除以 $1024^2$:34.3 MiB。
- *视频是一串位图帧(frame)。*它未压缩的大小是一帧 $\times$ 帧率(frame rate) $\times$ 时长。每秒 30 帧、$1920 \times 1080$、24 位:$30 \times 1920 \times 1080 \times 24 \approx 1.5 \times 10^9$ 位,每秒约 187 MB。这就是视频总要压缩的原因。
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. · 一段未压缩的视频分辨率为1920 x 1080像素，24位色彩，每秒30帧。一秒钟需要多少位？请以两位有效数字给出10的幂次方，例如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位，乘以30帧 = 1.5e9位，即每秒约187 MB。这就是为什么视频总是被压缩的原因。
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".
改变设置
- 降低图像分辨率:像素更少,所以文件更小,但细节更少;放大后画面显得方块化,因为每个像素覆盖屏幕更大的面积。
- 降低颜色深度:每像素位数更少,所以文件更小,但平滑的色调会出现色带,本该是渐变的地方出现可见的台阶。
- 两者提高:文件更大,质量更好。用这些大纲术语回答,不要说"画面变差了"。
Match each change to its effect on the image. · 将每种更改与其对图像的影响相匹配。
Answer in the syllabus terms, banding and blockiness, not "the picture gets worse". · 请使用课程大纲中的术语回答，即“色带”和“块状”，而非“图片变差”。
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
矢量图形怎样编码
- 矢量图形把绘制图像的指令存成一个绘图列表(drawing list):一个有序的绘图对象(drawing objects)列表,这些对象是线、曲线、矩形、多边形、圆之类的几何图元(primitives)。
- 每个绘图对象带有属性(properties):位置或坐标、线条颜色和宽度、填充颜色、半径等等。
- 显示时,程序按所需的任何尺寸渲染(render)这个绘图列表,所以缩放不损失质量。它无法描述任意的像素细节,所以不适合照片。
一串形状及其属性,而不是一格格的点
A vector logo becomes blurry when you enlarge it a lot. · 矢量标志在大幅放大后会变得模糊。
Vectors are re-rendered from instructions at any size, so they stay sharp. It is bitmaps that blur when enlarged. · 矢量图形在任何尺寸下都会从指令重新渲染，因此保持清晰。位图在放大时才会模糊。
The main advantage of a vector graphic is that it: · 矢量图形的主要优势在于它可以：
Because it is drawn from instructions, a vector scales without blur — ideal for logos and diagrams (but not photos). · 因为它是由指令绘制的，矢量图形缩放时不会模糊——非常适合标志和图表（但不适合照片）。
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.
例题:论证选择
- 一个标志必须出现在名片上和广告牌上。选哪种格式,为什么?[3]
- 矢量图形。它存成带属性的绘图对象,所以程序按所需的任何尺寸重新渲染,边缘保持清晰。
- 位图的像素数量固定,所以放大到广告牌尺寸会让每个像素都看得见,标志会显得方块化。
- 那照片呢? 位图:照片没有可描述的几何形状,所以必须逐个存储每个像素的颜色。
Which terms describe how a vector graphic is encoded? Select all · 所有 that apply. · 哪些术语描述了矢量图形的编码方式？选择所有适用项。
An ordered drawing list of drawing objects, each with properties. Colour depth is a bitmap term, bits per 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 |
在两者之间选择
| 任务 | 选择 | 为什么 |
|---|---|---|
| 照片 | 位图 | 逐像素的细节无法用形状描述 |
| 标志、图标、路牌 | 矢量 | 任何尺寸都清晰,文件小 |
| 工程图 | 矢量 | 几何精确,缩放精准 |
| 绘画、纹理 | 位图 | 整片区域上平滑的色调细节 |
Which format is better for storing a photograph? · 哪种格式更适合存储照片？
A photo has complex per-pixel detail that cannot be described as shapes, so a bitmap is the right choice. · 照片具有复杂的逐像素细节，无法用形状描述，因此位图是正确选择。
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.
容易丢掉的分
- 用位计算,只除以 8 一次,并说明你用的是 1000 还是 1024。中途混用位和字节是常见的失分点。
- 图像分辨率是图像的像素;屏幕分辨率是显示器的。题目会点名其一。
- 矢量是带属性的绘图对象的绘图列表,不是"由线条组成的图"。要用这三个术语。
- "论证"的答案要把格式与任务联系起来:广告牌、照片。光有定义论证不了任何事。
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
你掌握了
- 位图在文件头之后存储每个像素的颜色;图像分辨率是它的像素尺寸,颜色深度是每像素的位数
- 以位计的大小 = 宽 $\times$ 高 $\times$ 颜色深度;视频再乘以帧率和时长
- 降低分辨率导致方块化,降低颜色深度导致色带;两者都让文件更小
- 矢量图形是带属性的绘图对象的绘图列表,按任何尺寸渲染,所以缩放不损失质量,但存不了照片