Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

198 LESSON 9: Using Images on Your Web Pages


Images on the Web


Images displayed on the Web should be converted to one of the formats supported by
most browsers: GIF, JPEG, or PNG. Every popular browser supports all three. HTML5
introduces support for SVG images. Many other image formats are supported by some
browsers and not others. You should avoid them.
Let’s assume that you already have an image you want to put on your web page. How do
you get it into PNG, GIF, or JPEG format so it can be viewed on your page? Most image
editing programs, such as Adobe Photoshop (http://www.adobe.com/), iPhoto (http://
apple.com/), Picasa (http://picasa.google.com/), and GIMP (http://gimp.org/), will convert
images to the popular formats. You might have to look under the option for Save As or
Export to find the conversion option. There are also freeware and shareware programs
for most platforms that do nothing but convert between image formats as well as online
photo editors available at http://pixlr.com/ and http://www.picmonkey.com.

If you’re a Windows user, you can download IrfanView, which
enables you to view images, and convert them to various f ormats,
at http://www.irfanview.com/. It also provides a number of other
image-manipulation features that are useful for working with
images for the Web. Best of all, it’s free for noncommercial use.

TIP

Remember how your HTML files have to have an .html or .htm extension to work prop-
erly? Image files have specific extensions, too. For PNG files, the extension is .png. For
GIF files, the extension is .gif. For JPEG files, the extensions are .jpg and .jpeg.

Image Formats


As I just mentioned, several image formats are supported by every major web browser:
GIF, JPEG, PNG, and SVG. JPEG and GIF are the old standbys, each useful for different
purposes. PNG was designed as a replacement for the GIF format. SVG or scalable vec-
tor graphics are an Extensible Markup Language (XML) format to add vector drawings to
web pages. To design web pages, you must understand and be able to apply all the image
formats and to decide which is appropriate to use in each case.

GIF


Graphics Interchange Format, also known as GIF, was once the most widely used image
format. It was developed by CompuServe to fill the need for a cross-platform image format.
Free download pdf