We Meet the third Saturday of each month at the
Sydney Mechanics Institute 240 Pitt St Sydney from 2 pm
Reports from our 2015 Meetings
February 2015
This month we had a look at using images on a web page.
We started with the code used to place an image on the page. Which is the image tag; "< img>< /img>" and discussed the various attributes needed to make it work.
The main attributes are
- Source, shown as src="---" is a must have as it directs the browser to the image you are using. The usual code is
src=/imgage/photo.jpg” when the image is stored in an image folder.
- The next is the alternative text alt=”---"what is in this photo” It is a must have attribute as it is used by screen readers to describe the content of the photo, and it is also seen when a mouse rolls over the image.
- Height and width should also be used as this tells the browser how much space to reserve on the page to provide for the image.
height=”300” width=”300”. You can edit these dimensions to change the size of the image on the page but while a small amount of variation such as reducing
a 300 by 300 size to 250 by 250 may be OK if the image needs substantial resizing use a graphic editor.
- The other attribute is you may use is class or maybe id, eg
class=”imageleft” This code tells the browser to look in the css file and apply the rules defined in the imageleft class.
So the whole tag could look like this.
"< img src="images/280PittSDoorSmall.jpg" alt="280 Pitt St Entrance" height="242" width="232" class="featureright" ></img>"
We discussed the various image formats available.
- The joint photographic expert group or JPEG is the most used photo format with millions of colours and good compression ratio for storage of photos without much loss of quality.
- The portable network graphic or PNG has some advantages over JPEGS for one it has, transparency which allows you not only to have a colour disappear into the background but fade or become semitransparent.
- Graphic exchange format or GIFF was the most common graphic form on the web. It only used 256 colours the “web safe colours” and supports a single colour trenchancy. The other advantage of the giff was it supported animation. You may remember once every second page had an animated giff on it like a mail box. Its over use may well have led to it being considered rather old fashioned these days
- Two other formats in common us are bitmap or BMP. BMP supports any kind of image, any image size, any colour depth and black and white is supported by all editors. It’s main disadvantage is a large file size.
- and the Tagged Image Format or TIFF. The TIFF file is more common in draughting programs like Autocad and Turbocad. Its main advantage is the lines are separate entities and can be subject to edit and notation. For example you can place a tag on a line with its bearing and distance. These two are not commonly used on the net due to their relatively large file size.
We then went on to look at the two main free photo editors, GIMP and Paint.net. To demonstrate them we took a photo, re sized it then played with its colour and resolution.
We put the whole thing together by creating two images and using Expression Web adding them to a photo gallery web page. We created one at 100 px for a thumb nail for the index page and one at 950 px for the main photo.
You can see the result here.
Steve South
Sig Leader