HTML5 and CSS3 All-in-One For Dummies (2014)
Book I Creating the HTML Foundation
Chapter 6 Adding Images, Sound, and Video
In This Chapter
Understanding the main uses of images
Choosing an image format
Creating inline images
Using IrfanView and other image software
Changing image sizes
Adding audio clips
Working with video
You have the basics of text, but pages with nothing but text are… well, a little boring. Pictures do a lot for a web page, and they're pretty easy to work with. Today's web is really a multimedia environment, and HTML5 finally offers great support for audio and video. Find out how to add all these great features to your web pages.
Adding Images to Your Pages
Every time you explore the web, you're bound to run into tons of pictures on just about every page you visit. Typically, images are used in four ways on web pages:
· External link: The page has text with a link embedded in it. When the user clicks the link, the image replaces the page in the web browser. To make an externally linked image, just make an ordinary link (as I describe in Chapter 5 of this minibook), but point toward an image file, rather than an HTML (HyperText Markup Language) file.
· Embedded images: The image is embedded into the page. The text of the page usually flows around the image. This is the most common type of image used on the web.
· Background images: An image can be used as a background for the entire page or for a specific part of the page. Images usually require some special manipulation to make them suitable for background use.
· Custom bullets: With CSS, you can assign a small image to be a bullet for an ordered or unordered list. This allows you to make any kind of customized list markers you can draw.
The techniques you read about in this chapter apply to all type of images, but a couple of specific applications (such as backgrounds and bullets) use CSS. For details on using images in CSS, see Book II, Chapter 4.
Linking to an image
The easiest way to incorporate images is to link to them. Figure 6-1 shows the externalImage.html page.
The page's code isn't much more than a simple link:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>externalImage.html</title>
</head>
<body>
<h1>Linking to an External Image</h1>
<p>
<a href = "shipStandard.jpg">
Susan B. Constant
</a>
</p>
</body>
</html>
The href points to an image file, not an HTML page. You can point to any type of file you want in an anchor tag. If the browser knows the file type (for example, HTML and standard image formats), the browser displays the file. If the browser doesn't know the file format, the user's computer tries to display the file using whatever program it normally uses to open that type of file.
Figure 6-1: This page has a link to an image.
See Chapter 5 of this minibook for a discussion of anchor tags if you need a refresher.
This works fine for most images because the image is displayed directly in the browser.
You can use this anchor trick with any kind of file, but the results can be very unpredictable. If you use the link trick to point to some odd file format, there's no guarantee the user has the appropriate software to view it. Generally, save this trick for very common formats, like GIF and JPG. (If these formats are unfamiliar to you, they are described later in this chapter.)
Most browsers automatically resize the image to fit the browser size. This means a large image may appear to be smaller than it really is, but the user still has to wait for the entire image to download.
Because this is a relative reference, the indicated image must be in the same directory as the HTML file. When the user clicks the link, the page is replaced by the image, as shown in Figure 6-2.
Figure 6-2: The image appears in place of the page.
External links are easy to create, but they have some problems:
· They don't preview the image. The user has only the text description to figure out what the picture might be.
· They interrupt the flow. If the page contains a series of images, the user has to keep leaving the page to view images.
· The user must back up to return to the main page. The image looks like a web page, but it isn’t. No link or other explanatory text in the image indicates how to get back to the web page. Most users know to click the browser’s Back button, but don’t assume all users know what to do.
Adding inline images using the <img> tag
The alternative to providing links to images is to embed your images into the page. Figure 6-3 displays an example of this technique.
Figure 6-3: The ship image is embedded into the page.
The code shows how this image was included into the page:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>embeddedImage.html</title>
</head>
<body>
<h1>The Susan B. Constant</h1>
<p>
<img src = "shipStandard.jpg"
height = "480"
width = "640"
alt = "Susan B. Constant" />
</p>
<p>
The <em>Susan B. Constant</em> was flagship of the
fleet of three small ships that brought settlers to Jamestown, the first
successful English Colony in the new world. This is a replica housed
near Jamestown, Virginia.
</p>
<body>
</html>
The image (img) tag is the star of this page. This tag allows you to grab an image file and incorporate it into the page directly. The image tag is a one-shot tag. It doesn't end with </img>. Instead, use the /> characters at the end of the img definition to indicate that this tag doesn't have content.
You might have noticed that I italicized Susan B. Constant in the page, and I used the <em> tag to get this effect. <em> stands for emphasis, and <strong> means strong emphasis. By default, any text within an <em></em> pair is italicized, and <strong></strong> text is boldfaced. Of course, you can change this behavior with CSS.
The image tag has a number of important attributes, which I discuss in the following sections.
src (source)
The src attribute allows you to indicate the URL (Uniform Resource Locator) of the image. This can be an absolute or relative reference. Linking to an image in your own directory structure is generally best because you can't be sure an external image will still be there when the user gets to the page. (For more on reference types, turn to Chapter 5 of this minibook.)
height and width
The height and width attributes are used to indicate the size of the image. The browser uses this information to indicate how much space to reserve on the page.
The height and width attributes should describe the size of an image. You can use these attributes to actually change the size of an image, but it's a bad idea. Change the image size with your image editor (I show you how later in this chapter). If you use the height andwidth attributes, the user has to wait for the full image, even if she'll see a smaller version. Don't make the user wait for information she won't see. If you use these attributes to make the image larger than its default size, the resulting image has poor resolution. Find the image's actual size by looking at it in your image tool and use these values. If you leave out height and width, the browser determines the size automatically, but you aren't guaranteed to see the text until all the images have downloaded. Adding these attributes lets the browser format the page without waiting for the images.
alt (alternate text)
The alt attribute gives you an opportunity to specify alternate text describing the image. Alternate text information is used when the user has images turned off and by screen-readers. Information in alt tags is also used in image-searching software like Google Images.
The alt attribute is required on all images.
Additionally, the <img> tag is an inline tag, so it needs to be embedded inside a block-level tag, like a <p> or <li>.
Choosing an Image Manipulation Tool
You can't just grab any old picture off your digital camera and expect it to work on a web page. The picture might work, but it could cause problems for your viewers. It's important to understand that digital images (any kind of images you see on a computer or similar device) are different from the kind of images you see on paper.
An image is worth 3.4 million words
Digital cameras and scanners are amazing these days. Even moderately priced cameras can now approach the resolution of old-school analog cameras. Scanners are also capable of taking traditional images and converting them into digital formats that computers use. In both cases, though, the default image can be in a format that causes problems. Digital images are stored as a series of dots, or pixels. In print, the dots are very close together, but computer screens have larger dots. Figure 6-4 shows how the ship image looks straight from the digital camera.
Figure 6-4: Wow. That doesn't look like much.
My picture (taken on an older digital camera) registers at 6 megapixels (MP). That's a pretty good resolution, but modern digital cameras are much higher. If I print that picture on paper, all those dots are very tiny, and I get a nice picture. If I try to show the same picture on the computer screen, I see only one corner. This actual picture came out at 2,816 pixels wide by 2,112 pixels tall. You only see a small corner of the image because the screen shots for this book are taken at 1024×768 pixels. Less than a quarter of the image is visible.
When you look at a large image in most browsers, it's automatically resized to fit the page. The cursor usually turns into some kind of magnifying glass, and if you click the image, you can see it in its full size or the smaller size.
Some image viewers take very large images and automatically resize them so they fit the screen. (This is the default behavior of Windows’ default image viewer and most browsers.) The image may appear to be a reasonable size because of this feature, but it'll be huge and difficult to download in an actual web page. Make sure you know the actual size of an image before you use it.
Although shrinking an image so that it can be seen in its entirety is obviously beneficial, there's an even more compelling reason to do so. Each pixel on the screen requires 3 bytes of computer memory. (A byte is the basic unit of memory in a computer.) For comparison purposes, one character of text requires roughly 1 byte. The uncompressed image of the ship weighs a whopping 17 megabytes (MB). If you think of a word as five characters long, one picture straight from the digital camera takes up the same amount of storage space and transmission time as roughly 3,400,000 words. This image requires nearly three minutes to download on a 56K modem!
In a web page, small images are often shown at about 320×240 pixels, and larger images are often 640×480 pixels. If I use software to resample the image to the size I actually need and use an appropriate compression algorithm, I can get the image to look like Figure 6-5.
Figure 6-5: The resized image is a lot more manageable.
The new version of the image is the size and file format I need, it looks just as good, and it weighs a much more reasonable 88 kilobytes. That's 2 percent of the original image size.
Although this picture is a lot smaller than the original image, it still takes up a lot more memory than text. Even this smaller image takes up as much transmission time and storage space as 1,600 words! It still takes 10 seconds to download without a broadband connection. Use images wisely.
Images are great, but keep some things in mind when you use them:
· Make sure the images are worth displaying. Don’t use a picture without some good reason because each picture makes your page dramatically slower to access.
· Use software to resize your image. Later in this chapter, I show you how to use free software to change the image to exactly the size you need.
· Use a compressed format. Images are almost never used in their native format on the web because they’re just too large. Several formats have emerged that are useful for working with various types of images. I describe these formats in the section “Choosing an Image Format,” later in this chapter.
Introducing IrfanView
IrfanView, by Irfan Skiljan, is a freeware program that can handle your basic image manipulation needs and quite a bit more. I used it for all the screenshots in this book, and I use it as my primary image viewer when I'm using Windows. You can get a copy at www.irfanview.net. Of course, you can use any software you want, but if something's really good and free, it's a great place to start. In the rest of this chapter, I show you how to do the main image-processing jobs with IrfanView, but you can use any image editor you want.
A web developer needs to have an image manipulation program to help with all these chores. Like other web development tools, you can pay quite a bit for an image manipulation tool, but you don't have to. Your image tool should have at least the following capabilities:
· Resizing: Web pages require smaller images than printing on paper. You need a tool that allows you to resize your image to a specific size for web display.
· Saving to different formats: There’s a dizzying number of image formats available, but only a few formats work reliably on the web (which I discuss in the next section). You need a tool that can take images in a wide variety of formats and reliably switch it to a web-friendly format.
· Cropping: You may want only a small part of the original picture. A cropping tool allows you to extract a rectangular region from an image.
· Filters: You may find it necessary to modify your image in some way. You may want to reduce red-eye, lighten or darken your image, or adjust the colors. Sometimes, images can be improved with sharpen or blur filters, or more artistic filters, such as canvas or oil-painting tools.
· Batch processing: You may have a number of images you want to work with at one time. A batch processing utility can perform an operation on a large number of images at once, as you see later in this chapter.
You may want some other capabilities, too, such as the ability to make composite images, images with transparency, and more powerful effects. You can use commercial tools or the excellent open-source program Gimp. I use IrfanView for basic processing, and I use Gimp when I need a little more power. See Book VIII, Chapter 4 for a more complete discussion of Gimp.
IrfanView is my favorite, but it's only available for Windows. Here are a few free alternatives if you want to try some other great software:
· XnView: Similar to IrfanView, XnView allows you to preview and modify pictures in hundreds of formats, create thumbnails, and more. It’s available for Mac and Linux.
· Pixia: Pixia is a full-blown Windows-only graphic editor from Japan. Very powerful.
· GimpShop: This is a version of Gimp modified to have menus like Photoshop.
· Paint.NET: This is a powerful Windows-only Paint program.
Use Google or another search engine to locate any of these programs.
Choosing an Image Format
Almost nobody uses raw images on the web because they're just too big and unwieldy. Usually, web images are compressed to take up less space. All the types of image files you see in the computer world (BMP, JPG, GIF, and so on) are essentially different ways to make an image file smaller. Not all the formats work on the web, and they have different characteristics, so it's good to know a little more about them.
BMP
The BMP format is Microsoft's standard image format. Although it's compressed sometimes, usually it isn't. The BMP format creates very detailed images with little to no compression, and the file is often too large to use on the web. Many web browsers can handle BMP images, but you shouldn't use them. Convert to one of the other formats, instead.
JPG/JPEG
The JPG format (also called JPEG) is a relatively old format designed by the Joint Photographic Experts Group. (Get it? JPEG!) It works by throwing away data that's less important to human perception. Every time you save an image in the JPG format, you lose a little information. This sounds terrible, but it really isn't. The same image that came up as 13MB in its raw format is squeezed down to 1.5MB when stored as a JPG. Most people can't tell the difference between the compressed and non-compressed version of the image by looking at them.
The JPG algorithm focuses on the parts of the image that are important to perception (brightness and contrast, for example) and throws away data that isn't as important. (Actually, much of the color data is thrown away, but the colors are re-created in an elaborate optical illusion.)
JPG works best on photographic-style images with a lot of color and detail. Many digital cameras save images directly as JPGs.
One part of the JPG process allows you to determine the amount of compression. When you save an image as a JPG, you can often determine the quality on a scale between accuracy and compression.
The JPG compression scheme causes particular problems with text. JPG is not good at preserving sharp areas of high contrast (such as letters on a background). JPG is not the best format for banner images or other images with text on them. Use GIF or PNG instead. A JPG with text will show characteristic square artifacts.
Even if you choose 100 percent accuracy, the file is still greatly compressed. The adjustable compression operates only on a small part of the process. Compressing the file too much can cause visible square shadows, or artifacts. Experiment with your images to see how much compression they can take and still look like the original.
Keep a high-quality original around when you're making JPG versions of an image because each copy loses some detail. If you make a JPG from a JPG that came from another JPG, the loss of detail starts to add up, and the picture loses some visual quality.
GIF
The GIF format was developed originally for CompuServe, way before the web was invented. This format was a breakthrough in its time and still has some great characteristics.
GIF is a lossless algorithm so, potentially, no data is lost when converting an image to GIF (compare that to the lossy JPG format). GIF does its magic with a color palette trick and a run-length encoding trick.
The color palette works like a paint-by-number set where an image has a series of numbers printed on it, and each of the paint colors has a corresponding number. What happens in a GIF image is similar. GIF images have a list of 256 colors, automatically chosen from the image. Each of the colors is given a number. A raw (uncompressed) image requires 3 bytes of information for each pixel (1 each to determine the amount of red, green, and blue). In a GIF image, all that information is stored one time in the color palette. The image itself contains a bunch of references to the color palette.
For example, if blue is stored as color 1 in the palette, a strip of blue might look like this:
1, 1, 1, 1, 1, 1, 1, 1, 1, 1
GIF uses its other trick — run-length encoding — when it sees a list of identical colors. Rather than store the above value as 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, the GIF format can specify a list of 10 ones. That's the general idea of run-length encoding. The ship image in this example weighs 2.92MB as a full-size GIF image.
The GIF format works best for images with a relatively small number of colors and large areas of the same color. Most drawings you make in a drawing program convert very well to the GIF format. Photos aren't ideal because they usually have more than 256 colors in them, and the subtle changes in color mean there are very few solid blotches of color to take advantage of run-length encoding.
GIF does have a couple of great advantages that keep it popular. First, a GIF image can have a transparent color defined. Typically, you'll choose some awful color not found in nature (kind of like choosing bridesmaid dresses) to be the transparent color. Then, when the GIF encounters a pixel that color, it displays whatever is underneath instead. This is a crude but effective form of transparency. Figure 6-6 shows an image with transparency.
Whenever you see an image on a web page that doesn't appear to be rectangular, there's a good chance the image is a GIF. The image is still a rectangle, but it has transparency to make it look more organic. Typically, whatever color you set as the background color when you save a GIF becomes the transparent color.
Creating a complex transparent background, like the statue, requires a more complex tool than IrfanView. I used Gimp, but any high-end graphics tool can do the job. IrfanView is more suited to operations that work on the entire image.
Another interesting feature of GIF is the ability to create animations. Animated GIFs are a series of images stored in the same file. You can embed information, determining the interval between images. You can create animated GIFs with Gimp.
Figure 6-6: This statue is a GIF with transparency.
Animated GIFs were overused in the early days of the web, and many now consider them the mark of an amateur. Nobody really thinks that animated mailbox is cute anymore. Look ahead to Book IV, Chapter 7 for the more flexible modern way to add animation to your pages.
For a while, there were some legal encumbrances regarding a part of the GIF scheme. The owners of this algorithm tried to impose a license fee. This was passed on to people using commercial software, but became a big problem for free software creators.
Fortunately, it appears that the legal complications have been resolved for now. Still, you'll see a lot of open-software advocates avoiding the GIF algorithm altogether because of this problem.
PNG
Open-source software advocates created a new image format that combines some of the best features of both JPG and GIF, with no legal problems. The resulting format is Portable Network Graphics, or PNG. This format has a number of interesting features, such as
· Lossless compression: Like GIF, PNG stores data without losing any information.
· Dynamic color palette: PNG supports as many colors as you want. You aren’t limited to 256 colors as you are with GIF.
· No software patents: The underlying technology of PNG is completely open source, with no worries about whether somebody will try to enforce a copyright down the road.
· True alpha transparency: The PNG format has a more sophisticated form of transparency than GIF. Each pixel can be stored with an alpha value.Alpha refers to the amount of transparency. The alpha can be adjusted from completely transparent to completely opaque.
With all these advantages, it's not surprising that PNG is one of the most popular formats on the web. At one point, browser support for PNG was inconsistent, but now browsers can manage PNG pretty well. The only disadvantage of PNG is the inability to create animations. This is not a major issue, as you'll see in Book IV, Chapter 7.
SVG
All of the previously-mentioned formats store information pixel-by-pixel. This mechanism is called raster-based image formats. However, this is not the only approach to images. A format called “Scalable Vector Graphics (SVG)” is relatively new to web development. SVG graphics are stored as a series of instructions in a format much like HTML. For example, a circle in SVG is stored like this:
<circle cx="50" cy="50" r="30"
style="stroke:#0000ff; stroke-width: 5px; fill:#ff0000;"/>
Although it's possible to write SVG code by hand, it's more common to use an editor like Inkscape. SVG graphics have some nice advantages:
· The image can be resized without loss of quality. The biggest advantage of SVG is the ability to change the image size. With raster-based images, any change of image size will involve a loss of image quality. SVG images can change size arbitrarily without a loss of quality.
· File sizes can be extremely small. The file size of a vector-based image is based on the complexity of the image rather than its visual size. So simple images that can be described as a series of shapes can result in tiny files, even if they take up an entire page.
· Vector images are easy to edit. You can edit a vector image by moving and manipulating the various shapes that make up an image. This makes vector-images like SVG quite easy to edit.
Vector images were not practical in previous versions of HTML. This is one reason Flash (which is primarily a vector format) was so popular. SVG is one of the most interesting new features of HTML5. An SVG image can be embedded like any other sort of image, or it can be manipulated directly though JavaScript code. You can find a great number of free-to-use SVG images at http://openclipart.org/.
Summary of web image formats
All these formats may seem overwhelming, but choosing an image format is easy because each format has its own advantages and disadvantages:
· GIF is best when you need transparency or animation. Avoid using GIF on photos, as you won’t get optimal compression, and you’ll lose color data.
· JPG is most useful for photographic images, which are best suited for the JPG compression technique. However, keep in mind that JPG isn’t suitable for images that require transparency. Text in JPG images tends to become difficult to read because of the lossy compression technique.
· PNG is useful in most situations. Older browsers may have trouble with this format.
· SVG is useful for images which need to be re-sized without a loss of image quality or when the image is relatively simple.
· BMP and other formats should be avoided entirely. Although you can make other formats work in certain circumstances, there’s no good reason to use any other image formats most of the time.
Manipulating Your Images
All this talk of compression algorithms and resizing images may be dandy, but how do you do it?
Fortunately, IrfanView can do nearly anything you need for free. IrfanView has nice features for all the main types of image manipulation you need.
Changing formats in IrfanView
Changing image formats with IrfanView is really easy. For example, find an image file on your computer and follow these steps:
1. Load the image into IrfanView by dragging the image into IrfanView or using the File ⇒ Open menu command.
2. Make any changes you may want to the image before saving.
3. Use the File ⇒ Save As command to save the file.
4. Pick the image format from the Save Picture As dialog box, as shown in Figure 6-7.
5. Save the file with a new filename. Keep the original file and save any changes in a new file. That way, you don’t overwrite the original file. This is especially important if you’re converting to JPG because each successive save of a JPG causes some image loss.
Keep the original file and save any changes in a new file. That way, you don't overwrite the original file. This is especially important if you're converting to JPG because each successive save of a JPG causes some image loss.
Figure 6-7: IrfanView can save in all these formats.
Don't use spaces in your filenames. Your files may move to other computers on the Internet, and some computers have trouble with spaces. It's best to avoid spaces and punctuation (except the underscore character) on any files that will be used on the Internet. Also, be very careful about capitalization. It's likely that your image will end up on a Linux server someday, and the capitalization makes a big difference there.
Resizing your images
All the other image-manipulation tricks may be optional, but you should really resize your images. Although high-speed connections may have no trouble with a huge image, nothing makes a web page inaccessible to users with weaker connectivity faster than bloated image sizes.
To resize an image with IrfanView, perform the following steps:
1. Load the image into IrfanView. You can do this by dragging the image onto the IrfanView icon, dragging into an open instance of IrfanView, or using the menus within IrfanView.
2. From the Image menu, choose Resize/Resample. You can also use Ctrl+R for this step. Figure6-8 shows the resulting dialog box.
3. Determine the new image size. A number of standard image sizes are available. 800×600 pixels will create a large image in most browsers. If you want the image smaller, you need to enter a size in the text boxes. Images embedded in web pages are often 320 pixels wide by 240 pixels tall. That’s a very good starting point. Anything smaller will be hard to see, and anything larger might take up too much screen space.
4. Preserve the aspect ratio using the provided check box. This makes sure the ratio between height and width is maintained. Otherwise, the image may be distorted.
Figure 6-8: IrfanView's Resize/Resample Image dialog box.
5. Save the resulting image as a new file. When you make an image smaller, you lose data. That’s perfectly fine for the version you put on the web, but you should hang on to the original large image in case you want to resize again.
6. Resample, rather than resize. Resampling is a slower but more accurate technique for changing the image size. This is IrfanView’s default behavior, so leave it alone. It’s still quite fast on a modern computer. The default (Lanczos) filter is fine, although you can experiment with other filters to get a faster conversion, if you want.
Enhancing image colors
Sometimes, you can make improvements to an image by modifying the colors. The Color corrections dialog box on the Images menu gives you a wide range of options, as shown in Figure 6-9.
You can do a surprising number of helpful operations on an image with this tool:
· Brightness: When adjusted to a higher value, the image becomes closer to white. When adjusted to a negative value, the image becomes closer to black. This is useful when you want to make an image lighter or darker for use as a background image.
Figure 6-9: You can change several options in the Color Corrections dialog box.
If your image is too dark or too bright, you may be tempted to use the Brightness feature to fix it. The Gamma Correction feature described later in this section is more useful for this task.
· Contrast: You usually use the Contrast feature in conjunction with the Brightness feature to adjust an image. Sometimes, an image can be improved with small amounts of contrast adjustments.
· Color Balance: Sometimes, an image has poor color balance (for example, indoor lighting sometimes creates a bluish cast). You can adjust the amount of red, green, and blue with a series of sliders. The easiest way to manage color balance is to look at a part of the image that’s supposed to be white and play with the slider until it looks truly white.
· Gamma Correction: This is used to correct an image that is too dark or too light. Unlike the Brightness adjustment, Gamma Correction automatically adjusts the contrast. Small adjustments to this slider can sometimes fix images that are a little too dark or too light.
· Saturation: When saturation is at its smallest value, the image becomes black and white. At its largest value, the colors are enhanced. Use this control to create a grayscale image or to enhance colors for artistic effect.
Using built-in effects
IrfanView has a few other effects available that can sometimes be extremely useful. These effects can be found individually on the Image menu or with the Image Effects browser on the Image menu. The Image Effects browser (as shown in Figure 6-10) is often a better choice because it gives you a little more control of most effects and provides interactive feedback on what the effect will do. Sometimes, effects are called filters because they pass the original image through a math function, which acts like a filter or processor to create the modified output.
Figure 6-10: The Image Effects browser lets you choose special effects.
Here's a rundown of some of the effects, including when you would use them:
· None: Just for comparison purposes, Figure 6-11 shows the ship image without any filters turned on.
I've exaggerated the effects for illustration purposes, but it may still be difficult to see the full effect of these filters on the printed page. The grayscale images in this book are a poor representation of the actual color images. Use the images in this chapter as a starting point, but to understand these filters, you really need to experiment with your own images in IrfanView or a similar tool. I've also added all these images to this book's companion website so you can see them there. For more on the companion website, see this book's Introduction.
· Blur: This filter reduces contrast between adjacent pixels. (Really, we could go over the math, but let’s leave that for another day, huh?) You might wonder why you’d make an image blurry on purpose. Sometimes, the Blur filter can fix graininess in an image. You can also use Blur in conjunction with Sharpen (which I cover in just a moment) to fix small flaws in an image. I applied the Blur filter to the standard ship image in Figure6-12
· Sharpen: The opposite of Blur, the Sharpen filter enhances the contrast between adjacent pixels. When used carefully, it can sometimes improve an image. The Sharpen filter is most effective in conjunction with the Blur filter to remove small artifacts. Figure6-13 shows the ship image with the Sharpen filter applied.
Figure 6-11: Here's the standard ship image, at full-screen resolution.
Figure 6-12: The Blur filter reduces contrast.
Figure 6-13: The Sharpen filter increases contrast.
If you believe crime shows on TV, you can take a blurry image and keep applying a sharpen filter to read a license plate on a blurry image from a security camera a mile away. However, it just doesn't usually work that way. You can't make detail emerge from junk, but sometimes, you can make small improvements.
· Emboss: This filter creates a grayscale image that looks like embossed metal, as shown in Figure6-14. Sometimes, embossing can convert an image into a useful background image because embossed images have low contrast. You can use the Enhance Colors dialog box to change the gray embossed image to a more appealing color.
· Oil Paint: This filter applies a texture reminiscent of an oil painting to an image, as shown in Figure6-15. It can sometimes clean up a picture and give it a more artistic appearance. The higher settings make the painting more abstract.
Figure 6-14: Embossing creates a low-contrast 3D effect.
Figure 6-15: Oil Paint makes an image slightly more abstract.
Figure 6-16: The image appears to stick up from the page like a button.
· 3D Button: This feature can be used to create an image, similar to Figure 6-16, that appears to be a button on the page. This will be useful later when you figure out how to use CSS or JavaScript to swap images for virtual buttons. You can set the apparent height of the image in the filter. Normally, you apply this filter to smaller images that you intend to make into buttons the user can click.
· Red Eye Reduction: You use this filter to fix a common problem with flash photography. Sometimes, a person’s eyes appear to have a reddish tinge to them. Unlike the other filters, this one is easier to access from the Image menu. Use the mouse to select the red portion of the image and then apply the filter to turn the red areas black. It’s best not to perform this filter on the entire image because you may inadvertently turn other red things black.
Other effects you can use
Many more effects and filters are available. IrfanView has a few more built in that you can experiment with. You can also download a huge number of effects in the Adobe Photoshop 8BF format. These effects filters can often be used in IrfanView and other image-manipulation programs.
Some effects allow you to explode the image, add sparkles, map images onto 3D shapes, create old-time sepia effects, and much more.
If you want to do even more image manipulation, consider a full-blown image editor. Adobe Photoshop is the industry standard, but Gimp is an open-source alternative that does almost as much. See Book VIII, Chapter 4 for more about using Gimp for image processing.
Batch processing
Often, you'll have a lot of images to modify at one time. IrfanView has a wonderful batch-processing tool that allows you to work on several images at once. I frequently use this tool to take all the images I want to use on a page and convert them to a particular size and format. The process seems a little complicated, but after you get used to it, you can modify a large number of images quickly and easily.
If you want to convert a large number of images at the same time, follow these steps:
1. Identify the original images and place them in one directory. I find it easiest to gather all the images into one directory, whether they come from a digital camera, scanner, or other device.
2. Open the Batch Conversion dialog box by choosing File ⇒ Batch Conversion — Rename. This Batch Conversion dialog box appears, as shown in Figure6-17.
3. Find your original images by navigating the directory window in the Batch Conversion dialog box. Find your original images by navigating the directory window in the Batch Conversion dialog box.
4. Copy your images to the Input Files workspace by clicking the Add button. Select the images you want to modify and press the Add button. The selected image names are copied to the Input Files workspace.
Figure 6-17: IrfanView has a powerful batch conversion tool.
5. Specify the output directory. If you want to put the new images in the same directory as the input files, click the Use This Directory as Output button. If not, choose the directory where you want the new images to go.
6. In the Work As box, choose Batch Conversion — Rename Result Files. You can use this setting to rename your files, to do other conversions, or both. Generally, I recommend both.
7. Set the output format to the format you want. For photos, you probably want JPG format.
8. Change renaming settings in the Batch Rename Settings area if you want to specify some other naming convention for your images. By default, each image is called image### where ### is a three-digit number. They are numbered according to the listing in the Input Files workspace. You can use the Move Up and Move Down buttons to change the order images appear in this listing.
9. Click the Set Advanced Options button to change the image size. This displays the Set for All Images dialog box, as shown in Figure 6-18.
10. Specify the new size of the image in the Resize area. Several common sizes are preset. If you want another size, use the given options. I set my size to 320×240.
11. Close the Set for All Images dialog box and then, in the Batch Conversion dialog box, click the Start button. In a few seconds, the new images are created.
Working with Audio
HTML has supported images for a long time, but now it works just as well with audio files. This is a major breakthrough, as audio previously required external programs like Flash.
Figure 6-18: Use the Set for All Images dialog box to resize images in batch mode.
Figure 6-19 demonstrates a page with a simple audio file.
Figure 6-19: This page has a song embedded in it.
It's quite easy to add audio to a web page in HTML5 with the new <audio> tag. Here's the code for creating this page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio.html</title>
</head>
<body>
<h1>Audio Demo</h1>
<audio controls = "controls">
<source src = "Allemande.mp3" type = "audio/mpeg">
<source src = "Allemande.ogg" type = "audio/ogg">
Your browser does not support HTML5 Audio
Please use this link instead:
<a href = "Allemande.mp3">Allemande.mp3</a>
</audio>
<p>
Music: J.S. Bach "Allemande" Partita for Violin #2
</p>
</body>
</html>
Although nearly every current browser supports the <audio> tag, they still can't agree on which format to support. Some browsers support MP3 files, some support a newer standard called Ogg, and some support WAV.
The best way to be sure the sound plays is to supply two different formats. I've found that including both Ogg and MP3 formats ensures my audio will play on all major browsers.
To add an audio file to your page, follow these steps:
1. Add the audio tag to your page. The <audio> tag indicates where an audio file will be placed. Where you place the tag in the code corresponds to where the controls will appear.
2. Turn on controls. You can specify a control panel with the controls = “controls” attribute. This causes a small control like the one in Figure 6-19 to appear. If you leave this directive out, there will be no control panel, which means the user will not be able to play the clip.
3. Create a <source> element or two. Inside the <audio></audio> pair, add one or more <source> elements. Each source element indicates a file you will link to.
4. Set the src attribute to indicate the file. The src attribute of the <source> tag (could we please have one more thing with almost the same name here?) is used to indicate the file name of the audio file you wish to play.
5. Add alternate code for older browsers. Any additional HTML code between the <sound> and <sound> tags will be interpreted only by browsers that do not understand the sound tag. You can add an ordinary anchor to download the sound effect if you wish. This way, even those with older browsers can hear what they’re missing.
Adding Video
The <video> tag is very similar to the <audio> tag, and it works in exactly the same way. You can use this tag to add a video to your web page, and the video plays directly in the browser without requiring a plugin like Flash. The ability to play videos through HTML is a major breakthrough, and it's not difficult to implement.
Of course, it isn't perfect. There are a number of competing video standards, and the browsers (imagine this) cannot agree on which standard to accept. The most important standards are called H.264 and Ogg. Some browsers prefer one; some prefer the other. To make things more complicated, the file extension for a video doesn't always indicate the underlying coding mechanism. This means video encoding requires some experimentation. If your video file is not in the format you want, you may need to convert it. FFmpeg and VLC are outstanding free tools you can use to convert video to whatever format you need.
As with any intellectual property, be sure you have the permission of the file's original owner. Just because you can embed a video into your web page doesn't mean you should do so.
Figure 6-20 shows a page with a simple video embedded in it.
Figure 6-20: This page has a video.
The code for this page shows how much the <video> tag is like <audio>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>videoDemo</title>
</head>
<body>
<h1>Video Demo</h1>
<video src = "bigBuck.ogv"
controls = "controls">
Your browser does not support embedded video
through HTML 5.
</video>
<p>
This video is a trailer for the incredible short movie
"Big Buck Bunny." This experiment proves that talented
volunteers can produce a high-quality professional video
using only open-source tools.
Go to <a href = "http://www.bigbuckbunny.org">
http://www.bigbuckbunny.org</a> to see the entire video.
</p>
</body>
</html>
Video files are extremely large, and they can make your website seem much slower to users. They also are cumbersome to move to a web server. For this reason, many web developers prefer to upload videos to a service like YouTube and simply link to the video on another server. If you right-click a YouTube video, you can select Copy Embed Code from the menu that appears. This gives you code you can use on your own site.