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

What tools do we need?¶

• Graphics programm:  GIMP (Linux, Mac & Windows): http://http://www.gimp.org//

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