Images
Text Generators & Image Editing Software ~ HTML Coding ~ Saving Images from the Web
Image Finders ~ Tutorials ~ Kinds of Images & Terminology
Images certainly enhance a Web page. However, too many can clutter a Web page. Ask:
- Does it add to the theme of the page?
- Does it make the text easier to understand?
Images should:
- Convey a message about your website - design a visual theme to your page.
- Avoid clutter
- Strive for balance but not symmetry
- Load quickly on the page - Check the size of your graphics. Keep the total size of all images to less than 30K so they load quickly on the page.
- Use "alt" tags to assist those that are blind.
- Be Optimized. Optimizing compresses your image - that balancing act between quality and download time.
Web pages are actually made up of text (your HTML file) and image files meshed together. That is, if your web page has 4 graphics on it, the page consists of a text file and 4 image files.
Web images can be drawings, clip art, scanned pictures or graphics. Not all images are free - check to make sure an image is freely available to use before adding it to your web page. Give credit to the image source if requested to do so. NEVER LINK to a graphic - always download!
Keep records of each graphic you create:
- Name
- Color
- Font size and face
- Special effects: cropping, airbrush, cutout for text
Text Generators: Creating Logos Online!
To alleviate the problem of font face tags not being recognized by the viewer's computer, create the font as an image.
- Flaming Text
http://flamingtext.com
Over 100 types of fonts to choose from with over 30 different font looks. - Interactive Text Creator
- 3D TextMaker
http://www.gifworks.com/
Stationary or animated logos... variety of font faces and styles. You do not need to fill in every box! - Cool Text
Creates text images from various templates. Select a template, type in the text, select from over 25 font faces, size the text, and select a color or type in a color code. - Banner Generator
- YourGen Text Generator
- SparkLee Text Generator
Image Editing Software:
- Photofiltre* (download)
- Photofiltre Free Tutorials
- Gimp (download)
- Top Free Image Editors
Non-background Image Coding
- img = image
- src = source
- alt = alternative text for those visually handicapped
| HTML Coding | Browser Display |
| <img src="images/books.gif" alt="stack of books width="85" height="47" /> |  |
Saving Images from the Web
- Click with the right mouse button.
- Click on Save Image As… or Save Picture As…
- Place the image on your disk.
- Accept the default name for the image or change to a name of your choice. Do not change the extension (.jpg or .gif)!
- Click "OK"
Finding Copyright Free Image Online
Looking for free images that you can use on a site... for creating a logo? Looking for logo ideas?
- SXC Stock Photos
- Free Foto Search *
- YotoPhoto: Free Image Search**
- A Digital Dreamer
- Copyright Friendly Images
- Stock Vault
- 3DCafe: Free Photography*
- Image*After Images *
- Morgue Files
- Burning Well Image Search
- Pixel Perfect Digital Free Photos
- Free Images *
- Free Graphics
- ArtFavor: Pictures and Vector Art
- Pictures from Old Books
- Free Photos and Clip Art
- Links: Free Graphics, Photos, Animations, Image Search Engines
- Free Web Photos(About.com) *
- Beryl's Free Photos
- DHD Photo Gallery (topic directory)
- Audio, Video, Image Search
Backgrounds & Clip Art Galleries
- Index of Images on the Social Science Data Lab Server
- Web Clipz
- Web Graphics: Links to Sources
- ReallyBig
- Absolute Background Textures Archive
- Backgrounds & Graphics: Links*
- Cool Archive: Icons, Clip Art, Backgrounds, Bullets, Bars, Sounds
- Cool Borders, Buttons, Backgrounds
- 321 Clipart
- A-1 All Free Clipart
- About: Web Clip Art Directory*
- Animation Factory
- Auntie's Free ClipArt
- Encyclopedia of Western Signs and Ideograms
- Free Graphics
- Links to and reviews of free graphic websites, banner creators, photos, fonts...
- Graphic Maps: Free Globes & Maps of All Kinds
- Icon Bazaar
- Image Paradise (Desktop Publishing)
- Prinzess' Graphic Collection*
Tutorials
- Graphic Tutorials - Extensive links to: creating graphics, banners, tips for various software programs...
- Web Design Tips: Graphics
- Pixel Ruler
- Complete Guide to Digital Photography and Cameras
Paint Tutorials
In addition to creating fonts online, you can create fonts using PAINT! Paint is installed on all computers. Check out these examples of logos made with Paint.
- The Paint Toolbox
- Using the Paint Toolbox
- Paint Toolbox & Examples of How to Use Each Tool
- Creating with Paint (nice examples)
- More Advanced Work with Paint
- Animation Created with Paint
Kinds of Images & Terminology
Most browsers display images in GIF (.gif) or JPEG (.jpg) formats. GIF stands for Graphics Interchange Format. JPEG stands for Joint Photographic Expert Group.
GIFS:
- text art
- cartoons
- poster art
- line art
JPEGS:
- photographs
- 3D
- paintings
So, what's the difference between a GIF image and a JPG image?
GIF files can go up to 256 colors and look better when the visual size of the image is small and is not a photograph. JPG images can go up to 16.8 million colors and look better when the visual size of the image is mid-to-large and its content is photographic.
What is JPEG?
JPEGs (Joint Photographic Expert Group) were developed for photographic-type images. You can select a compression setting for each image - Low, Medium, or High. For each photographic image on your Web site, determine the "balance" between desired quality and download speed. The higher the quality, the slower the download speed.
Use JPEGs for photographic images, but not for line drawings or for images with large areas of flat color.
What is GIF?
CompuServe's GIF (Graphics Interchange Format) are used for simple line drawings or logos.
What is PNG?
Portable Network Graphics was intended to replace GIF because of LZW patent problems and GIF's 256 color limitations. Most graphics programs already allow you to save as PNG.
What is TIFF?
Tag Image File Format is generally how graphic artists save master copies of photos that have been scanned. TIFF files are very large and are generally converted to GIF or JPEG.
What is Bitmap?
Bitmaps are images that are created and edited in a paint program. Bitmaps are made up of pixels, with each pixel a single color.The number of pixels in a bitmap determines its resolution. Images with a high resolution appear sharp, while those with a lower resolution can appear blurry.
Resolution is measured by dots per inch (dpi), the number of pixels found in one inch. Thus, the higher a bitmap's dpi, the higher its resolution.
When you resize a bitmap, the stretching causes poor image quality. Bitmaps take up an enormous amount of memory.
Grayscale image is a type of bitmap used for black and white pictures. A grayscale image is made up of 256 shades of gray, offering a higher picture quality than a standard black and white image.
Interlace. Images load into the browser gradually rather than loading from top to bottom. Interlacing doesn't change the image appearance on the page. Instead, it affects how the image is saved and its appearance while it is being loaded.
The image will load into the browser gradually rather than loading from top to bottom. The effect is as if the image is appearing from a distance and becoming clearer as it loads. In saving the image, an interlaced GIF is saved in several "passes" - the first pass saves every eighth row starting from the first, the second pass saves every eighth row starting from the fourth, the third pass saves every fourth row starting from the third one and then the remaining rows are saved. As the image is displayed on the web, the "parts" of the image load in the order they were saved. This creates a blurry or blocky effect as it is initially loaded, thus becoming clearer as the image is "filled" in. Interlacing is used primarily for large images that take time to load.
Dithering. To display a full-color image on a 256-color computer, the computer simulates colors it can't actually display. This is done by dithering - combining pixels from its 256-color palette into patterns that approximate other colors. Up close, these colors look speckled. In order to avoid dithering, create images that use the colors specified in browser-safe colors.
Anti-Alias. Smoothing out the outside edges of an image. This inserts pixels of a color between the image and the background to blur the edge. Note that the jagged edges will still be visible if the color contrast is strong (ex: black image on white background).
Transparent. To keep edges from showing around your image, you can take out a color to allow the page background to show through the image. (Note: this is for GIF only.) Transparent GIFs seem to float on the page!
Memory and File Size. How can you tell how much memory is being used by your text and images? Click Start - Programs - Windows Explorer -on left side, select folder where your web page is located -right side displays the contents and KB of each file.
Background Images
A background image repeats itself both horizontally and vertically. That is, background images will "tile" -- appear in the background at whatever size the image is and then reproduce itself over and over until the page is filled. So, you can use a small image for the page background and still get full-page coverage.
Complex backgrounds are more difficult to view.
Browsers load the background last. A memory intense background will slow down connection to your page -- viewers may tire and leave your page before the actual content is loaded.