Chapter 5 HTML & CSS
You're now going to make this page more usable by substituting a smaller image (which we call a thumbnail) for each photo, and then you'll create a link from that thumbnail to each of the larger photos. Here's how you're going to do this, one step at a time.
Create a new directory for the thumbnails. Resize each photo to 150 by 100 pixels and save it in a "thumbnail" folder. Set the src of each <img> element in "index.html" to the thumbnail version of the photo. Add a link from each thumbnail to a new page containing the larger photo.
But in the middle of all this uncertainty, you can be prepared. Even if a browser can't display the images on your page, there is an alternative. You can give the visitor some indication of what information is in the image using the <img> element's alt attribute. Here's how it works:
<img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" alt="The typical new pencil can draw a line 35 miles long.">
You'll generally want to use a URL for an image if you're pointing to an image at a different website (remember, for links and images on the same site, it's better to use relative paths).
<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg">
They're a pair of attributes: width and height. You can use these attributes to tell the browser, up front, the size of an image in your page. Here's how you use width and height:
<img src="images/drinks.gif" width="48" height="100">
What makes a JPEG photo better than a GIF or PNG photo, or a GIF or PNG logo better than a JPEG logo?
A JPEG photo will usually be much smaller than an equivalent-quality PNG or GIF, while a PNG or GIF logo will usually look better, and may have a smaller file size than in JPEG format.
How do the number of pixels relate to the size of the image on the screen?
A good rule of thumb is 96 pixels to every inch, although with today's high resolution monitors and retinal displays, it can go higher. We used to use a standard of 72 pixels per inch (ppi), but to handle modern displays, the concept of a CSS pixel has been created. The CSS pixel is 1/96 of an inch (96 ppi). So for a 3" wide × 3" high image, you'd use 96 (pixels) × 3 (inches) = 288 × 288 pixels.
inline element
A text-level element in which the content is placed in line or alongside other element content.
<img src="name">
Adds an image
What is the color of the web page background?
Ex: <style type="text/css"> body { background-color: #eaf3da; } </style>
Creating Individual pages for photos
If the photo is called "seattle_video_med.jpg", then let's call the HTML file "seattle_video_med.html" just to be consistent. In each HTML file, we'll have a heading that describes the photo, followed by the photo. Here's the HTML for the first Seattle photo. All the other pages will follow this same format:
The src attribute can be used for more than just relative links; you can also put a URL in your src attribute. .
Images are stored on web servers right alongside HTML pages, so every image on the Web has its own URL, just like web pages do
Well, how large should I make my images then?
In general, you want to keep the width of your image to less than 800 pixels wide. Of course, you may want your images to be significantly smaller (or somewhat larger) depending on what you're using the image for. What if the image is a logo for your page? You probably want that small, but still readable. After all, you don't need a logo the width of the entire web page. Logos tend to run between 100 and 200 pixels wide. Sometimes it depends on the image you have. Using photo editors like Paint can help resizing photos
The JPEG format is best for photographs and other complex images.
JPEG images can be compressed at a variety of different qualities, so you can choose the best balance of quality and file size for your needs.
GIF
Like PNG, GIF works best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images. GIF can represent images with up to 256 different colors. GIF is also a "lossless" format. GIF also supports transparency, but allows only one color to be set to "transparent." Files tend to be larger than their JPEG equivalents. Supports animation.
Having just retrieved "green.jpg", the browser displays it and then moves on to the next image: "lightblue.jpg".
Now the browser has retrieved "lightblue.jpg", so it displays that image and then moves on to the next image, "blue.jpg". This process continues for each image in the page.
More information about PNG
PNG compresses the file to reduce its size, but doesn't throw anything way. So, it is a "lossless" format. Allows colors to be set to "transparent" so that anything underneath the image will show through. Files tend to be larger than their JPEG equivalents, but can be smaller or larger than GIF depending on the number of colors used.
How do I choose between GIF and PNG? It seems like they are very similar.
PNG is the latest newcomer in graphic formats, and an interesting one because it can support both photos as well as logos. It also has more advanced transparency features than GIF. PNG is supported by all major browsers now, which wasn't true just a few years ago.
Use PNG or GIF for images with solid colors, logos, and geometric shapes.
PNG works best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images. PNG can represent images with millions of different colors. PNG comes in three flavors: PNG-8, PNG-24, and PNG-32, depending on how many colors you need to represent.
Creating a Thumbnail
Start by opening "seattle_video_med.jpg" with your photo editing application. You're going to resize it to 150 by 100 pixels using the same method you used to create the 600 by 400 version With the image resized, choose OK and save it as the same name but in the thumbnail folder. Be careful: if you save it to the "photos" folder, you'll be replacing the larger image. Now, repeat this for each photo in your "photos" folder.
The GIF or PNG format is best for logos and other simple graphics with solid colors, lines, or text.
The GIF and PNG image formats allow you to make an image with a transparent background. If you put an image with a transparent background in a web page, what's behind the image, such as the background color of the page, will show through the transparent parts of the image GIF and PNG are lossless formats, which means the file sizes are likely to be larger than JPEG.
Can you say more about the quality setting in "Save for Web"?
The JPEG format allows you to specify the level of image quality you need. The lower the quality, the smaller the file size. If you look at the preview pane in the "Save for Web" dialog, you can see both the quality and file size change as you change the quality settings.
What is the number 30 next to the Quality label in the JPEG Options dialog box?
The number 30 is what Photoshop Elements considers Medium quality. JPEG actually uses a scale of 1-100%, and Low, Medium, High, etc. are just preset values that many photo editing applications use.
Where does the matte come in?
The process of anti-aliasing softens the edges relative to the background color. If you put the bottom version of the logo (from the previous Q&A) against a colored background, you'd see it has white edges in it. The Matte option in Photoshop Elements allows you to specify the color of the background that the text will be placed on, so when the text is softened it is done so against that color.
How images work?
There are a zillion formats for images out there in the world, all with their own strengths and weaknesses. But luckily, only three of those formats are commonly used on the Web: JPEG, PNG, and GIF.
How do I make links out of images?
To link an image, you put the <img> element inside an <a> element, like this: <a href="html/seattle_downtown.html"> <img src="thumbnails/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA"> </a>
Use JPEG for photos and complex graphics
Works best for continuous tone images, like photographs. Can represent images with up to 16 million different colors. Is a "lossy" format because to reduce the file size, it throws away some information about the image. Does not support transparency. Files are smaller for more efficient web pages. No support for animation.
Couldn't I just use the <img> element's width and height attributes to resize my image instead?
You could use the width and height attributes to resize an image, but that's not a good idea. Why? Because if you do that, you're still downloading the full-size image, and making the browser do the work to resize the image (just like when you have the auto resize option on in browsers that support that feature). The width and height attributes are really there to help the browser figure out how much space to reserve for the image.
