Introduction to Website Design And Development HTML5, CSS3, and JavaScript 4th Edition By Jennifer Robbins - Test Bank

Introduction to Website Design And Development HTML5, CSS3, and JavaScript 4th Edition By Jennifer Robbins – Test Bank

Instant Download – Complete Test Bank With Answers

Sample Questions Are Posted Below

CHAPTER 5. IMAGE CROP AND RESIZE 51
5.1 Basic Image Processing
Cropping removes 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
Resizing presents 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 ﬁt 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 called scaling or resampling or downsampling or upsampling.
We are talking here about real pixels, not CSS pixels. See section 1.2 (page
10) for a reminder about the diﬀerence.
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 eﬀort 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 modiﬁcation and transparency are also commonly done. We will not
demonstrate color modiﬁcation, but in section 8.1 (page 82) and in appendix
27 (page 248) we will work with image transparency.

CHAPTER 5. IMAGE CROP AND RESIZE 52
5.1.1 Size Aﬀects Speed
Each of us can probably remember visiting a webpage that loaded, a, large,
photo, so, slowly, we, almost, gave, up, waiting.
Modern digital cameras take big pictures. 4000 by 3000 is not uncommon,
and works out to 12 megapixels. The ﬁnished images are in the range of 2
to 3 megabytes in size. (I saw a smart phone advertised with 41 megapixel
resolution.) Images are getting bigger.
Google search “camera megapixel statistics” for current numbers.
On the other hand, even though modern computer screens are also getting
bigger, they are still much smaller than camera images, perhaps 1600 by
1200 toward the high end and 1024 by 768 at the low end.
Google search “screen resolution statistics” for current numbers.
Within that space, only a fraction is taken up by any given image. The
displayed size of an image may only be something like 400 by 300 for a large
image, and they are often much smaller than that.
When we view a 4000 by 3000 image, but only show 400 by 300 pixels, the
full image must be “resampled” by the browser. It also means that for every
pixel shown, 100 pixels were downloaded.
Internet download speeds in the US are typically (2011) somewhere around
10 Mbps, ten megabits per second. A 2.5 megabyte image has 25 megabits,
and would take 2.5 seconds to download. The reality is probably two to
three times as long. 7 seconds feels like a long time to wait.
But 0.07 seconds, 1/100 of that original time, is hardly noticeable.
The bottom line is simple. When you are displaying pictures on web pages,
and a lot of detail is not needed, it pays to downsample them in advance,
and crop them to the exact part of the image you want to show. Sometimes
image compression is done as well.
Pick your target size, and then work toward it. We will show you how.
5.1.2 Photo Editing Tools
Photoshop is legendary enough that people use photoshopping as a verb.
And it is the most well-known photo editing software today. Most photo
professionals use Photoshop.

CHAPTER 5. IMAGE CROP AND RESIZE 53
Adobe Photoshop is a commercial product costing around $700. Many
schools make the educational version available to their students. The edu-
cational price is typically half or less compared to the regular price.
Gimp (more properly, The Gimp) is a free alternative to Photoshop, and has
many of the same features. Gimp is popular among open-source advocates
and people with small budgets. (Free is a really good price.) Appendix 26
(page 246) has more.
Since students are typically “poor, starving students,” I have chosen to
demonstrate photo editing using The Gimp. Also, it helps that I can install
it on any machine I want for free. Because Gimp is free and has capabilities
roughly equal to Photoshop, Gimp is the photo editor that I most frequently
use.
Training: It is also said that the most expensive part of any computing
system is the training. Nothing is really free. Training is usually required.
Capabilities between the two editors are quite similar, but Photoshop prob-
ably has better support in terms of how-to books and documentation.
5.2 Cropping Removes Pixels
Cropping removes part of an image. In this example I use Gimp 2.8 and show
the steps I took to create a 1000 by 288 banner for a WordPress website.
In this picture, I put a red
box around the part of the
webpage that is the header
image. I intend to replace
it with my own image. I
want to ﬁnd out its dimen-
sions.

CHAPTER 5. IMAGE CROP AND RESIZE 54
Using the Firefox browser, I did a right-
click on the image. I selected “View Im-
age” from the menu. I could also have
selected “View Image Info” farther down
the menu to learn what I wanted to know.
Viewing just the image, I can see that its
dimensions are 1000 x 288 pixels. I re-
peated the process for another header im-
age to make sure the dimensions were the
same. They were.
Here I have started Gimp and I am
looking at a full-sized original im-
age from which I hope to extract
a portion to become a new header
image.
This is a picture of the bridge at Shepherd’s Dell, a waterfall on the Oregon
side of the Columbia River gorge, taken from the base of the waterfall and
looking up towards the road.
You can see in the red circle at the top that the original size of the image is
3264 x 2448 pixels, and you can see in the red box the approximate portion
I hope to extract.

