Vector vs Bitmap

PooMan UK

Just call me Nick
Guru
VIP
Local time
4:01 PM
Messages
2,724
Location
St Clears, Wales
I made this quite a while back but here's a quick guide to getting your head around the different image types out there.

Its hard to explain graphics software without first establishing an understanding of the differences between the two major graphic types: bitmap and vector images. This is an important lesson and often a tough one to grasp. If you work with graphics at all, it's bound to come up, so it's an important concept to understand. The most common type is the bitmap image.

Bitmap images (also known as raster images) are made up of pixels in a grid. Pixels are picture elements; tiny dots of individual color that make up what you see on your screen. All these tiny dots of color come together to form the images you see.
To illustrate this. I’ve laid out a picture in it’s different elements. The first picture shows the Vector image with its colour. The image in the middle shows the vector in wireframe (or with no colour) and how it was originally drawn. The image on the right shows it converted to its bitmap state.
When I originally drew this crest it would have been very difficult and near impossible to just use a bitmap imaging program like photoshop etc. which is why I vectorised the image using CorelDRAW so that I could manipulate it freely. (resize, change curves, re-colour etc.)
Bitmap images are resolution dependent. Resolution refers to the number of pixels in an image and is usually stated as dpi (dots per inch) or ppi (pixels per inch). Bitmap images are displayed on your computer screen at screen resolution. However, when printing bitmaps, your printer needs much more data than a monitor. In order to render a bitmap image accurately. If you've ever wondered why your 300 dpi scanned image appears so much larger on your monitor, this is why.

vector_bitmap1.jpg


Because bitmaps are resolution dependent, it's difficult to increase or decrease their size without sacrificing a degree of image quality. When you reduce the size of a bitmap image through your software's resample or resize command, you must discard pixels. When you increase the size of a bitmap image through your software's resample or resize command, the software has to create new pixels. When creating pixels, the software must estimate the color values of the new pixels based on the surrounding pixels. This process is called interpolation.

You may have noticed, when specifically talking about resizing images "through your software's resample or resize command" You must make the distinction between the method of resizing versus zooming in and out, or dragging the edges of your images in a page layout program to resize it. This type of resizing is more accurately called scaling. Scaling an image does not effect the image permanently. In other words, it does not change the number of pixels in the image. However, if you scale a bitmap image to a larger size in your page layout software, you are going to see a definite jagged appearance. Even if you don't see it on your screen, it will be very apparent in the printed image. Scaling a bitmap image to a smaller size doesn't have any effect; in fact, when you do this you are effectively increasing the ppi of the image so that it will print clearer.

Common bitmap formats include:
• BMP
• GIF
• JPEG, JPG
• PNG
• PICT (Macintosh)
• PCX
• TIFF
• PSD (Adobe Photoshop)

Popular bitmap editing programs are:
• Microsoft Paint
• Adobe Photoshop
• Corel Photo-Paint
• Corel Paint Shop Pro
• GIMP
All scanned images are bitmaps, and all images from digital cameras are bitmaps.
Converting between bitmap formats is generally as simple as opening the image to be converted and using your software's Save As... command to save it in any other bitmap format supported by your software.
Bitmap images in general do not inherently support transparency. A couple of specific formats--namely GIF and PNG--support transparency. In addition, most image editing programs support transparency, but only when the image is saved in the software program's native format. A common misconception is that the transparent areas in an image will remain transparent when an image is saved to another format or copied and pasted into another program. That just doesn't work; however, there are techniques for hiding or blocking out areas in a bitmap that you intend to use in other software.

Key Points About Bitmap Images:
• pixels in a grid
• resolution dependent
• resizing reduces quality
• easily converted
• restricted to rectangle
• minimal support for transparency

Although not as commonly used as bitmap graphics, vector graphics have a lot of virtues.
Vector images are made up of many individual, scalable objects. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality. Objects may consist of lines, curves, and shapes with editable attributes such as color, fill, and outline. Changing the attributes of a vector object does not effect the object itself. You can freely change any number of object attributes without destroying the basic object. An object can be modified not only by changing its attributes, but also by shaping and transforming it using nodes and control handles.


