Imagery and Multimedia

Himawat Aryadita S.T. M.Sc.Teknik Informatika

Universitas Brawijaya

What to Look For

Picture is worth a thousand words

• Photographs and illustrations often serve as visual lures that catch passing visitors and reel them into the content.

What to Look For

What to Look For

• Before you choose an image to include in the layout or the content of a web site, ask yourself the following questions:– Is it relevant?– Is it interesting?– Is it appealing?

What to Look For

• Legitimate Image Sources, three options for coming up with images to use in the design and content of your sites:– Do it yourself.– Purchase stock images.– Hire a professional.

BUDGET!!

Graphics as content

Graphics serve a number of purposes as elements of content—along with and complementary to text content:

Illustrations: Graphics can show you things, bringing pieces of the world into your document

Graphics as Illustrations

Graphics as Illustrations

Graphics as content

Diagrams: Quantitative graphics and process diagrams can explain concepts visually

Graphics as content

Graphics as content

Quantitative data: Numeric charts can help explain financial, scientific, or other data

Graphics as content

Integration: Graphics can combine words, numbers, and images in a comprehensive explanation

Graphics as content

Characteristics of Web Graphics

Color displays• Displays use the red-green-blue (rgb) additive color

model.• The vast majority of computer screens in use today can

display the full 16.8 million colors (24-bit or 32-bit display screen).

Screen resolution• Screen resolution refers to the number of pixels a screen

can display within a given area.

Gamma• Gamma refers to the degree of contrast between the

midlevel gray values of an image.

Characteristics of Web Graphics

Graphic File Formats

• The primary web file formats are gif (pronounced “jiff”), jpeg (“jay-peg”), and, to a much lesser extent, png (“ping”) files.

• Choosing between these file types is largely a matter of assessing:– The nature of the image (is the image a “photographic”

collection?)– The effect of various kinds of file compression on image quality– The efficiency of a compression technique in producing the

smallest file size that looks good

GIF• GIF compression scheme is best at compressing images with large

fields of homogeneous color, such as logos and diagrams. • Less efficient at compressing complicated “photographic” pictures

with many colors and complex textures

Graphic File Formats

JPEG• JPEG images are full-color images that dedicate at least 24 bits of

memory to each pixel, resulting in images that can incorporate 16.8 million colors.

• JPEG images are used extensively among photographers, artists, graphic designers and other groups

Graphic File Formats

PNG• PNG supports full-color images and can be used for

photographic images. • It uses lossless compression• Like gif, png does best with line art, text, and logos—

images that contain large areas of homogenous color with sharp transitions between colors.

Graphic File Formats

PHOTOGRAPH• The compression advantages of jpeg are not as

significant with small to medium-size images (say, up to 200 × 200 pixels).

• With images larger than 200 × 200, the compression advantages of the jpeg format become more obvious

Graphic File Formats

Background graphics

• Your use of background graphics depends entirely on your goals for your web site.

• It is foolish to use large or visually complex background textures on any page that is heavily used by busy people looking for work-related information– the long download times– amateurish aesthetics– and poor legibility

Background graphics

Background graphics

Multimedia

• A powerful aspect of computing technology is the ability to combine text, graphics, sounds, and moving images in meaningful ways.– Audio– Slide shows– Video– Animation

Multimedia