Bitmap and vector graphics · Gráficos de bitmap y vectoriales
| English | Español |
|---|---|
| bitmap/ˈbɪtmæp/ | bitmap |
| vector/ˈvektə/ | vectorial |
| pixel/ˈpɪksl/ | píxel |
| file header/faɪl ˈhedə/ | cabecera de archivo |
| colour depth/ˈkʌlə depθ/ | profundidad de color |
| image resolution/ˈɪmɪdʒ ˌrezəˈluːʃn/ | resolución de imagen |
| screen resolution/skriːn ˌrezəˈluːʃn/ | resolución de pantalla |
| frame/freɪm/ | marco |
| frame rate/freɪm reɪt/ | frecuencia de fotogramas |
| drawing list/ˈdrɔːɪŋ lɪst/ | lista de dibujo |
| drawing objects/ˈdrɔːɪŋ ˈɒbdʒekts/ | objetos de dibujo |
| primitives/ˈprɪmɪtɪvz/ | primitivas |
| properties/ˈprɒpətiz/ | propiedades |
| 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 qué el logotipo en el cartel no es una fotografía
- El logotipo de una empresa aparece en una tarjeta de visita de dos centímetros de ancho y en un cartel publicitario de autopista de seis metros. Es el mismo archivo, y está nítido en ambos casos.
- Si amplías una fotografía de la misma manera, esta se pixelea. No hay nada malo con la fotografía; los dos archivos responden a preguntas diferentes.
- Una fotografía almacena qué color hay en cada punto. Un logotipo almacena qué formas dibujar. Ampliar el primero reparte un número fijo de puntos; ampliar el segundo vuelve a dibujar las formas al nuevo tamaño.
- Esta lección trata sobre imágenes bitmap 位图 y vector 矢量, el cálculo del tamaño de archivo que pide el examen y cómo justificar una elección.
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
Cómo se codifica un bitmap
- Un bitmap (imagen mapa de bits) almacena el color de cada píxel 像素 en una cuadrícula, fila por fila.
- Al inicio del archivo, un encabezado de archivo 文件头 registra los metadatos que necesita el software para leer los píxeles siguientes: el ancho, la altura y la profundidad de color.
- La resolución de imagen 图像 resolución es el tamaño propio de la imagen en píxeles, ancho por alto. La resolución de pantalla 屏幕 resolución es lo que puede mostrar la pantalla. Una imagen más grande que la pantalla se escala hacia abajo para ajustarse; una imagen de baja resolución estirada sobre una pantalla de alta resolución se ve pixelada.
- La profundidad de color 颜色深度 (bit depth) es el número de bits que almacenan el color de un píxel: 1 bit da blanco y negro, 8 bits dan 256 colores, 24 bits dan 16,7 millones, llamado color verdadero.
Menos píxeles, bloques más grandes
Computing concept lab · Laboratorio de conceptos informáticos
Classify concrete examples by the computing idea they demonstrate. · Clasificar ejemplos concretos según la idea informática que demuestran.
The colour depth (bit depth) of a bitmap image is: · La profundidad de color (profundidad en bits) de una imagen bitmap es:
Colour depth is bits per pixel — more bits means more possible colours (8 bits → 256, 24 bits → 16.7 million). · La profundidad de color son bits por píxel: más bits significan más colores posibles (8 bits → 256, 24 bits → 16,7 millones).
How many bits of colour depth are needed to store 256 different colours? · ¿Cuántos bits de profundidad de color se necesitan para almacenar 256 colores diferentes?
$2^8 = 256$, so 8 bits per pixel give 256 colours. · $2^8 = 256$, por lo tanto, 8 bits por píxel dan 256 colores.
What does the file header of a bitmap image store? · ¿Qué almacena la cabecera de un archivo bitmap?
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. · La cabecera es metadatos: sin el ancho y la profundidad de color, los bytes de píxel no pueden dividirse en filas y píxeles. Una lista de dibujo pertenece a un archivo vectorial.
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.
Tamaño del archivo bitmap
- Divide entre 8 para obtener bytes, luego divide entre 1000 o 1024 dependiendo de la familia de prefijos que estés usando, y especifica cuál. Añade el encabezado si la pregunta da su tamaño.
- Una imagen de $3000 \times 2000$ píxeles a 24 bits por píxel es $1.44 \times 10^8$ bits, lo que equivale a 18.0 MB usando prefijos decimales o 17.2 MiB usando binarios. Ambos son aceptados siempre que el desarrollo muestre cuál se usó.
A $100 \times 100$ pixel image has a colour depth of 24 bits. What is its file size in bits? · Una imagen de $100 \times 100$ píxeles tiene una profundidad de color de 24 bits. ¿Cuál es su tamaño de archivo en bits?
size · tamaño $=$ width $\times$ height $\times$ depth · profundidad $= 100 \times 100 \times 24 = 240\,000$ bits. · tamaño $=$ ancho $\times$ alto $\times$ profundidad $= 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.
Ejemplo resuelto: dimensionar una fotografía y luego un vídeo
- Una fotografía tiene $4000 \times 3000$ píxeles con una profundidad de color de 24 bits. Encuentra su tamaño de archivo en MiB.
- $4000 \times 3000 \times 24 = 2.88 \times 10^8$ bits. Divide entre 8: $3.6 \times 10^7$ bytes. Divide entre $1024^2$: 34.3 MiB.
- Un vídeo es una secuencia de fotogramas bitmap 帧. Su tamaño sin compresión es un fotograma $\times$ la frecuencia de fotogramas 帧率 $\times$ la duración. A 30 fotogramas por segundo, $1920 \times 1080$, 24 bits: $30 \times 1920 \times 1080 \times 24 \approx 1.5 \times 10^9$ bits, unos 187 MB, por segundo. Por eso el vídeo siempre se comprime.
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. · Un video sin comprimir es de 1920 x 1080 píxeles, color de 24 bits, 30 fotogramas por segundo. ¿Cuántos bits necesita UN segundo? Indica la potencia de 10 con dos cifras significativas, p. ej. 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 fotograma, multiplicado por 30 fotogramas = 1.5e9 bits, aproximadamente 187 MB por cada segundo. Por eso el vídeo siempre está comprimido.
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".
Cambiar la configuración
- Reducir la resolución de imagen: menos píxeles, por lo tanto un archivo más pequeño, pero menos detalle; al ampliarse, la imagen se ve pixelada porque cada píxel cubre más de la pantalla.
- Reducir la profundidad de color: menos bits por píxel, por lo tanto un archivo más pequeño, pero los tonos suaves muestran bandeo, pasos visibles donde debería haber un degradado.
- Aumentar cualquiera de los dos: un archivo más grande y mejor calidad. Responde en estos términos del programa de estudios, no "la imagen empeora".
Match each change to its effect on the image. · Asocia cada cambio con su efecto en la imagen.
Answer in the syllabus terms, banding and blockiness, not "the picture gets worse". · Responde con los términos del programa, bandeo y pixelación, no "la imagen empeora".
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
Cómo se codifica un gráfico vectorial
- Un gráfico vectorial almacena las instrucciones para dibujar la imagen, como una lista de dibujo 绘图列表: una lista ordenada de objetos de dibujo 绘图对象, que son primitivas geométricas 图元 tales como líneas, curvas, rectángulos, polígonos y círculos.
- Cada objeto de dibujo lleva propiedades 属性: su posición o coordenadas, color y grosor de línea, color de relleno, radio, etc.
- Para mostrarlo, el programa renderiza 渲染 la lista de dibujo al tamaño necesario, por lo que se escala sin pérdida de calidad. No puede describir detalles arbitrarios de píxeles, por lo que no sirve para una fotografía.
Una lista de formas y sus propiedades, no una cuadrícula de puntos
A vector logo becomes blurry when you enlarge it a lot. · Un logotipo vectorial se vuelve borroso cuando se amplía mucho.
Vectors are re-rendered from instructions at any size, so they stay sharp. It is bitmaps that blur when enlarged. · Los vectores se vuelven a renderizar a partir de instrucciones a cualquier tamaño, por lo que permanecen nítidos. Son los bitmaps los que se borran al ampliarse.
The main advantage of a vector graphic is that it: · La principal ventaja de un gráfico vectorial es que:
Because it is drawn from instructions, a vector scales without blur — ideal for logos and diagrams (but not photos). · Porque se dibuja a partir de instrucciones, un vector se escala sin desenfoque — ideal para logotipos y diagramas (pero no para 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.
Ejemplo resuelto: justificar la elección
- Un logotipo debe aparecer en una tarjeta de visita y en un cartel publicitario. ¿Qué formato y por qué? [3]
- Un gráfico vectorial. Se almacena como objetos de dibujo con propiedades, por lo que el programa lo vuelve a renderizar al tamaño requerido y los bordes permanecen nítidos.
- Un bitmap tiene un número fijo de píxeles, por lo que al ampliarse al tamaño de un cartel haría visible cada píxel y el logotipo se vería pixelado.
- ¿Y para una fotografía? Un bitmap: una fotografía no tiene formas geométricas que describir, por lo que el color de cada píxel debe guardarse individualmente.
Which terms describe how a vector graphic is encoded? Select all · todos that apply. · ¿Qué términos describen cómo se codifica un gráfico vectorial? Selecciona todos los que correspondan.
An ordered drawing list of drawing objects, each with properties. Colour depth is a bitmap term, bits per pixel. · Una lista ordenada de objetos de dibujo, cada uno con propiedades. La profundidad de color es un término de bitmap, bits por píxel.
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 |
Elegir entre ellos
| Tarea | Elección | Por qué |
|---|---|---|
| fotografía | bitmap | el detalle por píxel no puede describirse como formas |
| logotipo, icono, señal de tráfico | vector | nítido a cualquier tamaño, archivo pequeño |
| plano técnico | vector | geometría precisa, escala exactamente |
| pintura, textura | bitmap | detalle tonal suave en un área |
Which format is better for storing a photograph? · ¿Qué formato es mejor para almacenar una fotografía?
A photo has complex per-pixel detail that cannot be described as shapes, so a bitmap is the right choice. · Una foto tiene detalles complejos por píxel que no pueden describirse como formas, por lo que un bitmap es la elección adecuada.
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.
Puntos que se pierden fácilmente
- Trabaja en bits, divide entre 8 una sola vez, y especifica si usaste 1000 o 1024. Mezclar bits y bytes a mitad de camino es la causa habitual de perder un punto.
- La resolución de imagen son los píxeles de la imagen; la resolución de pantalla es la de la pantalla. La pregunta menciona una de ellas.
- Un vector es una lista de dibujo de objetos con propiedades, no "una imagen hecha de líneas". Usa los tres términos.
- Una respuesta de "justificar" vincula el formato a la tarea: el cartel, la fotografía. Una definición por sí sola no 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
Ya lo tienes
- un bitmap almacena el color de cada píxel tras un encabezado de archivo; la resolución de imagen es su tamaño en píxeles, la profundidad de color los bits por píxel
- tamaño en bits = ancho $\times$ alto $\times$ profundidad de color; un vídeo añade $\times$ frecuencia de fotogramas $\times$ duración
- menor resolución significa pixeleado, menor profundidad de color significa bandeo; ambos significan un archivo más pequeño
- un gráfico vectorial es una lista de dibujo de objetos de dibujo con propiedades, renderizado a cualquier tamaño, por lo que escala sin pérdida pero no puede guardar una fotografía