Building BobSmithPhotography.net has stopped expanding because I've been overwhelmed with spam on the comment forums. So, if you're here and have questions about web design come and visit Forums, Blogs, Wikis dot com. It has articles that I've written, some of which are also here, and a web design forum as well so you can ask any questions you may have. There is still a lot of good stuff here though, so poke around the links and take a look.

Home » The tutorial » Adding Images

Images

Yeah, Bob's a photographer and Bob's going to need photographs on his web site. 

First, we need to decide on what format.  For web use there are basically 3 options.  JPG, GIF, and PNG.

JPG
Great for photographs, but lousy if you bump the compression up to high.  We've all seen what happens when the compression gets too high.  You start seeing odd artifacts around detailed areas.  But you also don't want to set the compression too low.  This will make your images too big.  You want your image as small as possible, but where you're still happy with how it looks.  I usually set it as a level 4 in Photoshop.

GIF
Great for logos and such, but terrible for photographs.  They are very small due to compression, but only support 256 colors. 

GIFs also have the advantage of transparency.  Bob's logo actually has a transparent background, but it looks white on page.  If Bob were to change to a black background, then it would appear black. 


PNG
PNG files were supposed to replace both GIF and JPG and be the next great web format.  Problem is, IE doesn't support any of the really cool features.  They support millions of colors, compress well, and support transparency.  Where GIFs support transparency for only 1 of the 256 colors, PNG supports something called alpha channel transparency which means you can have varying levels of transparency.  GIF is either transparent or not.  But, IE doesn't support the alpha channel transparency well, so you're left with a page that doesn't look right to 80 or 90 percent of your visitors.

To show an image
Look back up at the HTML code where Bob's logo is displayed.  You'll see an <img> tag.  This is how we display an image. 

<img> properties

  • src="logo.gif" - This tells the tag what file to load.  It follows the same idea as href above for anchor tags, the path can be either relative or absolute
  • alt="Bob's logo" - This is what is shown to a browser who either does not support graphics or has graphics turned off.  It is also incorrectly shown as a tool tip by IE
  • title="Bob's logo" - This gives you a chance to title your graphic, and it's the attribute that the tool tip should come from according to spec.
  • height="123" and width="123" - This tells the browser how much space to reserve for the image even before it downloads the image.  The best reason for this is that the graphics load last, so if the browser doesn't know how much space to reserve it will make for a jumpy load.  This measurement is in pixels.

So, for Bob's logo we'd use the following code.

<img src="logo.gif" title="Bob Smith Photography" alt="Logo" height="100" width="359">



Anchor Tags « The tutorial » Registering your domain

Content managed by the Etomite Content Management System.