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

Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
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
 
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
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
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
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024Janet Corral
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 

Recently uploaded (20)

Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
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
 
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
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
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 ...
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 

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.