SlideShare a Scribd company logo
1 of 18
GRAPHICS LEC 5
Graphics
Graphics (from Greek γραφικός 'graphikos', 'something written'
e.g. autograph) are visual images or designs on some surface,
such as a wall, canvas, screen, paper, or stone to inform,
illustrate, or entertain. In contemporary usage it includes:
pictorial representation of data, as in computer-aided design and
manufacture, in typesetting and the graphic arts, and in
educational and recreational software. Images that are
generated by a computer are called computer graphics.
HTML Graphics
The <IMG> tag is used to embed graphics in HTML pages. They
may be embedded inside other elements such as anchors. When
embedded inside an anchor, then the user left clicks on the
image, they will go to the designated link (rather, their browser
will load a file from the designated link). The <IMG> element has
no ending tag.
IMG Attributes
• SRC="../greenhomebutton.gif" - The path and filename of the
image which specifies its location.
• ALT="Home" - This is a message displayed if the image could
not be found.
• ALIGN="TOP" - (Depreciated). Sets the image alignment. The
image is aligned to the left or right column if the value is LEFT
or RIGHT,The values, TOP, MIDDLE, BOTTOM, ABSMIDDLE, and
ABSBOTTOM, set the vertical alignment with items in the
same line.
• VSPACE=3 - (Depreciated). The space between the image and
the text above and below it in pixels.
• HSPACE=5 - (Depreciated). The space between the image and
the text to the left and right of it in pixels.
• BORDER=10 - (Depreciated). Sets a border of the specified
width in pixels to be drawn around the image.
• HEIGHT=33 - The height of the image. If this is not specified,
the image will be the size as determined by the gif file. This
can be set in pixels or a percentage of the browser window
height.
• WIDTH=115 - The width of the image. If this is not specified,
the image will be the size as determined by the gif file. This
can be set in pixels or a percentage of the browser window
width.
Raster Images
Image Types
The most common image file formats, the most
important for cameras, printing, scanning, and
internet use, are JPG, TIF, PNG, and GIF.
Image file sizes
The size of raster image files is positively correlated with the
resolution and images size (number of pixels) and the color
depth (bits per pixel). Images can be compressed in various
ways, however. A compression algorithm stores either an exact
representation or an approximation of the original image in a
smaller number of bytes that can be expanded back to its
uncompressed form with a corresponding decompression
algorithm.
Image file compression
• There are two types of image file
compression algorithms: lossless and lossy.
• Lossless compression algorithms reduce file size while preserving a
perfect copy of the original uncompressed image. Lossless compression
generally, but not always, results in larger files than lossy compression.
Lossless compression should be used to avoid accumulating stages of re-
compression when editing images.
• Lossy compression algorithms preserve a representation of the original
uncompressed image that may appear to be a perfect copy, but it is not a
perfect copy. Often lossy compression is able to achieve smaller file sizes
than lossless compression. Most lossy compression algorithms allow for
variable compression that trades image quality for file size.
PEG/JFIF
JPEG (Joint Photographic Experts Group)
is a lossy compression method; JPEG-compressed images are
usually stored in the JFIF (JPEG File Interchange Format) file
format. The JPEG/JFIF filename extension is JPG or JPEG. Nearly
every digital camera can save images in the JPEG/JFIF format,
which supports eight-bit grayscale images and 24-bit color
images (eight bits each for red, green, and blue).
TIFF
The TIFF (Tagged Image File Format) format is a flexible format
that normally saves eight bits or sixteen bits per color (red,
green, blue) for 24-bit and 48-bit totals, respectively, usually
using either the TIFF or TIF filename extension. The tagged
structure was designed to be easily extendible,
GIF
GIF (Graphics Interchange Format) is in normal use limited to an
8-bit palette, or 256 colors (while 24-bit color depth is technically
possible).GIF is most suitable for storing graphics with few colors,
such as simple diagrams, shapes, logos, and cartoon style
images,
BMP
The BMP file format (Windows bitmap) handles
graphic files within the Microsoft Windows OS.
Typically, BMP files are uncompressed, and
therefore large and lossless; their advantage is
their simple structure and wide acceptance in
Windows programs.
PNG
The PNG (Portable Network Graphics) file format was
created as a free, open-source alternative to GIF. The
PNG file format supports eight-bit paletted images
(with optional transparency for all palette colors) and
24-bit truecolor (16 million colors) or 48-bit truecolor
with and without alpha channel - while GIF supports
only 256 colors and a single transparent color.
Graphics

