![Page 1: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/1.jpg)
Skills: noneConcepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic, and file type
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Image characteristics
![Page 2: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/2.jpg)
Where does this topic fit?
• Internet concepts– Applications– Technology– Implications
• Internet skills– Application development– Content creation (image)– User skills
![Page 3: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/3.jpg)
images are made of dots
called “pixels”
![Page 4: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/4.jpg)
Coffee cuppixels
![Page 5: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/5.jpg)
Imagesize
398 by 530 pixels 152 by 202 pixels
![Page 6: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/6.jpg)
Same size image, different screen sizes
What would happen if I displayed the same image file on both of these screens?
![Page 7: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/7.jpg)
Imageshape
![Page 8: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/8.jpg)
1
1
1
2
2:1aspect ratio
1:1aspect ratio
Aspect ratio – width:height
![Page 9: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/9.jpg)
4
3
9
16
64
Common aspect ratios
6:416:9
4:3
![Page 10: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/10.jpg)
Resize, same aspect ratio
![Page 11: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/11.jpg)
Resize, changed aspect ratio
![Page 12: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/12.jpg)
200 x 200 = 40,000 pixels
100 x 100 = 10,000 pixels
50 x 502,500 pixels
Resolution
Low resolutionMedium resolutionHigh resolution
What is the unit of measure for resolution?
![Page 13: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/13.jpg)
Amount of information
Which image has the most information? Explain your answer.
![Page 14: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/14.jpg)
Flat versus photographic images
Logos and other images with a limited color palette
Photographic images with continuous tone variation
![Page 15: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/15.jpg)
Common Internet image file types
• .gif: Graphic Interchange Format, used for logos, cartoons and other flat art with up to 256 different colors
• .png: Portable Network Graphics, a gif replacement (more colors), but cannot do animation
• .bmp: Microsoft Bitmap, an uncompressed format used for photographic images
• .jpeg (or .jpg): Joint Photographers Expert Group, a compressible format used for photographic images
![Page 16: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/16.jpg)
Which format to use
.png
.jpg
![Page 17: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/17.jpg)
Summary
![Page 18: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/18.jpg)
Self-study questions1. We covered six characteristics of an image – without looking back, do you recall them?2. State what each characteristic means in your own terms.3. Two images have the same aspect ratio, but they are different sizes. How can that be?4. Image size can be measured in number of pixels, inches, centimeters, etc. Why do we
typically work with number of pixels?5. If you try to take a picture immediately after taking another with a digital camera, there
is a slight delay. Why?6. An image is 800 pixels wide and 200 pixels high. What is its aspect ratio?7. An image is 640 pixels wide and 480 pixels high. What is its aspect ratio?8. An image is 800 pixels wide and 400 pixels high, and I resize it to 100 pixels high, while
maintaining the aspect ratio. What is the new width?9. If an image has a 1:1 aspect ratio, and it is 10 inches wide, how tall is it?10. If an image has a 2:1 aspect ratio, and it is 10 inches wide, how tall is it?11. If an image has a 4:3 aspect ratio, and it is 10 inches wide, how tall is it?12. If an image has a 16:9 aspect ratio, and it is 10 inches wide, how tall is it?13. The resolution of an image is determined by the number of pixels it contains and ___.14. Google introduced WebP, a new image format that they say is superior to JPEG. What
might keep it from catching on even if it is better?15. Which image format should I choose when I scan an image from a magazine?16. Which image format should I choose when I post a picture of family on the Web?17. Which image format should I choose for my company logo?
![Page 19: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/19.jpg)
200 x 200 = 40,000 pixels
100 x 100 = 10,000 pixels
50 x 502,500 pixels
17. Which of these images has the largest pixels?
![Page 20: Skills: none Concepts: pixel, compression, image characteristics: size, shape (aspect ratio), resolution, amount of information, flat versus photographic,](https://reader034.vdocument.in/reader034/viewer/2022051618/56649d2d5503460f94a037c9/html5/thumbnails/20.jpg)
What’s the difference between jpg, png and gif? :http://www.howtogeek.com/howto/30941/whats-the-difference-between-jpg-png-and-gif/
Resource