about graphics-on-web
TRANSCRIPT
![Page 1: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/1.jpg)
About Graphics on Web
![Page 2: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/2.jpg)
Graphics
Good design is clear thinking made visible. Good diagrams and interesting illustrations are visually arresting
and create documents that are distinct and memorable.
![Page 3: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/3.jpg)
The Role of Web Graphics
Graphics as a Content Illustrations: Graphics can show you things, bringing pieces of the
world into your document Diagrams: Quantitative graphics and process diagrams can explain
concepts visually Quantitative data: Numeric charts can help explain financial,
scientific, or other data Analysis and causality: Graphics can help take apart a topic or show
what caused it Integration: Graphics can combine words, numbers, and images in a
comprehensive explanation
![Page 4: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/4.jpg)
Characteristics of Web Graphics
Color displays Screen Resolution Gamma Graphics and bandwidth
![Page 5: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/5.jpg)
Graphic File Formats The primary web file formats are GIF (pronounced “jiff”), JPEG (“jay-peg”), and,
to a much lesser extent, PNG (“ping”) files. GIF Graphics JPEG Graphics PNG Graphics
![Page 6: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/6.jpg)
GIF Graphics
Many images on the web are in GIF format, and virtually all web browsers that support graphics can display GIF files. GIF files are 8-bit graphics and thus can only accommodate 256 colors.
GIF file compression
![Page 7: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/7.jpg)
GIF Graphics
Dithering : GIF images can contain no more than 256 colors. The process of reducing many colors to 256 or fewer is called dithering.
![Page 8: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/8.jpg)
Improving GIF compression
Interlaced GIF Transparent GIF
![Page 9: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/9.jpg)
Advantages of GIF files
GIF is the most widely supported graphics format on the web GIFs of diagrammatic images look better than JPEGs GIF supports transparency and interlacing
![Page 10: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/10.jpg)
JPEG Graphics 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, medical imaging specialists, art historians, and other groups for whom image quality and color fidelity is important.
![Page 11: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/11.jpg)
Advantages of JPEG images
JPEG achieves huge compression ratios, which mean faster downloads
JPEG produces excellent results for most photographs and complex images
JPEG supports full-color (24-bit, true-color) images
![Page 12: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/12.jpg)
PNG Graphics
PNG is an image format developed by a consortium of graphic software developers as a nonproprietary alternative to the GIF image format.
PNG graphics were designed specifically for use on web pages, and they offer a range of attractive features, including a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma.
PNG supports full-color images and can be used for photographic images
![Page 13: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/13.jpg)
Imaging Strategies
Photographs as GIFs
![Page 14: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/14.jpg)
Imaging Strategies
Photograph as JPEGs
![Page 15: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/15.jpg)
Graphics Markup Height and width tags : Graphic source tags tell the browser how much space to devote
to a graphic on a page, and they instruct the browser to lay out your web page even before the graphics files have begun to download.
Alt text: HTML has several built-in fallbacks designed to allow web pages to work under different conditions. One of these is the “alt” attribute of the <img>tag. The alt attribute allows us to supply an alternate text description with any images we place on our page.
Colored Backgrounds: Web colors offer a zero-bandwidth means to change the look of your pages without adding graphics. They also allow you to increase the legibility of your pages, tune the background color to complement foreground art, and signal a broad change in context from one part of your site to another.
Background colors and legibility: A primary factor affecting legibility is the contrast between text and background. Low-contrast type diminishes the reader’s ability to differentiate between the color of the background and the text, which in turn makes it difficult to distinguish letterforms
![Page 16: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/16.jpg)
Graphics Markup
Background Graphics : Cascading Style Sheets offer powerful tools for designing layouts that include background graphics. With css, you can set a background graphic and define where it displays, whether it repeats, and, if so, in what direction, whether the image is fixed in place or scrolls with the page, and more. Background graphics can be attached to the entire page or to individual elements, such as the banner, navigation, or content area
![Page 17: About graphics-on-web](https://reader036.vdocuments.site/reader036/viewer/2022081520/587efedb1a28ab35528b6953/html5/thumbnails/17.jpg)
Conclusion
Thus, graphics makes our website look more beautiful and attractive.