Graphics are visual images used to inform, illustrate or entertain. The <IMG> tag is used to embed graphics in HTML pages. Common image file formats include JPEG, TIFF, PNG and GIF. JPEG uses lossy compression while TIFF, PNG and GIF can use lossless compression. Lossy compression achieves smaller file sizes but reduces image quality, while lossless compression preserves a perfect copy of the original image.

1. GRAPHICS LEC 5

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.

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.