More Related Content

What's hot

Image file formats
Image file formatsImage file formats
Image file formatsBob Watson
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formatskatyfleetham
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formatsRuby Hooper
 
Digital Image File Formats
Digital Image File FormatsDigital Image File Formats
Digital Image File Formatsindiangarg
 
Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework Nicholas Aldous
 
File types pro forma
File types pro forma File types pro forma
File types pro forma Jack Head
 
Basic Introduction To Graphic File Formats
Basic Introduction To Graphic File FormatsBasic Introduction To Graphic File Formats
Basic Introduction To Graphic File FormatsAnkit Mishra
 
Graphic File Formats
Graphic  File  FormatsGraphic  File  Formats
Graphic File Formatsaidanbd
 
Compressed image file formats
Compressed image file formatsCompressed image file formats
Compressed image file formatsdyyddi
 
Image And Graphic Files
Image And  Graphic  FilesImage And  Graphic  Files
Image And Graphic Filesbs07csb
 
Digital graphics file formats
Digital graphics file formats  Digital graphics file formats
Digital graphics file formats Ellie Marsh
 

What's hot (19)

Image file formats
Image file formatsImage file formats
Image file formats
 
image formats
image formatsimage formats
image formats
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formats
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossary
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formats
 
Digital Image File Formats
Digital Image File FormatsDigital Image File Formats
Digital Image File Formats
 
Image Files Formats
Image Files FormatsImage Files Formats
Image Files Formats
 
Task 1
Task 1Task 1
Task 1
 
Digital graphics powerpoint homework
Digital graphics powerpoint homework Digital graphics powerpoint homework
Digital graphics powerpoint homework
 
File types pro forma
File types pro forma File types pro forma
File types pro forma
 
Basic Introduction To Graphic File Formats
Basic Introduction To Graphic File FormatsBasic Introduction To Graphic File Formats
Basic Introduction To Graphic File Formats
 
Sources of Photos and Graphics
Sources of Photos and GraphicsSources of Photos and Graphics
Sources of Photos and Graphics
 
Image file format
Image file formatImage file format
Image file format
 
Graphic File Formats
Graphic  File  FormatsGraphic  File  Formats
Graphic File Formats
 
Compressed image file formats
Compressed image file formatsCompressed image file formats
Compressed image file formats
 
print media - file formats - LO1
print media - file formats - LO1print media - file formats - LO1
print media - file formats - LO1
 
Image And Graphic Files
Image And  Graphic  FilesImage And  Graphic  Files
Image And Graphic Files
 
File Formats
File FormatsFile Formats
File Formats
 
Digital graphics file formats
Digital graphics file formats  Digital graphics file formats
Digital graphics file formats
 

Viewers also liked

Viewers also liked (20)

Web design 3
Web design 3Web design 3
Web design 3
 
Latihan Lomba Presentasi Berbasis Web (Design) 2013 | Juara 3 BPK Penabur Bin...
Latihan Lomba Presentasi Berbasis Web (Design) 2013 | Juara 3 BPK Penabur Bin...Latihan Lomba Presentasi Berbasis Web (Design) 2013 | Juara 3 BPK Penabur Bin...
Latihan Lomba Presentasi Berbasis Web (Design) 2013 | Juara 3 BPK Penabur Bin...
 
Tabicón
TabicónTabicón
Tabicón
 
Data communication
Data communicationData communication
Data communication
 
Electronic commerce
Electronic commerceElectronic commerce
Electronic commerce
 
Lec 1 DPT
Lec 1 DPTLec 1 DPT
Lec 1 DPT
 
Designing your Slides
Designing your SlidesDesigning your Slides
Designing your Slides
 
Why Peckomatic?
Why Peckomatic?Why Peckomatic?
Why Peckomatic?
 
The Effect of Emotions on Individuals' Inter-temporal Choices
The Effect of Emotions on Individuals' Inter-temporal ChoicesThe Effect of Emotions on Individuals' Inter-temporal Choices
The Effect of Emotions on Individuals' Inter-temporal Choices
 
Women's rights in islam
Women's rights in islamWomen's rights in islam
Women's rights in islam
 
graphic materials
graphic materialsgraphic materials
graphic materials
 
Ip
IpIp
Ip
 