Because they're scalable, vector-based images are resolution independent. You can increase and decrease the size of vector images to any degree and your lines will remain crisp and sharp, both on screen and in print. Fonts are a type of vector object.
Another advantage of vector images is that they're not restricted to a rectangular shape like bitmaps. Vector objects can be placed over other objects, and the object below will show through. See the example images on this page. The vector circle and bitmap circle appear to be exactly the same when seen on a white background. But when you place the bitmap circle over another color, it has a rectangular box around it, from the white pixels in the image.
Vector images have many advantages, but the primary disadvantage is that they're unsuitable for producing photo-realistic imagery. Vector images are usually made up of solid areas of color or gradients, but they cannot depict the continuous subtle tones of a photograph. That's why most of the vector images you see tend to have a cartoon-like appearance. Even so, vector graphics are continually becoming more advanced, and we can do a lot more with vector drawings now than we could a decade ago. Today's vector tools allow you to apply bitmapped textures to objects giving them a photo-realistic appearance, and you can now create soft blends, transparency, and shading that once was difficult to achieve in vector drawing programs.
Vector images primarily originate from software. You can't scan an image and save it as a vector file without using special conversion software. On the other hand, vector images can, quite easily, be converted to bitmaps. This process is called rasterizing. When you convert a vector image to a bitmap, you can specify the output resolution of the final bitmap for whatever size you need. It's always important to save a copy of your original vector artwork in its native format before converting it to a bitmap; once it has been converted to a bitmap, the image loses all the wonderful qualities it had in its vector state. If you convert a vector to a bitmap at a size of 100 by 100 pixels and then decide you need the image to be larger, you'll need to go back to the original vector file and export the image again. Also keep in mind that opening a vector image in a bitmap editing program usually destroys the vector qualities of the image and converts it to raster data.
The most common reason for wanting to convert a vector to a bitmap would be for use on the Web. Due to the nature of vector images, they are best converted to GIF, PNG or JPG format for use on the Web.

Common vector formats include:
• AI (Adobe Illustrator)
• CDR (CorelDRAW)
• CGM Computer Graphics Metafile
• DXF AutoCAD
• WMF Windows Metafile

Popular vector drawing programs are:
• Adobe Illustrator
• CorelDRAW
• Xara Xtreme
• Serif DrawPlus

Metafiles?

Metafiles are graphics that contain both raster and vector data. For example, a vector image that contains an object which has a bitmap pattern applied as a fill, would be a metafile. The object is still a vector, but the fill attribute consists of bitmap data. The UEA example below shows how the two can co-exist for the design stage before finally converting to a bitmap for web use. I designed this using CorelDRAW to create the Vector then used CorelPHOTOpaint to do all the fancy stuff and create the finished product.

vector_bitmap2.jpg


Key Points About Vector Images
• scalable
• resolution independent
• no background
• cartoon-like
• inappropriate for photo-realistic images
• metafiles contain both raster and vector data

Well I hope this helps explain it a bit better without getting to technical ... enjoy ... ;)
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Self Built
OS
Windows 7 Ultimate 64bit
CPU
AMD Phenom Quad core 9950 black edition
Motherboard
Gigabyte
Memory
16Gb
Graphics Card(s)
2x XFX Radeon 5850
Sound Card
PCI Express X-Fi Titanium / Logitech G35
Monitor(s) Displays
2x HP 2410i
Screen Resolution
1920x1080
Hard Drives
2x 500Gb Seagate
1x 300Gb Seagate
1x 1Tb Seagate
2x 1Tb Hitatchi
PSU
Jean Tech Storm 700W
Case
Cooler Master COSMOS S
Cooling
Akasa Evo Blue Pro
Keyboard
Logitech G15
Mouse
Mad Catz M.M.O. 7
Internet Speed
12mb
Uhm.. No replys yet? :D Well, This is very informative for new users, I guess (already knowing about this... :devil:) ;)
Nice work!
 

My Computer

