Images

webdesign 4

Tools · Image-Tag · Image file formats · Basic skills · Homework · Links

What tools do we need?

The Image-Tag

<img alt="Dangerous" />

alt: Description of the image which is displayed if the image cannot be loaded or shown
src: URL of the image file
border: display a border in text color around the image in pixels (or “0” for no border)
width & height: dimensions of the image to be displayed – not neccessarily the real image dimensions

Image file formats

PNG – Portable Network Graphics
- lossless compression, supports transparency (alpha-channel), colour profiles
- best for full tone images (graphical style, like comics, with very few colour shading)

JPEG – Joint Photographic Experts Group
- lossy compression, no support for transparency, supports colour profiles
- best for half tone images (“real world images”, like photos)

Other file formats: GIF (predecessor of PNG, not often used anymore, animation possible), SVG (vector images)

Basic skills

  • opening an image in the GIMP
  • scaling an image to custom dimensions
  • cropping an image
  • rotating
  • saving in the right file format
  • checking the size of the image file
  • embedding the image into the page

Homework:

Embed 3 images into one page, one of the images should link to a second page.

Links:

First steps in the GIMP: http://http://www.gimp.org/tutorials/Lite_Quickies/
Graphics file formats: http://http://en.wikipedia.org/wiki/Graphics_file_format