Euro PC Solutions Blog

HTML – Images / Pictures

Do you want to insert images into your web site? Pfffff too easy
If you’ve understood how relative links work from the previous chapter, this chapter won’t have any difficulties

So, to make this chapter a bit longer we’ll start slowly by seeing the different image types we can put in a web site (JPG, PNG, GIF…)

This chapter is the last in the first part of the lessons. In the second part we’ll (finally) introduce CSS and there will be lots of new things to learn… so benefit from this small rest while you can

The Different Image Formats

What is an image format ?

When you’re using an image you can save it as several different “formats”. The size (in kb) will be more or less high depending on the format and quality chosen.
For example, the drawing program Paint (even if it’s far from being the best) offers you several formats to save your pictures :

The formats are more or less adapted depending on the type of image (photo, drawing, cartoon…). Our objective here is to see the different formats used on the web, so that you know them & know the best format to choose for your picture. Don’t worry there aren’t a lot of formats available for the internet and it will be quick

All the pictures on the internet have one point in common : they are compressed. This means that when saving, your computer does calculations to make the picture smaller in size and faster to load on the web :

• JPEG : the most common format. It is in particular adapted for photos and the background image of your computer will often be in this format JPEG images mostly have the extension .jpg, but sometimes .jpeg (it’s the same thing).
  Here’s an example of a JPEG image :

  

• PNG : PNG is the most recent formats of the lot. This format is adapted to most images (I might be tempted to say “everything that isn’t a photo”). The advantage of PNG is that it can have a transparent background, which can be useful.

  • PNG 8 bits : version of PNG limited to 256 colours. 256 colours isn’t a lot when you know that JPEG supports several million colours…but it’s enough for most small graphics, for example this one :

    

  • PNG 24 bits : PNG 24 bits is the most evolved version of PNG and supports several million colours (like JPEG). Why use a PNG instead of a JPEG ? For transparency ! You can easily have a transparent background on graphic elements, namely on the design of your website.
    It looks great but sadly IE6 can’t read PNG-24 correctly and doesn’t take into account the transparency

    

    Take a look at this image under Mozilla Firefox or something, and then take a look at it in Internet Explorer 6 (impossible if you have Windows Vista or 7). In IE6 you will see that the image is really ugly, the problem is solved in IE7 but there are still people using IE6.

• GIF : GIF is quite an old format, which has been used a lot (and still is used a lot). Today, PNG is a lot better than GIF : the images sizes are a lot smaller and the transparency is a lot better. GIF is limited to 256 colours(whereas PNG goes to several million colours). However if I’m telling you about GIF, it’s because it does still have an advantage : it’s animated. Example :

  

The other formats, not listed here, such as bitmap (*.bmp) are forbidden because they are not compressed & so take to long to load.

As a summary here are the formats to use :

• For a photo : Use JPG
• For graphic elements such as logos or images with transparency : Use PNG depending on the number of colours needed (8 bits or 24 bits)
• For animated images : Use GIF

To avoid problems, get used to saving all of your pictures with names in small letters, without spaces or accents (ex : my_image.jpg).
Make sure that the extension is in small letters, as Paint saves files with extensions in capitals. (my_image.PNG).

Insert An Image

Right, now we’ll get back to our XHTML code

To insert an image we use the tag <img />.
It is a solo tag (like <br />)
This tag can have several attributes of which 2 are indispensable :

• src : Allows us to say where the wanted image is situated. You can either insert an absolute path (ex: “http://www.europcsolutions.com/blog/image.jpg”), or a related path (which is done more often). Therefore if our pictures are in a subfolder images you type : src=”images/image.jpg”
• alt : It means Alternative Text. You must always indicate an alternative text for images, meaning a short description of the image. This text will be shown in place of the image if the picture can’t be downloaded (sometimes it happens), or on browsers for disabled people (blind) who sadly can’t “see” the picture. For example alt=”a flower”.
  I know that it can become a bit frustrating having to write alternative text for each picture, mainly because it seems “useless”, but it must absolutely be done (just tell yourself that it’ll help your google results). If you don’t do it your site won’t respect the XHTML standards and your site will be identified as not following the guide lines.

Here’s an example of an image insertion :

<p>
     Here is an image I took during my last holidays :<br />
     <img src="images/hawai.jpg" alt="Photo of Hawaii" />
</p>

To show you the organisation of the files here’s a screenshot of my computer :

Well, as you can see, inserting an image isn’t very hard if you’ve understood how related links work The big difficulty (if you can call it a difficulty) is choosing the right format of image. In my example it was a photo so I used JPG.

Delete any spaces in the name of your image (or replace them with “_” or “-”) and make sure that all the letters are small like this :
“images/image-of-hawai.jpg”
If your image doesn’t show in your browser, it’s probably because the path is wrong ! Simplify the location and names of your images so that they’re easy to insert

Notice as well that images are necessarily inside a paragraph (<p> </p>) If you don’t the page will probably display correctly but won’t respect the XHTML standards.

Tooltips

In Internet Explorer 7 and earlier the alternative text shows up in the tooltip when your mouse goes over an image. This is not normal, as this attribute is not made for showing text in a tooltip.

The attribute that is made for this purpose is the same as for links : it’s “title”. This attribute is optional (on the contrary to “alt”).

An Example :

<p>
     Here is a photo I took during my last holidays in Hawaii :<br />
     <img src="images/hawai.jpg" alt="Photo of Hawaii" title="Do you want to go there ?" />
</p>

A quick summary :

• The attribute for showing information boxes is title.
• In Internet Explorer only, if you don’t put anything for title, the alternative text (alt) is shown in the information box.
  This is a particular case as the alternative text shouldn’t normally be shown in the information box.
• If you have put both attributes (“alt” & “title”), then Internet Explorer will show the title in the info box as normal.
• All the navigators, apart from Internet Explorer, show nothing in the info box if title doesn’t exist

If you’ve got a bit lost, just forget about this particular case
I just had to say that to those who were asking themselves questions.

When I say that Internet Explorer does some things that aren’t normal it’s because it doesn’t always respect the standards which have been established on the web. I’ll talk a bit more about these standards later on in an annexe.

Clickable Images

As with text, images can be used as links. Instead of putting tet between the tags <a> </a>, you can put a tag <img />!
For example :

<p>
     Would you like to go to a magic place ? Nothing is easier, just click on the following image :<br />
     <a href="http://blog.europcsolutions.com"><img src="images/hawai.jpg" alt="Photo of Hawaii" title="Click to go there !" /></a>
</p>

The annoying thing is that you can see a blue (or purple) border around the picture when it becomes clickable. Happily, we can take the border away using CSS.

I bet you’d like to know more about this famous “CSS” with all the time I been talking about it, wouldn’t you ?
Then carry on to the second part of our lessons about CSS