Bitmap และ vector graphics
แนะนำใหม่| English | ความหมาย |
|---|---|
| bitmap/ˈbɪtmæp/ | บิตแมป |
| vector/ˈvektə/ | เวกเตอร์ |
| pixel/ˈpɪksl/ | พิกเซล |
| file header/faɪl ˈhedə/ | ส่วนหัวของไฟล์ |
| colour depth/ˈkʌlə depθ/ | ความลึกของสี |
| image resolution/ˈɪmɪdʒ ˌrezəˈluːʃn/ | ความละเอียดของภาพ |
| screen resolution/skriːn ˌrezəˈluːʃn/ | ความละเอียดของหน้าจอ |
| frame/freɪm/ | เฟรม |
| frame rate/freɪm reɪt/ | อัตราเฟรม |
| drawing list/ˈdrɔːɪŋ lɪst/ | รายการวาดภาพ |
| drawing objects/ˈdrɔːɪŋ ˈɒbdʒekts/ | วัตถุที่วาด |
| primitives/ˈprɪmɪtɪvz/ | รูปทรงพื้นฐาน |
| properties/ˈprɒpətiz/ | คุณสมบัติ |
| render/ˈrendə/ | การเรนเดอร์ |
ทำไมโลโก้บนป้ายโฆษณาจึงไม่ใช่ภาพถ่าย
- โลโก้ของบริษัทปรากฏบนบัตรนามocard กว้างสองเซนติเมตร และบนป้ายโฆษณาสายด่วนกว้างหกเมตร เป็นไฟล์เดียวกันและคมชัดทั้งสองแบบ
- หากขยายภาพถ่ายในลักษณะเดียวกัน มันจะกลายเป็นบล็อกๆ ไม่มีอะไรผิดกับภาพถ่าย那两个ไฟล์ตอบคำถามที่ต่างกัน
- ภาพถ่ายจัดเก็บ สีของแต่ละจุด โลโก้จัดเก็บ รูปร่างที่จะวาด การขยายภาพแรกจะกระจายจำนวนพิกเซลคงที่ การขยายภาพที่สองจะวาดรูปร่างใหม่ตามขนาดนั้น
- บทเรียนนี้เกี่ยวกับภาพ bitmap และ vector การคำนวณขนาดไฟล์ที่ข้อสอบถาม และวิธีการให้เหตุผลเลือกคำตอบ
การเข้ารหัส bitmap
- bitmap (ภาพ/bitmapped image) จัดเก็บสีของทุก pixel ในตาราง จากบนลงล่าง
- ที่ต้นไฟล์ file header บันทึก metadata ที่ซอฟต์แวร์ต้องการอ่านพิกเซลที่ตามมา: ความกว้าง ความสูง และความลึกของสี
- Image resolution คือขนาดภาพเองเป็นพิกเซล ความกว้างคูณความสูง Screen resolution คือสิ่งที่จอแสดงผลแสดงได้ ภาพที่ใหญ่กว่าจอจะถูกย่อให้พอดี ภาพความละเอียดต่ำที่ขยายบนจอความละเอียดสูงจะดูเป็นบล็อกๆ
- Colour depth (bit depth) คือจำนวนบิตที่ใช้จัดเก็บสีหนึ่งพิกเซล: 1 บิตให้ขาวดำ, 8 บิตให้ 256 สี, 24 บิตให้ 16.7 ล้านสี ซึ่งเรียกว่า true colour
พิกเซลน้อยลง บล็อกใหญ่ขึ้น
ห้องปฏิบัติการแนวคิดการคำนวณ
จัดกลุ่มตัวอย่างที่เป็นรูปธรรมตาม idea การคำนวณที่แสดงออก
colour depth (bit depth) ของ bitmap image คือ:
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Colour depth คือ bits per pixel — บิต越多 means มีสีที่เป็นไปได้มากขึ้น (8 บิต → 256, 24 บิต → 16.7 ล้าน)
ต้องใช้จำนวน多少个 bits ของ colour depth เพื่อเก็บ 256 สีที่แตกต่างกัน?
Difficulty 2/5 · 140 coins + a small bonus on first completion today
$2^8 = 256$, ดังนั้น 8 บิตต่อ pixel จึงให้สี 256 สี
file header ของ bitmap image เก็บอะไร?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Header คือ metadata: หากขาด width และ colour depth byte ของ pixel จะไม่สามารถแยกเป็น rows และ pixels ได้ Drawing list เป็นของ vector file
ขนาดไฟล์ bitmap
- หารด้วย 8 เพื่อแปลงเป็น bytes แล้วหารด้วย 1000 หรือ 1024 ขึ้นอยู่กับว่าใช้ family Prefix ใด และ ระบุให้ชัดเจน เพิ่มค่า file header ถ้าโจทย์กำหนดขนาดไว้
- ภาพ $3000 \times 2000$ ที่มีความลึกสี 24 บิตต่อพิกเซล มีขนาด $1.44 \times 10^8$ บิต ซึ่งเท่ากับ 18.0 MB โดยใช้ decimal prefixes หรือ 17.2 MiB โดยใช้ binary ones ทั้งสองวิธียอมรับได้หากแสดงวิธีทำว่าใช้哪种
ภาพ pixel $100 \times 100$ มี colour depth 24 บิต. ขนาดไฟล์เป็น多少个 bits?
Difficulty 2/5 · 140 coins + a small bonus on first completion today
size $=$ ความกว้าง $\times$ height $\times$ มิติลึก $= 100 \times 100 \times 24 = 240\,000$ bits.
ตัวอย่างวิธีทำ: คำนวณขนาดภาพถ่าย แล้วคำนวณวิดีโอ
- ภาพถ่ายมีขนาด $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 แบบ bitmap ขนาดที่ไม่ถูกบีบอัดคือหนึ่ง frame $\times$ frame rate $\times$ ระยะเวลา ที่ 30 frames ต่อวินาที $1920 \times 1080$, 24 บิต: $30 \times 1920 \times 1080 \times 24 \approx 1.5 \times 10^9$ บิต ประมาณ 187 MB, ต่อวินาที นั่นคือเหตุผลที่วิดีโอต้องมีการบีบอัดเสมอ
วิดีโอที่ไม่มีการ compress มีขนาด 1920 x 1080 พิกเซล, สี 24 บิต, 30 เฟรมต่อวินาที. ONE วินาทีต้องใช้多少个 bits? ให้กำลังของ 10 เป็นสอง significant figures, เช่น 1.5e9.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
1920 x 1080 x 24 = 4.98e7 bits ต่อเฟรม, คูณด้วย 30 เฟรม = 1.5e9 bits, ประมาณ 187 MB สำหรับทุกวินาที. นั่นคือเหตุผลที่วิดีโอต้องมีการ compress เสมอ
การเปลี่ยนการตั้งค่า
- ลด image resolution: พิกเซลน้อยลง ไฟล์เล็กลงแต่รายละเอียดน้อยลง เมื่อขยายภาพจะดูเป็นบล็อกๆ เพราะแต่ละพิกเซลครอบคลุมหน้าจอมากขึ้น
- ลด colour depth: บิตต่อพิกเซลน้อยลง ไฟล์เล็กลงแต่เฉดสีเรียบจะเกิด banding ซึ่งเป็นขั้นบันไดที่เห็นได้ชัดแทนที่จะเป็น gradient
- เพิ่มขึ้น ของอย่างใดอย่างหนึ่ง: ไฟล์ใหญ่ขึ้นและมีคุณภาพดีขึ้น ตอบโดยใช้คำศัพท์ในหลักสูตรนี้ ไม่ใช่ "รูปภาพแย่ลง"
จับคู่การเปลี่ยนแปลงแต่ละรายการกับผล它对ภาพ
Difficulty 2/5 · 140 coins + a small bonus on first completion today
ตอบด้วย terminology ใน syllabus, banding และ blockiness, ไม่ใช่ "ภาพแย่ลง"
การเข้ารหัส vector graphic
- vector graphic จัดเก็บ คำสั่ง ในการวาดภาพ เป็น drawing list: รายการที่มีลำดับของ drawing objects ซึ่งเป็น primitives ทางเรขาคณิต เช่น เส้นโค้ง สี่เหลี่ยมผืนผ้า รูปหลายเหลี่ยม และวงกลม
- แต่ละ drawing object มี properties: ตำแหน่งหรือพิกัด สีเส้นและความหนา สีเติม รัศมี ฯลฯ
- เพื่อให้แสดงโปรแกรมจะ render drawing list ตามขนาดที่ต้องการ ดังนั้นจึงสเกลได้โดยไม่สูญเสียคุณภาพ ไม่สามารถอธิบายรายละเอียดพิกเซลแบบสุ่มได้ จึงไม่เหมาะสำหรับภาพถ่าย
รายการของรูปทรงและ properties ของมัน ไม่ใช่ตารางของจุด
vector logo จะเบลอเมื่อคุณขยายมันมาก
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Vectors ถูก re-render จาก instructions ในทุกขนาด, ดังนั้น они tetap sharp. It is bitmaps that blur when enlarged.
ข้อดีหลัก的一点ของ vector graphic คือ:
Difficulty 1/5 · 100 coins + a small bonus on first completion today
เพราะ being drawn from instructions, a vector scale without blur — ideal for logos and diagrams (แต่ไม่ใช่photos).
ตัวอย่างวิธีทำ: ให้เหตุผลในการเลือก
- โลโก้ต้องปรากฏบนบัตรนามocard และบนป้ายโฆษณา应选择哪个格式，为什么？[3]
- vector graphic เก็บเป็น drawing objects ที่มี properties ดังนั้นโปรแกรมจะ re-render ใหม่ตามขนาดที่ต้องการและขอบจะคมชัด
- Bitmap มีจำนวนพิกเซลคงที่ การขยายไปขนาดป้ายโฆษณาจะทำให้แต่ละพิกเซลมองเห็นได้และโลโก้จะดูเป็นบล็อกๆ
- ส่วนสำหรับภาพถ่าย? bitmap: ภาพถ่ายไม่มีรูปทรงเรขาคณิตที่จะอธิบาย ดังนั้นสีของแต่ละพิกเซลต้องจัดเก็บแยกกัน
术语ใดที่อธิบาย how a vector graphic được encode? เลือก ทั้งหมด ที่ถูกต้อง
Difficulty 2/5 · 140 coins + a small bonus on first completion today
รายการวาดภาพที่เรียงลำดับของวัตถุการวาดภาพ โดยแต่ละวัตถุมีคุณสมบัติ ความลึกของสีเป็นคำศัพท์เกี่ยวกับบิตแมพ คือจำนวนบิตต่อพิกเซล
การเลือกระหว่างทั้งสอง
| งาน | ตัวเลือก | เหตุผล |
|---|---|---|
| Photograph | bitmap | รายละเอียดระดับพิกเซลไม่สามารถอธิบายเป็นรูปทรงได้ |
| Logo, icon, ป้ายทางถนน | vector | คมชัดทุกขนาด ไฟล์เล็ก |
| Engineering drawing | vector | เรขาคณิตแม่นยำ สเกลได้พอดี |
| Painting, Texture | bitmap | รายละเอียดโทนสีที่ราบรื่นทั่วพื้นที่ |
format ใดดีกว่าสำหรับการเก็บ photo?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
A photo has complex per-pixel detail ที่ไม่สามารถ described as shapes, ดังนั้น a bitmap คือตัวเลือกที่ถูกต้อง
คะแนนที่หลุดหายไป
- ทำงานใน bits, หารด้วย 8 ครั้งเดียว และระบุว่าใช้ 1000 หรือ 1024 การผสม bits และ bytes กึ่งกลางทางมักเป็นการเสียคะแนน
- Image resolution คือพิกเซลของภาพ; screen resolution คือของจอแสดงผล ข้อสอบระบุชื่ออย่างใดอย่างหนึ่ง
- Vector คือ drawing list of objects with properties ไม่ใช่ " picture made of lines" ใช้สามคำนี้
- คำตอบ "justify" ต้องเชื่อมโยง format กับ task: ป้ายโฆษณา หรือ ภาพถ่าย การให้นิยามเพียงอย่างเดียวไม่ได้ justify อะไรเลย
คุณเข้าใจแล้ว
- a bitmap จัดเก็บสีของทุก pixel หลัง file header; image resolution คือขนาดพิกเซล, colour depth คือบิตต่อพิกเซล
- size in bits = width $\times$ height $\times$ colour depth; video เพิ่ม $\times$ frame rate $\times$ duration
- ความละเอียดต่ำทำให้เป็นบล็อก, ความลึกสีต่ำทำให้ banding; ทั้งสองทำให้ไฟล์เล็กลง
- กราฟิกแบบเวกเตอร์ คือ รายการวาดภาพ ของ วัตถุวาดภาพ ที่มี คุณสมบัติ ซึ่งถูก แสดงผล ในขนาดใดก็ได้ ทำให้สามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ แต่ไม่สามารถจัดเก็บภาพถ่ายได้