Downloaded 18 times
More Related Content
Digital Imaging
- 1. Introduction to Digital Images Jun Yang
- 2. Types of DigitalImages Raster image, is mapped as spots of color, or pixels. Vector use mathematical formulas to describe outlines and fills for image objects.
- 3. Digital Images: ResolutionNumber of pixels used to represent an image, arranged in rows and columns (the density of pixels in an images) It’s measured in ppi or dip (points per inch or dots per inch)
- 4. Resolution and SizeHigher Resolution = Larger File Size = Better Quality
- 5. Digital Images: ResolutionWeb images: 72 ppi On-screen: 96 ppi to 150 ppi Printing: 300 ppi for non-professional printing
- 6. Digital Images: FileFormats Web Formats (compressed format) JPG: for photos GIF: for line arts/illustrations PNG: yield a much sharper output when compared with JPG, Printing Formats (uncompressed) TIFF PICT-Mac format
- 7. Preparing Pictures ForWeb Image File Size Detail (/Color Depth) Image Quality (Resolution) Pixel dimensions
- 8. Preparing Pictures ForWeb Basic Rule for Website Graphics Use jpeg or png for photos and gif for logos Optimize image file sizes/Basic Editing Last: Embed the picture to a web page
- 9. Embed images forthe web HTML Code <img src=“lamp.gif” height= width= align=“right” alt=“lamp”>
- 10. Tips for usingweb images Always Optimize images before use in web pages Use Thumbnails to link to large images Don’t use graphics of text where in-line text will serve. Re-use the same graphics throughout the site. Allways use WIDTH and HEIGHT attributes to declare the dimensions of the image. Shoot for a file size of 30 to 100 KB per image.
- 11. Digital Images: GraphicEditors Picasa (free) Gimp (free) Adobe Photoshop Adobe Photoshop Element Macromedia FireWorks
- 12. Editing Images Threeof the most common image editing tasks: Cropping Resizing Removing red-eye We will learn other image editing tasks in Photoshop module.
- 13. Digital Images Forhigher quality images from web, try the Advanced Search feature of Flickr.com. http://www.flickr.com/search/advanced/ Checking the “Creative Commons” box. Look for images you can use free of charge (check the licensing information first). Microsoft site has free graphics for academic use. http://office.microsoft.com/en-us/images/?CTT=6&ver=14&app=powerpnt.exe
Editor's Notes
- #3 Bitmap images In a bitmap or raster image, visual data is mapped as spots of color, or pixels . When enlarged on a computer screen, a bitmap image looks like a quilt or mosaic. The more pixels in a bitmap image, the fi ner the detail will be. Because photographs have high levels of detail and a variety of tones and colors, they are best represented as bitmap images. Scanners and digital cameras produce bitmap images, and Photoshop is a bitmap program . Bitmap formats include: PSD, TIFF, JPEG, PNG, GIF, PICT, BMP Vector graphics Vector or object oriented graphics use mathematical formulas to describe outlines and fi lls for image objects. Vector graphics can be enlarged or reduced with no loss of data and no change in image quality. CorelDraw, Illustrator, Freehand, AutoCAD & Flash create vector graphics. Vector graphics are the best choice for creating line drawings, logos, and typography—images that do not have complicated patterns or a large range of continuous tones. Vector fi le formats include: EPS, AI, SVG, DXF, DWG Note: PowerPoint presentations, Web pages and most word processing applications primarily use bitmap images. If the original image is a vector le you may be able to save it in a bitmap format from it’s original application. Some bitmap applications will “rasterize” a vector graphic on import. • • • • Enlarged bitmap image Enlarged vector graphic
- #4 Bitmap Images are composed of pixels Quality of image dependent on resolution of pixels. In digital images, resolution typically refers to the number of horizontal and vertical pixels that make up the image. The higher the resolution, the more information the image will contain. For example, 512x768 refers to 512 pixels across by 768 pixels down n part it depends on who will use the scanned image and in what way. A non-specialist may look at a landscape photograph casually, What will happen if we keep the image size, yet, increase the resolution? the more pixels, the more detail is captured
- #5 Higher Resolution = Larger File Size = Better Quality
- #6 Most computer screens only show 72 dpi or 96 dpi, and higher resolutions enlarge the files without affecting the quality seen on screen.
- #7 NG was designed to replace GIF as the standard image format for lossless compression on the internet. It claims better compression than GIF, full alpha transparency, and gamma correction. All common browsers today support PNG, and all except Internet Explorer for Windows claim to support PNG's killer feature -- full Alpha transparency. Photoshop's poor PNG support is a major problem. The GIMP is an excellent program, and free, but ubiquity of Photoshop, and the GIMP's unintuitive interface and lack of native ports in operating systems other than Linux will be a major barrier to its adoption. a project where bandwidth concerns are paramount you may find it useful to switch to PNG. he PNG versions are invariably one-fifth the size of the GIFs One of the biggest advantages that PNG has over GIF is PNG's ability to support full alpha transparency . This would allow you, among other things to create antialiased text or logos and re-use them in different contexts (different background colours and images) without re-cutting the graphics thus reducing bandwidth and labour. can use more than 256 colours - up to 48-bit colour. The PNG format supports alpha transparency: Anybody who has designed images for use online knows the woes of trying to make that image appear smooth on any background. Some designers create different images to be used on different background colours, other designers simply leave the edges jagged, and still others just give their images a solid background. It's a bad way to go, but it's the only choice right now. Using PNG images with alpha transparency would eliminate all of these problems, and make the work of web designers a lot easier. Photoshop doesn't compress PNGs as well as it compress GIFs; PNG images compress more efficiently than GIFs. The smaller file size you can achieve with PNG may be the most important reason to switch to this format. PNG combines (and improves upon) the best qualities of GIF and JPEG s handy as PNG is, it isn't always the correct image format to use. Photo-realistic images are usually best saved as JPEGs. A limitation of PNG (compared to GIF) is that it doesn't handle animation, and it never will. So, if your cartoon involves an animated GIF, it won't work as a PNG file. this TIFF format may be used to store color images, and may be used as an archival file format. With lossless compression, the picture quality of the compressed file is exactly the same as the original, uncompressed file. JPEG - A 24-bit, lossy (some information lost) compression format which is well-suited for screen and web presentation. JPEG is supported by all major computer platforms and by Internet web browsers. With lossy compression, the picture quality of the compressed file is reduced when compared to the original file, and can not be restored, except by going back to the original. The advantage is that the file sizes are much smaller, and image quality is acceptable in most cases. It is not acceptable as an archival file format. GIF - An 8-bit, lossless compression format which is well-suited for low resolution screen display of images. GIF is often used for image thumbnails, screen versions of text documents, and is supported by all major computer platforms and Internet web browsers. Tonality (pixel depth or bit-depth) Bit-depth concerns the number of bits used to convey tonality for each pixel; that is, black and white, gray- scale, or color. In general, the more bits per pixel, the larger the file size. 1-bit or Bi-tonal - a 1-bit pixel has two possible values, black or white. The scanned image has no shading or gray. Bi-tonal scanning produces the smallest file. 8-bit Gray-scale - provides 256 shades of gray ranging from pure white to pure black. 24-bit Color - provides a tonal range of about 16 million different colors. Color scanning produces quite large files. Lossless compression loses none of the image information during compression and decompression. Lossy compression as its name says removes some of the original photographic detail. The advantage with PNG is that it preserves all the colors and yield a much sharper output when compared with JPG.
- #8 Most slow Web pages are slow because of too many large graphics.
- #9 Most slow Web pages are slow because of too many large graphics.
- #13 Wimba Accessment