Pulling In Visitors

A picture can speak 1,000 words. Graphics can add a lot of flair to your web site. They put your words into images and grab the attention of the reader. How many articles have you clicked on, because the picture was intriguing?

Too many graphics can also be a deterrent to visitors. The more graphics you have, the longer your web page takes to load. In a world of instant gratification, if users have to wait, they cancel your page and go on to something else. You must use your own judgment to find that happy medium.

You also don’t want to use graphics that are too large for you article. I don’t mean taking up white space, and condensing your paragraphs to a tiny column next to the image. I mean taking up disk space which affects load time when you’re page is accessed through a browser. Remember not everyone is on a high speed internet connection. But even if they were, you don’t want people waiting for your page to load, because the image files are too large.

The typical desktop image today is 1366 pixels wide, by 768 pixels high. On average, a file with these dimensions can be around a 3 megabyte file. Now that doesn’t sound like a lot, but the more colors in the image, the bigger the file. And when you start adding 3 or 4 images to your articles and they’re all this size, a visitor is waiting for each one of those files to load.

It doesn’t matter if you’ve set the dimensions on the file to appear smaller. The web browser is still loading the entire 3meg file. So you want to resize your images before you upload them, unless your intent is to share a full size desktop image.

You can use any graphics editor to do this. Most come with some form of resize tool built-in. A good general size to stick with is 350 pixels wide, by 450 pixels high. As a comparison, most background images for cell phones are 330×480 for portrait, or 500×330 landscape.

There are three types of graphic files that can be used on a web page. These file types are identified by their file name extension. JPGs, GIFs and PNGs

• JPGs compress image data by reducing sections of images to blocks of pixels or “tiles.” JPG compression was designed to store large pictures in crisp color and detail, at least what was allowed at the time of this formats creation.
• GIFs do not contain as many pixels as a jpg so they’re not as large in size. But, the smaller number of pixels can also mean the loss of detail or clarity within a picture. Apart from supporting transparency, GIF also is supports animations, limiting every frame to 256 pre-selected colors.
• Both JPGs and GIFs are older formats and they each lack the finesse that modern technology has provided. So as technology has grown and progressed, so must file types to keep pace. That brings us to PNGs. PNG supports 8-bit color like GIF, but also supports 24-bit color RGB, like JPG does. They’re compression algorithm has been updated so that they can preserve color and detail, but they can still be transparent, or be used for animation like GIFs. They are the new Web 2.0 version for graphic usage.

Coding Images In HTML
The code for an image is relatively simple. But like most things in the HTML there are additional parameters that can help you place an image on your page so it’s in just the right place.

<img src= “images/swdesign.gif”>	HTML editing packages and blog page or post editors all provide a feature for a ‘click & add’ of graphics. The command to add a graphic is very simple. The img tag tells the browser that the page is loading an image. The src defines the location of the graphic within your web environment. In the case of a static website: your images should be kept in their own file folder/directory to help you keep track of your graphics. In the case of the code on the left, the graphic is located in a sub-directory called images. The name of the graphic is swdesign.gif For a blog, the command will look like this: <img src=”https://springwolf.com/wp-content/images/swdesign.gif” />
.	You can use a graphic like the one to the left to create a link to another page within your web site. Or to someone else’s web page entirely. Within an html or blog editor, you can usually click on the graphic, then type the web address in some field the tool provides. . But the command will look like this: <img src=”images/swdesign.gif”> . In Web 1.0 you had to tell the image to remove the link box border that surrounds the image. In Web 2.0, no border is now the default, Yeah! . You can also add a label or notice to the graphic that will appear when a visitor places their mouse pointer over the image. That command will look like this: <a href=”https://springwolf.com/infotech“> <img src=”images/swdesign.gif” border=0 alt=”Back To The InfoTech Section”> . Place your mouse over the lower SpringWolf Designs image and you’ll see the ‘alt’ message appear.
This image has 2 hot spots In an HTML Editor the graphic might look like this.	An ImageMap is a graphic that has been formatted with “hot spots”. Hot spots allow you to use an image or different parts of an image to link users to several different sections, or pages of your site, or to someone else’s web page entirely. . Creating an ImageMap isn’t as hard as you might think, but they aren’t used very often today. Image Mapping is typically used for gaming and those hotspots are coded in advanced programming language and not standard HTML. . The following is an example of a simple image map command used for the graphic to the left. The first command tells the browser to load an image MAP and defines the name for this mapping definition called CROSS. The next two commands defined the shape of the areas to be mapped. The rectangle coordinates are defined and the Hypertext Reference (or link) is also provided. So when you click on the lower part of the graphic, You’ll find a small rectangular hot spot. When you click on this hot spot, you’ll be linked to “The Wolf” page here on Kosmos. Same thing for the circle hot spot. Except it goes to a different page; it should take you to the InfoTech page. . The second part of an image map is the image itself. But you’ll notice a couple of additional parameters. Use map tells the browser which Mapping command to use for this image. In this case the map is called Cross. <MAP NAME=”cross”> <AREA SHAPE=”rect” COORDS=”44,109,86,161″ HREF=”infotech.htm”> <AREA SHAPE=”circle” COORDS=”65,64,44″ HREF=”glossary.htm”> </MAP> <IMG SRC=”../img/cross.gif” BORDER=”0″   USEMAP=”#cross” ISMAP> . You can hover your mouse the cross on the top, and over the circle part of the cross and look at your browser notification window at the bottom of the screen to see where the link will take you. Move your mouse to the lower part of the cross and you’ll see the link to the infotech page. . This is not something you can easily do through a blog post. While the functionality works on a blog, there isn’t a tool to help you set up the coordinates and links. All that must be done manually and then coded into the Text source of the blog post or page.
Animated Graphics	An animated graphic can come in many forms. AVI – Audio Video Interleave MP3 / MP4 – MPEG Audio Layer-3 or Layer-4. WLMP – Windows Live Movie Project (these are used within Movie Maker to edit movies). Or an animated GIF or PNG file. The most common animated graphic file is called a multi-part image, such as the one to the left. A multi-part image is just what it sounds like. Multiple images of something that when put together in a single file looks like the image is moving. . Remember when you were a kid and you drew a picture of dog on a note pad. One picture on each page, showing the legs of your dog in different positions. Then you flipped through the pages real fast, the dog looked like it was running. Well that is the same concept behind a multi-part image. They can be in GIF or PNG format. The image to the left is a multi-part GIF. . You can find various software packages that help you create these types of images. Check out the Web Design Tools page for suggestions.

Happy Imaging!