The fine detail of images using HTML

In previous columns we investigated some basic image tips and the necessary syntax for coding an image into your Web site.

<IMG src="picture.jpg" alt="This is a picture" border="0" width="150" height="150">

This time we look in more detail at the images themselves: their properties, where you can find them, and how to optimise them for the Internet.

Introduction

When teaching HTML, I have often been asked how to create the actual graphic with code. Many people don't realise that the creation of the image is separate to its insertion into a Web site. Graphics are created as separate entities which may or may not be used on Web pages, in the same way that they may or may not be used for word processing, or with greeting card software.

GIFs and JPGs

There is a variety of uses for images, and therefore a variety of image formats. Usually you can tell what file type you have by looking at the extension (the last letters after the full stop in the filename). For the Internet, the dominant file formats are GIFs and JPEGs (JPGs). They should be set to a resolution of 72dpi (dots per inch) for Web use.

GIFs are used for graphics that don't require an extensive range of colours. Most clipart or cartoon-style images are GIFS. Additionally, most animated graphics you see on the Internet are in this format. JPGs, on the other hand, are for images that are generally of photographic quality and that usually require many shades of the same colour.

The use of images in your Web site comes with a potential drawback. If too many are used or your images are not optimised for Internet viewing, they may increase the load time of your site. To overcome this, many graphic programs, such as Adobe Photoshop, allow you to optimise your images to a smaller file size without losing picture quality.

However, if you don't have access to such a program, Web sites have services that will do this for you. Take Net Mechanic (www.netmechanic.com/GIFBot/optimize-graphic.htm) as an example. Simply enter the URL of your graphic or, alternatively, upload it from your local machine. The site will then return a number of variations of your image; choose where the balance between file size and image quality is best, and save that version onto your local machine for use on your site. See FIGURE 1 for example results of a given image.

Image location

There are two main ways to collect your images for the Internet: either search the Internet for the graphic (animated, static or photograph), or create it electronically yourself.

For the purposes of this discussion, let's assume you want to locate a moving picture of a dog. Simply go to a search engine such as Yahoo (www.yahoo.com) and, in the search box, type "free images" & "dog" & "animated gif". You will be confronted with thousands of sites with potential images you could save.

To save an image from the Internet, simply hover your mouse over the image, right-click your mouse and select Save Picture As. You can then determine where on your computer you want to save it, and reference it accordingly in your code.

Alternatively, you can link to a graphic while it is on someone else's server using the absolute URL of the graphic. A potential problem with this route is that if that site's server goes down, viewers won't be able to see the graphic on your Web site any more. This is definitely not the best option.

Using this search technique, you can locate backgrounds, animated graphics, dividers and bullets, as well as normal photographs... many for free. It is very important to check the copyright on images before you use them on your Web site, just in case.

The second way to collect images is to create them yourself; previous Here's How Graphics columns will give you more infor­mation on this. With the right knowledge, you can create your own standard images, animated graphics, scan in images or even use photos from a digital camera.

Following this advice, not only will you know more about images but you'll be able to insert them into your Web site and be sure they are at minimum size and maximum quality for your situation.

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Cool Tech

Breitling Superocean Heritage Chronographe 44

Learn more >

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?