Images as Links
Download
Report
Transcript Images as Links
Graphic images for computers
• Stored in files of binary data - Binary blobs
• Software has to know the binary format to decode the file
and render an image.
• There are well over binary 50 formats for computer graphics:
Some common ones:
• .bmp (Bitmap -- Native Windows format)
• .pict (Native Macintosh format)
• .psd (Photoshop's proprietary format)
• .tiff (Another common format for graphic editing)
• .gif
(Used on the Web.)
• .jpeg (Used on the Web.)
Common software used to render computer
graphics
• Commercial grade graphic editing software
– Adobe Photoshop or Illustrator (Expensive)
• Freeware/Shareware graphic editing software
•Web browsers
• View only -- can't edit graphics
• Images don't need to be embedded in Web pages
-- open raw image file with browser
• Only image formats used on Web
-- GIF and JPEG (also PNG)
Browser rendition
Photoshop rendition
Pixel Map -- Store one color for each pixel
Options:
• Use full RGB spectrum -- 3 bytes per pixel
• Use smaller color palette
-- index the available colors -- store index number
Raw pixel maps
• The bigger the palette -- the more memory required
for pixel map
• Comparisons below
• An image 500x400 pixels (roughly one fourth the
size of a computer monitor display)
• 200,000 pixels in pixel map
GIF (Graphics Interchange Format)
Main strategy
• Use small color palette -- max 256 colors (8 bit)
• Size of color palette for a given image is fixed, but
can be comprised of any of the RGB colors
• Non-Lossy compression -- low compression of pixel
map when stored in binary GIF file
Examples of GIF palettes
4 bit
4 bit
8 bit
1 bit
2 bits
grayscale bluescale bluescale
• GIFS are best for low-color icon type graphics
• Most prevalent format used on Web -- by far
• Main Reasons
• Small file sizes
• Flexibility
Transparent GIF
Animated GIF –
The background is not transparent for this one
just like a cartoon, a series of graphics
JPEG (Joint Photographic Experts Group)
• Full RGB spectrum
• Good for photographs
• But big file sizes unless high compression is used
• Superior Compression Algorithm -- But lossy
Left: Medium quality
Right: Low quality
Embedding Images in Web pages
• Image (img) element
<img src="URL" />
• src stands for source
• URL can be relative or absolute
• Most often, images used in a page are stored locally,
so relative URLs are used.
• img element is inline by default
Image element
• left and right alignment over-ride inline behavior of
images, causing image to float on page -- text flows around
image
<----------- distorted
<----------- distorted
<----------- doubled in size
(preserved aspect ratio)
<----------- Original Size
The width and height attributes should
always be used, even if the image is not resized.
• Remember, browsers read HTML file, make secondary
requests (http keep-alive) to server for images.
• If width and height are not specified, browser has to
wait until it receives the images before continuing page layout.
• If width and height are specified, browser can continue
with layout, drawing empty boxes for images before they
arrive.
• In general, this helps pages load more quickly.
Background images
• Not set with the img element
• Set using background attribute of body element
<body background="path/to/mybg.gif">
• Background images are usually small and are tiled to form background
for whole page.
• If you specify a background and bgcolor the
background image is displayed, not the color.
<body background="URL" bgcolor="red">
Some examples of background images.
You can find tons of graphics like these in online graphics
mage libraries. Many, if not most, are gnarly.
Images as Links
• Simply put the image as content of the anchor element
<a href="URL(page to link to)">
<img src="URL(image)" border="0"/>
</a>
• If you do not specify border="0" , some browsers will
draw a colored border around the image corresponding to the
underline given to links.
• The color of the border will be that of unvisited or visited
links, depending upon the status of the image link.
The overhead of a Web page.
• This refers to the total amount of data that a Web
browser must download in order to build the page.
-The HTML file itself
- The graphics
- Other resources like Flash animations
• Many studies have shown that slow load times
cause people to surf away from a page.
• Keeping the page overhead as low as possible is
clearly best. A page with over 100K of overhead is
starting to get beefy.
One-pixel (1x1) images
Basically invisible in Web pages
• Used for Web Beacons for tracking
• place in lots of pages
• image source is from third-party server
• The secondary requests to the third-party servers
can track your surfing using cookies.
• Ad banners can be used in the same way.