Bitmap and vector graphics · Graphismes bitmap et vectoriels
| English | Français |
|---|---|
| bitmap/ˈbɪtmæp/ | bitmap |
| vector/ˈvektə/ | vecteur |
| pixel/ˈpɪksl/ | pixel |
| file header/faɪl ˈhedə/ | en-tête de fichier |
| colour depth/ˈkʌlə depθ/ | profondeur de couleur |
| image resolution/ˈɪmɪdʒ ˌrezəˈluːʃn/ | résolution d'image |
| screen resolution/skriːn ˌrezəˈluːʃn/ | résolution d'écran |
| frame/freɪm/ | trame |
| frame rate/freɪm reɪt/ | fréquence d'actualisation |
| drawing list/ˈdrɔːɪŋ lɪst/ | liste de dessin |
| drawing objects/ˈdrɔːɪŋ ˈɒbdʒekts/ | objets graphiques |
| primitives/ˈprɪmɪtɪvz/ | primitifs |
| properties/ˈprɒpətiz/ | propriétés |
| render/ˈrendə/ | rendu |
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.
Pourquoi le logo sur la billboard n'est pas une photographie
- Le logo d'une entreprise apparaît sur une carte de visite large de deux centimètres et sur un panneau publicitaire autoroutier large de six mètres. C'est le même fichier, et il est net sur les deux.
- Agrandir une photographie de la même manière la rend en blocs. Rien n'est mal avec la photographie ; les deux fichiers répondent à des questions différentes.
- Une photographie stocke quelle couleur est à chaque point. Un logo stocke ** quelles formes dessiner**. Agrandir le premier étale un nombre fixe de pixels ; agrandir le second redessine les formes à la nouvelle taille.
- Cette leçon porte sur les images bitmap 位图 et vector 矢量, le calcul de taille de fichier demandé à l'examen, et comment justifier un choix.
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
Comment un bitmap est encodé
- Un bitmap (image en bitmap) stocke la couleur de chaque pixel 像素 dans une grille, ligne par ligne.
- Au début du fichier, un en-tête de fichier 文件头 enregistre les métadonnées dont le logiciel a besoin pour lire les pixels suivants : la largeur, la hauteur et la profondeur de couleur.
- La résolution d'image 图像 résolution est la taille propre de l'image en pixels, largeur par hauteur. La résolution d'écran 屏幕分辨率 est ce que l'affichage peut montrer. Une image plus grande que l'écran est mise à l'échelle pour s'adapter ; une image basse résolution étirée sur un écran haute résolution paraît en blocs.
- Profondeur de couleur (profondeur de bits) est le nombre de bits stockant la couleur d'un pixel : 1 bit donne du noir et blanc, 8 bits donnent 256 couleurs, 24 bits donnent 16.7 millions, appelé vraie couleur.
Moins de pixels, plus gros blocs
Computing concept lab · Laboratoire de concepts informatiques
Classify concrete examples by the computing idea they demonstrate. · Classez les exemples concrets selon le concept informatique qu'ils illustrent.
The colour depth (bit depth) of a bitmap image is: · La profondeur de couleur (profondeur en bits) d'une image bitmap est :
Colour depth is bits per pixel — more bits means more possible colours (8 bits → 256, 24 bits → 16.7 million). · La profondeur de couleur correspond au nombre de bits par pixel — plus il y a de bits, plus le nombre de couleurs possibles est élevé (8 bits → 256, 24 bits → 16.7 millions).
How many bits of colour depth are needed to store 256 different colours? · Combien de bits de profondeur de couleur sont nécessaires pour stocker 256 couleurs différentes ?
$2^8 = 256$, so 8 bits per pixel give 256 colours. · $2^8 = 256$, donc 8 bits par pixel donnent 256 couleurs.
What does the file header of a bitmap image store? · Que stocke l'en-tête d'un fichier 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. · L'en-tête contient des métadonnées : sans la largeur et la profondeur de couleur, les octets de pixel ne peuvent pas être répartis en lignes et pixels. Une liste de dessin appartient à un fichier vectoriel.
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.
Taille de fichier bitmap
- Divisez par 8 pour obtenir des octets, puis par 1000 ou 1024 selon quelle famille de préfixes vous utilisez, et dites laquelle. Ajoutez l'en-tête si la question donne sa taille.
- Une image $3000 \times 2000$ de 24 bits par pixel représente $1.44 \times 10^8$ bits, ce qui correspond à 18.0 Mo en utilisant les préfixes décimaux ou à 17.2 Mio en utilisant les préfixes binaires. Les deux réponses sont acceptées tant que le travail fourni précise l'unité utilisée.
A $100 \times 100$ pixel image has a colour depth of 24 bits. What is its file size in bits? · Une image de $100 \times 100$ pixels a une profondeur de couleur de 24 bits. Quelle est sa taille de fichier en bits ?
size · taille $=$ width · largeur $\times$ height $\times$ depth · profondeur $= 100 \times 100 \times 24 = 240\,000$ bits. · taille $=$ largeur $\times$ hauteur $\times$ profondeur $= 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.
Exemple résolu : dimensionner une photographie, puis une vidéo
- Une photographie mesure $4000 \times 3000$ pixels avec une profondeur de couleur de 24 bits. Trouvez sa taille de fichier en MiB.
- $4000 \times 3000 \times 24 = 2.88 \times 10^8$ bits. Divisez par 8 : $3.6 \times 10^7$ octets. Divisez par $1024^2$ : 34.3 Mio.
- Une vidéo est une séquence de frames 帧 bitmap. Sa taille non compressée est une frame $\times$ le frame rate 帧率 $\times$ la durée. À 30 images par seconde, $1920 \times 1080$, 24 bits : $30 \times 1920 \times 1080 \times 24 \approx 1.5 \times 10^9$ bits, environ 187 MB, par seconde. C'est pourquoi la vidéo est toujours compressée.
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. · Une vidéo non compressée mesure 1920 x 1080 pixels, couleur 24 bits, 30 images par seconde. Combien de bits une SECONDE nécessite-t-elle ? Donnez la puissance de 10 à deux chiffres significatifs, 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 par image, multiplié par 30 images = 1.5e9 bits, soit environ 187 Mo pour chaque seconde. C'est pourquoi la vidéo est toujours compressée.
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".
Modification des paramètres
- Réduire la résolution d'image : moins de pixels, donc un fichier plus petit, mais moins de détails ; agrandi, l'image paraît en blocs car chaque pixel couvre plus d'écran.
- Réduire la profondeur de couleur : moins de bits par pixel, donc un fichier plus petit, mais les nuances lisses montrent un banding, des marches visibles là où il devrait y avoir un dégradé.
- Augmenter l'un ou l'autre : un fichier plus grand et une meilleure qualité. Répondez avec ces termes du programme, pas "l'image se détériore".
Match each change to its effect on the image. · Reliez chaque changement à son effet sur l'image.
Answer in the syllabus terms, banding and blockiness, not "the picture gets worse". · Répondez selon les termes du programme, banding et pixélisation, pas « l'image devient pire ».
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
Comment un graphique vectoriel est encodé
- Un graphique vectoriel stocke les instructions pour dessiner l'image, sous forme de liste de dessin 绘图列表 : une liste ordonnée d'objets de dessin 绘图对象, qui sont des primitifs géométriques 图元 tels que des lignes, des courbes, des rectangles, des polygones et des cercles.
- Chaque objet de dessin porte des propriétés 属性 : sa position ou ses coordonnées, la couleur et l'épaisseur de la ligne, la couleur de remplissage, le rayon, etc.
- Pour l'afficher, le programme rend 渲染 la liste de dessin à n'importe quelle taille nécessaire, donc il met à l'échelle sans aucune perte de qualité. Il ne peut pas décrire un détail pixel arbitraire, donc il ne convient pas pour une photographie.
Une liste de formes et leurs propriétés, pas une grille de pixels
A vector logo becomes blurry when you enlarge it a lot. · Un logo vectoriel devient flou lorsque vous l'agrandissez beaucoup.
Vectors are re-rendered from instructions at any size, so they stay sharp. It is bitmaps that blur when enlarged. · Les vecteurs sont redessinés à partir d'instructions à n'importe quelle taille, donc ils restent nets. Ce sont les bitmaps qui flouent lorsqu'on les agrandit.
The main advantage of a vector graphic is that it: · L'avantage principal d'un graphique vectoriel est qu'il :
Because it is drawn from instructions, a vector scales without blur — ideal for logos and diagrams (but not photos). · Parce qu'il est dessiné à partir d'instructions, un vecteur s'étend sans flou — idéal pour les logos et les diagrammes (mais pas les 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.
Exemple résolu : justifier le choix
- Un logo doit apparaître sur une carte de visite et sur un panneau publicitaire. Quel format, et pourquoi ? [3]
- Un graphique vectoriel. Il est stocké comme des objets de dessin avec des propriétés, donc le programme le re-rend à n'importe quelle taille requise et les bords restent nets.
- Un bitmap a un nombre fixe de pixels, donc l'agrandir à la taille du panneau publicitaire rendrait chaque pixel visible et le logo paraîtrait en blocs.
- Et pour une photographie ? Un bitmap : une photographie n'a pas de formes géométriques à décrire, donc la couleur de chaque pixel doit être stockée individuellement.
Which terms describe how a vector graphic is encoded? Select all · tout that apply. · Quels termes décrivent comment un graphique vectoriel est encodé ? Sélectionnez tous ceux qui s'appliquent.
An ordered drawing list of drawing objects, each with properties. Colour depth is a bitmap term, bits per pixel. · Une liste de dessin ordonnée d'objets de dessin, chacun avec des propriétés. La profondeur de couleur est un terme bitmap, bits par 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 |
Choisir entre eux
| Tâche | Choix | Pourquoi |
|---|---|---|
| photographie | bitmap | le détail pixel par pixel ne peut pas être décrit comme des formes |
| logo, icône, panneau routier | vector | net à n'importe quelle taille, petit fichier |
| dessin technique | vector | géométrie précise, met à l'échelle exactement |
| peinture, texture | bitmap | détail tonal lisse sur une surface |
Which format is better for storing a photograph? · Quel format est meilleur pour stocker une photographie ?
A photo has complex per-pixel detail that cannot be described as shapes, so a bitmap is the right choice. · Une photo a des détails complexes pixel par pixel qui ne peuvent pas être décrits comme des formes, donc une bitmap est le bon choix.
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.
Pièges qui font perdre des points
- Travaillez en bits, divisez par 8 une seule fois, et indiquez si vous avez utilisé 1000 ou 1024. Mélanger bits et octets en cours de route est la perte de marque habituelle.
- La résolution d'image est les pixels de l'image ; la résolution d'écran est celle de l'affichage. La question nomme l'un des deux.
- Un vector est une liste de dessin d'objets avec des propriétés, pas "une image faite de lignes". Utilisez les trois termes.
- Une réponse "justifie" lie le format à la tâche : le panneau publicitaire, la photographie. Une définition seule ne justifie rien.
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
Vous avez compris
- un bitmap stocke la couleur de chaque pixel après un en-tête de fichier ; la résolution d'image est sa taille en pixels, la profondeur de couleur les bits par pixel
- taille en bits = width $\times$ height $\times$ colour depth ; une vidéo ajoute $\times$ frame rate $\times$ duration
- une résolution plus basse signifie des blocs, une profondeur de couleur plus basse signifie banding ; les deux signifient un fichier plus petit
- un graphique vectoriel est une liste de dessin d'objets de dessin avec des propriétés, rendered à n'importe quelle taille, donc il met à l'échelle sans perte mais ne peut pas stocker une photographie