Motion Pictures: Historical perspective
Motion Pictures: Historical perspectiveMotion Pictures: Historical perspective
Motion Pictures: Historical perspective
 
Cantor cristão nº 60
Cantor cristão nº   60Cantor cristão nº   60
Cantor cristão nº 60
 
Graphic materials
Graphic materialsGraphic materials
Graphic materials
 
Nightingale influence
Nightingale influenceNightingale influence
Nightingale influence
 
Still Pictures PowerPoint
Still Pictures PowerPointStill Pictures PowerPoint
Still Pictures PowerPoint
 
Skolan i interaktionssamhället
Skolan i interaktionssamhälletSkolan i interaktionssamhället
Skolan i interaktionssamhället
 
Ed tech report (graphic materials)
Ed tech report (graphic materials)Ed tech report (graphic materials)
Ed tech report (graphic materials)
 
Práctica 1: Ranganathan - Beatriz Rodríguez Bellmunt
Práctica 1: Ranganathan - Beatriz Rodríguez BellmuntPráctica 1: Ranganathan - Beatriz Rodríguez Bellmunt
Práctica 1: Ranganathan - Beatriz Rodríguez Bellmunt
 

Similar to Graphics

Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1benstoraro
 
Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1benstoraro
 
All About Graphics
All About GraphicsAll About Graphics
All About Graphicsmegweb
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossaryAmaanGDesign
 
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYIMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYMarkCesarVillanueva
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossaryhalo4robo
 
Technical File Presentation Version 2
Technical File Presentation Version 2Technical File Presentation Version 2
Technical File Presentation Version 2WildOakForrest
 
Technical Files Presentation
Technical Files PresentationTechnical Files Presentation
Technical Files PresentationWildOakForrest
 
Week 6 Task File Formats
Week 6 Task   File FormatsWeek 6 Task   File Formats
Week 6 Task File Formatsguest2cf876
 
Imagepresentation
ImagepresentationImagepresentation
ImagepresentationMill
 
Inserting imagesin html
Inserting imagesin htmlInserting imagesin html
Inserting imagesin htmlnobel mujuji
 
Unit 78: Task 3 Technical file
Unit 78: Task 3 Technical fileUnit 78: Task 3 Technical file
Unit 78: Task 3 Technical fileConnahTilley
 
Different types of graphics formats
Different types of graphics formatsDifferent types of graphics formats
Different types of graphics formatssanaan umar khan
 

Similar to Graphics (20)

Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1
 
Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1
 
Bmsc1103
Bmsc1103Bmsc1103
Bmsc1103
 
All About Graphics
All About GraphicsAll About Graphics
All About Graphics
 
Webquest
WebquestWebquest
Webquest
 
Digitsl imsging
Digitsl imsgingDigitsl imsging
Digitsl imsging
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossary
 
File types
File typesFile types
File types
 
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGYIMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
IMAGE FILE FORMAT IN EMPOWERMENT TECHNOLOGY
 
Technical glossary
Technical glossaryTechnical glossary
Technical glossary
 
Technical File Presentation Version 2
Technical File Presentation Version 2Technical File Presentation Version 2
Technical File Presentation Version 2
 
Technical Files Presentation
Technical Files PresentationTechnical Files Presentation
Technical Files Presentation
 
madhu
madhumadhu
madhu
 
Week 6 Task File Formats
Week 6 Task   File FormatsWeek 6 Task   File Formats
Week 6 Task File Formats
 
Html graphics
Html graphicsHtml graphics
Html graphics
 
Imagepresentation
ImagepresentationImagepresentation
Imagepresentation
 
Inserting imagesin html
Inserting imagesin htmlInserting imagesin html
Inserting imagesin html
 
Unit 78: Task 3 Technical file
Unit 78: Task 3 Technical fileUnit 78: Task 3 Technical file
Unit 78: Task 3 Technical file
 
Image Optimization
Image OptimizationImage Optimization
Image Optimization
 
Different types of graphics formats
Different types of graphics formatsDifferent types of graphics formats
Different types of graphics formats
 

More from Christian Technical Training Centre (6)

Photoshop cs5 shortcut_keys
Photoshop cs5 shortcut_keysPhotoshop cs5 shortcut_keys
Photoshop cs5 shortcut_keys
 
Introduction chapter 1,2
Introduction chapter 1,2Introduction chapter 1,2
Introduction chapter 1,2
 
