HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 5. IMAGE CROP AND RESIZE 51


5.1 Basic Image Processing


Croppingremoves part of the picture. It creates a smaller picture. It lets
you direct your viewers’ attention to the things you want them to see.


Exam Question 97(p.342): In image processing, what word describes
removal of part of the picture, making it smaller?
Acceptable Answer:crop


Resizingpresents the same image as before, but it changes the number of
pixels in the picture. This can be done automatically by the browser, to
make your image fit in the space you have allocated. It can also be done
before the webpage is loaded to conserve on network bandwidth. It is some-
times calledscalingorresamplingordownsamplingorupsampling.


We are talking here about real pixels, not CSS pixels. See section 1.2 (page
10) for a reminder about the difference.


Downsampling:When we take a larger number of pixels and generate a
smaller number, that is called downsampling.


Exam Question 98(p.342): In image processing, what word describes
combining pixels, making the image smaller?
Acceptable Answer:downsampling


You can use scaling to subdivide pixels, creating more of them. When you
do it the effort is usually wasted because you do not get any more detail
and your downloads take more time. When the browser does it, it is to
match the pixels it received to the physical device on which the pixels will
be shown.


Upsampling: When we take a smaller number of pixels and generate a
larger number, that is called upsampling.


Exam Question 99(p.342): In image processing, what word describes
dividing pixels, making the image larger?
Acceptable Answer:upsampling


Color modification and transparency are also commonly done. We will not
demonstrate color modification, but in section 8.1 (page 82) and in appendix
27 (page 248) we will work with image transparency.

Free download pdf