Computer Manufacturer/Model Number
HP Pavilion Phoenix H9-1060sc
OS
Windows 8 Pro 64-Bit
CPU
Intel Core i7 (2nd Gen) 2600 / 3.4 GHz
Motherboard
IPISB-CH2 (Chicago)
Memory
16 GB
Graphics Card(s)
Nvidia GeForce GTX 580
Sound Card
Integrated IDT 92HD89E Audio
Monitor(s) Displays
Samsung 23" SyncMaster SA750D
Screen Resolution
1920 x 1080
Hard Drives
120 GB Solid State & 2 TB 7200 RPM 3.0 Gb/sec
PSU
Internal 600 Watt (100V-240V)
Case
HP Tower: Height: 41.3 cm Width: 17.3 cm
Keyboard
HP Wireless, Shipped with Computer
Mouse
Came with Keyboard as bundle
Internet Speed
Never Enough aka 8 mb/s
Thanks for the nice comment Daniel :)
This post was more of a tutorial request for a couple of members that wanted to know the difference between a bitmaps and vectors, hence the lack of reply's ;)
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Self Built
OS
Windows 7 Ultimate 64bit
CPU
AMD Phenom Quad core 9950 black edition
Motherboard
Gigabyte
Memory
16Gb
Graphics Card(s)
2x XFX Radeon 5850
Sound Card
PCI Express X-Fi Titanium / Logitech G35
Monitor(s) Displays
2x HP 2410i
Screen Resolution
1920x1080
Hard Drives
2x 500Gb Seagate
1x 300Gb Seagate
1x 1Tb Seagate
2x 1Tb Hitatchi
PSU
Jean Tech Storm 700W
Case
Cooler Master COSMOS S
Cooling
Akasa Evo Blue Pro
Keyboard
Logitech G15
Mouse
Mad Catz M.M.O. 7
Internet Speed
12mb
Wait. That was pretty good. But could you post info about the difference between different bitmap formats? Which is better? PNG OR BMP? Also what do you think about Paint.NET?
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Dell Vostro 400/Dell XPS 8700(Slightly Customized for me by Dell)/Toshiba Satellite T135
OS
Windows 7 Professional 32-bit/Windows 8 64-bit/Win7 Pro64-bit
CPU
Intel Core 2 Quad Q6600/Intel Core i7 4790/Intel Pentium
Memory
2GB/16GB/4GB
Graphics Card(s)
Intel G33/G31 Express(Vostro)/NVIDIA GeForce GTX 745(XPS)
Monitor(s) Displays
HP 2009m(Vostro)/ViewSonic VX2250wm-LED(XPS)
Screen Resolution
1600x900(Vostro)/1920x1080(XPS)
Hard Drives
Seagate ST3160815AS(Vostro)/Western Digital Blue(Satellite)
External:
Western Digital My Passport 0748
Samsung HM121HC
Keyboard
Dell L100)(Vostro)/Dell KB2133p(XPS)
Mouse
Dell M-UAV-DEL8(XPS)
Internet Speed
100 Mbit/s(Only when IPTV is plugged out)
Antivirus
Avast, Malwarebytes PRO
Browser
Internet Explorer 11
Other Info
Note: Names with slashes between two different parts mean that the left is my old desktop and the right is my old laptop and the middle is my new desktop.(Unless specified)
Ping is horrible for servers overseas in US and Europe.
New laptop:LG Gram(Not available in US) Processor:Intel Core i3 4th Gen Ultra Low Power RAM:4GB Hard Drive:SK Hynix OEM MSATA or M.2 Graphics:Intel HD
And the vector examples should be actual vector images if it is supported. Is there any vector cameras?
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Dell Vostro 400/Dell XPS 8700(Slightly Customized for me by Dell)/Toshiba Satellite T135
OS
Windows 7 Professional 32-bit/Windows 8 64-bit/Win7 Pro64-bit
CPU
Intel Core 2 Quad Q6600/Intel Core i7 4790/Intel Pentium
Memory
2GB/16GB/4GB
Graphics Card(s)
Intel G33/G31 Express(Vostro)/NVIDIA GeForce GTX 745(XPS)
Monitor(s) Displays
HP 2009m(Vostro)/ViewSonic VX2250wm-LED(XPS)
Screen Resolution
1600x900(Vostro)/1920x1080(XPS)
Hard Drives
Seagate ST3160815AS(Vostro)/Western Digital Blue(Satellite)
External:
Western Digital My Passport 0748
Samsung HM121HC
Keyboard
Dell L100)(Vostro)/Dell KB2133p(XPS)
Mouse
Dell M-UAV-DEL8(XPS)
Internet Speed
100 Mbit/s(Only when IPTV is plugged out)
Antivirus
Avast, Malwarebytes PRO
Browser
Internet Explorer 11
Other Info
Note: Names with slashes between two different parts mean that the left is my old desktop and the right is my old laptop and the middle is my new desktop.(Unless specified)
Ping is horrible for servers overseas in US and Europe.
New laptop:LG Gram(Not available in US) Processor:Intel Core i3 4th Gen Ultra Low Power RAM:4GB Hard Drive:SK Hynix OEM MSATA or M.2 Graphics:Intel HD
PooMan UK I'm ashame to say this is the first time I have seen your Tutorial.
That is a lot of great information.
What vector drawing program do you recommend for beginners?
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Home made Desktop
OS
Windows 10 Pro. 64/ version 1709 Windows 7 Pro/64
CPU
Intel i7-6800K @ 4.3
Motherboard
ASUS X-99 Deluxe II
Memory
Corsair Platinum 16 gig @2400
Graphics Card(s)
EVGA GTX 1070 OC
Monitor(s) Displays
Asus 27" LED LCD/VE278Q
Screen Resolution
1920-1080 or 1280-720 HDMI
Hard Drives
INTEL SSD 730-240 Gb Sata 3.0/
PSU
EVGA Platium 1200W
Case
Phanteks Luxe Tempered Glass 8 fans/ one radiator
Cooling
XSPC/ Water Cooled CPU
Keyboard
Das 4 Professional
Mouse
Logitech M705/MX Anywhere 2-S
Internet Speed
100 mbits
Antivirus
Microsoft Security Essentials/ Malwarebytes Premium 3.0/ SAS
Browser
I.E. 11 default/Firefox/ ISP Time Warner Cable/Spectrum
Other Info
LG BluRay Burner/
Sound system-KLipsch-THX/
Icy Dock ssd Hot Swap bays.

