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.
Characteristics of Web Graphics Gamma • Gamma refers to the degree of contrast between the midlevel gray values of an image.
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
Graphic File Formats 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
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