HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 5. IMAGE CROP AND RESIZE 52


5.1.1 Size Affects 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 finished 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


Photoshopis 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.

Free download pdf