My Computer

Computer type
Laptop
Computer Manufacturer/Model Number
Hewlett-Packard/G62-107SA Notebook
OS
Microsoft Windows 7 Home Premium 64-bit Service Pack 1
CPU
Intel(R) Core(TM) i3 CPU M 330 @ 2.13GHz
Motherboard
Hewlett-Packard 1425
Memory
8 GB DDR3
Graphics Card(s)
Intel(R) HD Graphics
Sound Card
Realtek High Definition Audio
Monitor(s) Displays
Builtin
Screen Resolution
1366 x 768 x 32 bits (4294967296 colors) @ 60 Hz
Hard Drives
250 GB SATA Hard Disk Drive 7200 rpm
2TB Seagate GoFlex USB 2 Drive
1TB Iomega Prestige USB 2 Drive
1.5TB Iomega Prestige USB 2 Drive (Samsung)
2TB WD MyBook Live NAS.
Mouse
Logitech Anywhere MX
Internet Speed
152 Mbs download 10 Mbs upload
Antivirus
Norton 360
Browser
Chrome
Thank you kado897
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Home made Desktop
OS
Windows 10 Pro. 64/ version 1709 Windows 7 Pro/64
CPU
Intel i7-6800K @ 4.3
Motherboard
ASUS X-99 Deluxe II
Memory
Corsair Platinum 16 gig @2400
Graphics Card(s)
EVGA GTX 1070 OC
Monitor(s) Displays
Asus 27" LED LCD/VE278Q
Screen Resolution
1920-1080 or 1280-720 HDMI
Hard Drives
INTEL SSD 730-240 Gb Sata 3.0/
PSU
EVGA Platium 1200W
Case
Phanteks Luxe Tempered Glass 8 fans/ one radiator
Cooling
XSPC/ Water Cooled CPU
Keyboard
Das 4 Professional
Mouse
Logitech M705/MX Anywhere 2-S
Internet Speed
100 mbits
Antivirus
Microsoft Security Essentials/ Malwarebytes Premium 3.0/ SAS
Browser
I.E. 11 default/Firefox/ ISP Time Warner Cable/Spectrum
Other Info
LG BluRay Burner/
Sound system-KLipsch-THX/
Icy Dock ssd Hot Swap bays.
Wait. That was pretty good. But could you post info about the difference between different bitmap formats? Which is better? PNG OR BMP? Also what do you think about Paint.NET?

I think Paint.Net is quite underrated because with its many plugins it is a very good graphics program ( I use it as much as CS6) so give it a go Computer0304 :)

03us.jpg
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Home Built
OS
Win 7 Pro x64, Win 10 Pro x64, Linux Light x86
CPU
Core i7 3770K
Motherboard
Gigabyte GA-Z77P-D3
Memory
Crucial Ballistix Sport 8GB
Graphics Card(s)
ASUS GeForce GTX 650 Ti
Sound Card
On board
Monitor(s) Displays
ASUS 22 W/S
Screen Resolution
1920 x 1080
Hard Drives
Intel 320 Series SSD, WD Caviar Black 1TB
PSU
Corsair CX 750w
Case
Black Night
Cooling
120mm fans front/back, Coolermaster Hyper 212 Evo
Keyboard
Razer Blackwidow Expert 2013 Mechanical Keyboard
Mouse
Logitech G300 Gaming Mouse
Internet Speed
20mb Unlimited
Antivirus
ZA Antivirus + Firewall
Browser
Cyberfox
Other Info
Powered USB Hub, External Drives 3 x 1TB, Phone Dock.
PG images support transparency BMP do not.
 

My Computer

