HTML and CSS Reference
In-Depth Information
You can reduce the physical size of your images by cropping them (using a smaller
portion of the overall image) or scaling (shrinking) them. When you scale an
image, you might lose some of the detail.
n
CAUTION
Remember that reducing the size of your images using the
height
and
width
CSS properties or the
height
and
width
attributes of
the
<img>
tag only makes them take up less space on the page; it
doesn't affect the size of the image file or the download speed. It
also has a tendency of making your images just look bad.
With the preceding suggestions in mind, take a second look at the images on your page.
How can you put the page shown in Figure 18.22 on a diet and improve its appearance?
The background of the page can be dropped. It makes the page hard to read, and
the tiling of the image is not good. This makes the page simpler and helps it down-
load more quickly.
n
There are a couple of problems with the banner image. The first is that it's large,
and the second is that it has no semantic meaning. It is purely decorative. The cur-
rent style is to put things like page headings in regular tags and then use CSS back-
grounds to add images where appropriate. The banner image will be replaced by a
heading with a background image. This approach is friendlier to search engines
and more accessible.
n
Those horizontal rules are a
big
problem. First, there are too many of them.
Second, they overpower the page heading because of their size. Third, they distract
from the list of items because they create separation between them. I've removed
them from the updated page.
n
The bullets that appear before each list item are way too large. They could stand to
be cut down to half their size. As a rule, most bullets are kept to 30
n
30 pixels or
less. In the updated image, I've used smaller bubbles as bullets in the list.
×
All the improvements I've suggested here are shown in Figure 18.23.