CHAPTER 5. IMAGE CROP AND RESIZE 55
Using Gimp’s rectangle select tool,
I have drawn a line around the
part to be kept. The rest will be
cropped away.
From the menu, I select Gimp Menu:
Image / Crop to Selection.
5.3 Scaling Combines Pixels
As you can see in the red circle
at the top, the resulting image is
now 3264 (the full original width)
x 1018 (the new height) pixels.
Our next task is to Scale the Image. From the menu, I select Gimp Menu:
Image / Scale Image.
In the circle toward the middle, I change the width to 1000 and it shows me

CHAPTER 5. IMAGE CROP AND RESIZE 56
the height would be 312. (If I change the height to 288, the width is less
than 1000, and I do not want that.) Then I press the “Scale” button.
The result will be 1000 x 312 pixels.
Cropping by Canvas Size
I need to make the image smaller, and ex-
actly 1000 x 288 pixels. The easiest way
to do that is by changing the Canvas Size.
This is exactly like cropping, but instead
of using the mouse to specify the size, I
type in exact numeric values. Then I can
use the mouse to position the image within
that space.
From the menu, I select Gimp Menu: Image / Canvas Size.
I decide to keep the bottom part of the image. Within the red box you can
see where the top part of the image has been removed. My image is now
exactly the size I want.
Export the Resulting Image
From the menu, I select Gimp Menu:
File / Overwrite. My new image is writ-
ten in place of the original. Mine was just
a copy. But if you wanted to keep the orig-
inal, you would choose the next option,
Gimp Menu: File / Export.
5.4 Advanced Tricks
There are a few things that commonly happen with images. We ﬂow text
around them. We put captions above or below them. We click on them to

CHAPTER 5. IMAGE CROP AND RESIZE 57
see a more detailed view. In this section we show how to do these advanced
tricks.
5.4.1 Flow Around
Sometimes we want to insert a picture next to some text. We do not want
the picture to take up the whole row, but maybe be on the left or right edge
of the row, and have the text ﬂow around it.
This can be easily done using the css ﬂoat: parameter. We will talk about
ﬂoat and clear later, but here is a short example.
<img src=abc.jpg width=200 style=”float: left;”>
The text that follows will appear to the right of the picture until the picture
ends, and then will take up the whole column.
5.4.2 Captions
Sometimes we want to associate some text with a picture. We might think
of this text as a caption.
This can be easily done using a table. We will talk about tables later, but
here is a short example. (tr means table row. td means table data.)
<table style=”float: left;”>
<tr><td><img src=abc.jpg width=200>
<tr><td style=”text-align: center;”>
This is my caption.
</table>
5.4.3 Art Gallery
Sometimes we want a more-detailed image to be available for those that are
interested, but we do not want to slow down the webpage for everybody
else.
An example of this might be an art gallery page that shows many images
at a moderate resolution, like maybe 500px in the larger dimension, so they
will load quickly.

CHAPTER 5. IMAGE CROP AND RESIZE 58
We can save two versions of each image: a smaller one for display to everyone,
and a larger one for display to those users that are particularly interested.
The larger one can be available by clicking on the smaller image.
We can achieve this by wrapping the smaller image inside a link to the larger
image.
Exam Question 100 (p.342): How can you show a small image that when
clicked on shows a larger image?
Acceptable Answer: <a href=big.jpg><img src=small.jpg></a>

Introduction to Website Design And Development HTML5, CSS3, and JavaScript 4th Edition By Jennifer Robbins - Test Bank

Description

Additional Information

Reviews

Additional information

Add Review Cancel reply

Bates’ Guide To Physical Examination And History Taking 12th Edition

Advanced Pediatric Assessment 3rd Edition By Ellen M. Chiocca

Women’s Gynecologic Health 3rd Edition By Kerri Durnell Schuiling

Pharmacotherapeutics for Advanced Practice 4th Edition By Virginia

Basic And Clinical Pharmacology 14th Edition by Katzung Trevor

Bates’ Guide To Physical Examination and History Taking 13th Edition by Bickley

Quick Links

Contact Information

Introduction to Website Design And Development HTML5, CSS3, and JavaScript 4th Edition By Jennifer Robbins - Test Bank

Description

Additional Information

Reviews

Additional information

Add Review Cancel reply

Related Products

Bates’ Guide To Physical Examination And History Taking 12th Edition

Advanced Pediatric Assessment 3rd Edition By Ellen M. Chiocca

Women’s Gynecologic Health 3rd Edition By Kerri Durnell Schuiling

Pharmacotherapeutics for Advanced Practice 4th Edition By Virginia

Basic And Clinical Pharmacology 14th Edition by Katzung Trevor

Bates’ Guide To Physical Examination and History Taking 13th Edition by Bickley

Quick Links

Contact Information