Computer type
Laptop
Computer Manufacturer/Model Number
Hewlett-Packard/G62-107SA Notebook
OS
Microsoft Windows 7 Home Premium 64-bit Service Pack 1
CPU
Intel(R) Core(TM) i3 CPU M 330 @ 2.13GHz
Motherboard
Hewlett-Packard 1425
Memory
8 GB DDR3
Graphics Card(s)
Intel(R) HD Graphics
Sound Card
Realtek High Definition Audio
Monitor(s) Displays
Builtin
Screen Resolution
1366 x 768 x 32 bits (4294967296 colors) @ 60 Hz
Hard Drives
250 GB SATA Hard Disk Drive 7200 rpm
2TB Seagate GoFlex USB 2 Drive
1TB Iomega Prestige USB 2 Drive
1.5TB Iomega Prestige USB 2 Drive (Samsung)
2TB WD MyBook Live NAS.
Mouse
Logitech Anywhere MX
Internet Speed
152 Mbs download 10 Mbs upload
Antivirus
Norton 360
Browser
Chrome
Ok,i alredy have it installed on my laptop.
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Dell Vostro 400/Dell XPS 8700(Slightly Customized for me by Dell)/Toshiba Satellite T135
OS
Windows 7 Professional 32-bit/Windows 8 64-bit/Win7 Pro64-bit
CPU
Intel Core 2 Quad Q6600/Intel Core i7 4790/Intel Pentium
Memory
2GB/16GB/4GB
Graphics Card(s)
Intel G33/G31 Express(Vostro)/NVIDIA GeForce GTX 745(XPS)
Monitor(s) Displays
HP 2009m(Vostro)/ViewSonic VX2250wm-LED(XPS)
Screen Resolution
1600x900(Vostro)/1920x1080(XPS)
Hard Drives
Seagate ST3160815AS(Vostro)/Western Digital Blue(Satellite)
External:
Western Digital My Passport 0748
Samsung HM121HC
Keyboard
Dell L100)(Vostro)/Dell KB2133p(XPS)
Mouse
Dell M-UAV-DEL8(XPS)
Internet Speed
100 Mbit/s(Only when IPTV is plugged out)
Antivirus
Avast, Malwarebytes PRO
Browser
Internet Explorer 11
Other Info
Note: Names with slashes between two different parts mean that the left is my old desktop and the right is my old laptop and the middle is my new desktop.(Unless specified)
Ping is horrible for servers overseas in US and Europe.
New laptop:LG Gram(Not available in US) Processor:Intel Core i3 4th Gen Ultra Low Power RAM:4GB Hard Drive:SK Hynix OEM MSATA or M.2 Graphics:Intel HD
And the vector examples should be actual vector images if it is supported. Is there any vector cameras?

Soz pal but you can't show images of vectors via the net as all the images we see are bitmaps, (text/fonts are about the only thing that are vectors) in other words if I created a vector image i would then have to export it as a png, jpg (bitmap image) etc. the only other way is to save it as a vector in its native format and then share it so you could download it.
and sadly no there isn't a vector camera.

PooMan UK I'm ashame to say this is the first time I have seen your Tutorial.
That is a lot of great information.
What vector drawing program do you recommend for beginners?

thanks pal ... there are 2 free programs that are pretty easy to use and great for beginners

Free Graphic Design Software ? DrawPlus Starter Edition from Serif

Inkscape. Draw Freely.
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Self Built
OS
Windows 7 Ultimate 64bit
CPU
AMD Phenom Quad core 9950 black edition
Motherboard
Gigabyte
Memory
16Gb
Graphics Card(s)
2x XFX Radeon 5850
Sound Card
PCI Express X-Fi Titanium / Logitech G35
Monitor(s) Displays
2x HP 2410i
Screen Resolution
1920x1080
Hard Drives
2x 500Gb Seagate
1x 300Gb Seagate
1x 1Tb Seagate
2x 1Tb Hitatchi
PSU
Jean Tech Storm 700W
Case
Cooler Master COSMOS S
Cooling
Akasa Evo Blue Pro
Keyboard
Logitech G15
Mouse
Mad Catz M.M.O. 7
Internet Speed
12mb
Hi Nick :)
... thank you for your tutorial. Filling in the huge blanks about PNG, BMP, vectors, bitmaps etc :shock:

I have been dabbling with Paint.NET to create custom icons, a lot of experimenting to create decent looking 16x16 icons. 128x128 images don't always reduce to-well to 16x16.
 

My Computer

Computer type
PC/Desktop
Computer Manufacturer/Model Number
Toshiba, Lenovo (laptops) + 4 rigs
OS
XP Pro (x86) | 7 HP (x86) & (x64) | 7 Pro (x64)
Back
Top