Networks
NetworksNetworks
Networks
 
Electronic commerce
Electronic commerceElectronic commerce
Electronic commerce
 
A history of html
A history of htmlA history of html
A history of html
 
The osi model
The osi modelThe osi model
The osi model
 

Recently uploaded

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfakmcokerachita
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 

Recently uploaded (20)

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdf
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 

Graphics

  • 2. Graphics Graphics (from Greek γραφικός 'graphikos', 'something written' e.g. autograph) are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate, or entertain. In contemporary usage it includes: pictorial representation of data, as in computer-aided design and manufacture, in typesetting and the graphic arts, and in educational and recreational software. Images that are generated by a computer are called computer graphics.
  • 3. HTML Graphics The <IMG> tag is used to embed graphics in HTML pages. They may be embedded inside other elements such as anchors. When embedded inside an anchor, then the user left clicks on the image, they will go to the designated link (rather, their browser will load a file from the designated link). The <IMG> element has no ending tag.
  • 4. IMG Attributes • SRC="../greenhomebutton.gif" - The path and filename of the image which specifies its location. • ALT="Home" - This is a message displayed if the image could not be found. • ALIGN="TOP" - (Depreciated). Sets the image alignment. The image is aligned to the left or right column if the value is LEFT or RIGHT,The values, TOP, MIDDLE, BOTTOM, ABSMIDDLE, and ABSBOTTOM, set the vertical alignment with items in the same line. • VSPACE=3 - (Depreciated). The space between the image and the text above and below it in pixels. • HSPACE=5 - (Depreciated). The space between the image and the text to the left and right of it in pixels.
  • 5. • BORDER=10 - (Depreciated). Sets a border of the specified width in pixels to be drawn around the image. • HEIGHT=33 - The height of the image. If this is not specified, the image will be the size as determined by the gif file. This can be set in pixels or a percentage of the browser window height. • WIDTH=115 - The width of the image. If this is not specified, the image will be the size as determined by the gif file. This can be set in pixels or a percentage of the browser window width.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Raster Images Image Types The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
  • 11. Image file sizes The size of raster image files is positively correlated with the resolution and images size (number of pixels) and the color depth (bits per pixel). Images can be compressed in various ways, however. A compression algorithm stores either an exact representation or an approximation of the original image in a smaller number of bytes that can be expanded back to its uncompressed form with a corresponding decompression algorithm.
  • 12. Image file compression • There are two types of image file compression algorithms: lossless and lossy. • Lossless compression algorithms reduce file size while preserving a perfect copy of the original uncompressed image. Lossless compression generally, but not always, results in larger files than lossy compression. Lossless compression should be used to avoid accumulating stages of re- compression when editing images. • Lossy compression algorithms preserve a representation of the original uncompressed image that may appear to be a perfect copy, but it is not a perfect copy. Often lossy compression is able to achieve smaller file sizes than lossless compression. Most lossy compression algorithms allow for variable compression that trades image quality for file size.
  • 13. PEG/JFIF JPEG (Joint Photographic Experts Group) is a lossy compression method; JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format. The JPEG/JFIF filename extension is JPG or JPEG. Nearly every digital camera can save images in the JPEG/JFIF format, which supports eight-bit grayscale images and 24-bit color images (eight bits each for red, green, and blue).
  • 14. TIFF The TIFF (Tagged Image File Format) format is a flexible format that normally saves eight bits or sixteen bits per color (red, green, blue) for 24-bit and 48-bit totals, respectively, usually using either the TIFF or TIF filename extension. The tagged structure was designed to be easily extendible,
  • 15. GIF GIF (Graphics Interchange Format) is in normal use limited to an 8-bit palette, or 256 colors (while 24-bit color depth is technically possible).GIF is most suitable for storing graphics with few colors, such as simple diagrams, shapes, logos, and cartoon style images,
  • 16. BMP The BMP file format (Windows bitmap) handles graphic files within the Microsoft Windows OS. Typically, BMP files are uncompressed, and therefore large and lossless; their advantage is their simple structure and wide acceptance in Windows programs.
  • 17. PNG The PNG (Portable Network Graphics) file format was created as a free, open-source alternative to GIF. The PNG file format supports eight-bit paletted images (with optional transparency for all palette colors) and 24-bit truecolor (16 million colors) or 48-bit truecolor with and without alpha channel - while GIF supports only 256 colors and a single transparent color.