Graphics for the web
Intro
We will quickly cover the most important concepts regarding graphics for the web and then show how to use them in a web page.
You should have some kind of graphics program at your disposal. It might be the gimp, photoshop, fireworks, etc. Whatever it is, we will assume that you know how to use it and not go over the specifics of those applications here.
Resolution and File Types
DPI (dots per inch) and PPI (pixels per inch) are terms that you will come across when dealing with graphics applications. They determine the resolution of document. If you are creating graphics for print, you probably want 300 or 600 dpi. For the web, we can use 72 ppi which has the advantage of smaller file sizes (which gives quicker downloads).
If you are creating a new document, you should make sure to set this. Here, for example, is how you do it using the Gimp.
Once you have created your graphics you need to save it in a format for the web. While modern browsers can handle many more file types than back in the old days, there are still two file types that are in most common usage. GIF and JPEG. There are advantages and tricks to learn about both, however here's a quick and easy way to determine which to use:
- GIF - for line art, animation, and "blocky" things.
- JPEG - for photos and "curves"
A few other things about these two formats...
GIFs can be "interlaced" allowing the image to download in "passes" - generally a good idea. They can also be "transparent" allowing you to assign one or more colors to be "see through".
JPGs can be "progressive" which displays in "passes" - generally a good idea.
The best way to learn this is to try it out - create some graphics, crop some photos, etc., and then trying saving as gifs and jpgs with various compression settings and see what you get.
Another thing to beware of is that you will find a lot of information on the web about Web Colors. This was more relevant back in the old days when you wanted to choose colors that were safe in all browsers in operating systems. Given the various restrictions, this cut down the number of colors to 216. Most people will agree that this is not so much of a concern now but you can easily play it safe in most graphics applications as they generally have a button that allows you to pick from "web colors".
img tag
For this part we will need a graphic. You can follow along and download the one I refer to, or download or create your own. If you aren't using the one I am, just be sure to use the correct file name.
If you don't already have one, go to http://www.parisgraphics.com/images/cathedralstills/ep22v2-01.jpg where you should see one of mine.
If you are using Firefox (or some other Mozilla type of browser) you should see the dimension in the title bar. In this case you'll see 150x113 (width x height).
Right click this image and save it in your web folder.
Open one of your pages, maybe the about_me.html page, and after the <h1> heading, add the following:
<img src="ep22v2-01.jpg" width="150" height="113" alt="gem computer graphic" />
Reload your page and you should see the graphic.
Here's what's going on:
- src specifies the file to load - note that you could refer to a file in another folder or even a file on another server.
- width and height specifiy the dimensions. Don't leave these out and don't use other dimensions here to resize your image. Sometimes you will find pages where a huge picture is "resized" with the width and height attribute down to a thumbnail. This is dumb. It take longer to download the big file and the browser has to do the extra work.
- alt - a description of the image. Don't leave this out either. It is used by speech readers, text browsers, and others.
Note that the image doesn't have to be on your server - but you should only link to graphics on other servers when it's OK to do so. In other words, people don't like having their bandwidth used up by having images being used in other people's sites. That being said, here's an example:
<img src="http://i.creativecommons.org/l/by/3.0/88x31.png" width="88" height="31" alt="Creative Commons License" / >
Lastly, an image can be a link of course:
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
</a>
There are a number of other attributes that you can use but we will do most of our formatting with CSS.
Somewhat related are image maps - generally a large image that has several "hot spots" - click on one part of the image and you follow one link, click on another part of the image and you follow another link, etc.
Back in the old days this was a really hot item. You will find info about "server side image maps" and "client side image maps". Go with "client side" - all modern browsers support them. Here's a tutorial about creating them.
Note that if you use a WYSIWYG web authoring program, you probably have a way to do them very easily.
Final Thoughts
Now go and experiment!
- Create some graphics files - some with line art, some with photos, some with text, small, large, etc.
- Save some as GIFs some as JPGs
- Load them in your page and notice what looks best.
- Using the <img> tag load an external image.
- Extra credit: make an image map.