HTML & CSS for beginners (Part 09): Graphics for the web (01)

When you save images in a graphics program, you are offered a variety of different graphic formats. But which one should you choose when it comes to integrating the image into a website?



If you want to present an image on your website, you have the choice between three formats.

- GIF

- JPEG

- PNG

But which format should you choose for which purpose? Is it better to use GIF or PNG for photos? First, a brief overview of the capabilities of the individual formats.

This brief overview already shows the different properties of the formats. It is therefore hardly surprising that certain formats are more suitable for certain applications than others. This is exactly where the following section comes in. It shows when it is best to use which format.

Photos

There is no question that JPEG is used for photos. This is because images can be compressed very well in this format, whereby the quality can be selected variably. Here you can find the right balance between quality and compression rate.

Screenshots/diagrams

The PNG format is best suited for this purpose. PNG is also interesting for technical drawings, floor plans, etc. PNG can also be used for images in which transparent areas are used.

Fonts/Logos

If you have text in your logo or want to display text at all, you should use GIF or PNG. However, PNG is usually used due to its better performance. JPEG is unsuitable for displaying fonts, as the edges are displayed uncleanly.

Transparency

When it comes to displaying transparent areas, JPEG is ruled out from the outset. This leaves GIF and PNG. But which of these two formats should be used when transparency is important? GIF can handle transparency in principle, but the results are usually unclean. In GIF format, a pixel can either be completely visible or completely transparent. This phenomenon does not occur with PNG. This format has an additional alpha channel, thanks to which finer transparency results are achieved.

Integrating images

Graphics can be integrated via the img element. (Please note that images are now very often integrated via CSS. Detailed information on CSS will of course follow. However, the HTML path shown is completely standard-compliant and can also be used in HTML5 without hesitation).

<img src="logo.png" alt="PSD-Tutorials.de" />

img is a standalone element. The image can be described in more detail using the corresponding attributes. The most important attribute is undoubtedly src. This is because it is used to specify the image that is to be included. In the example shown, I assume that the graphic logo.png is located in the same directory as the HTML file in which the img element was defined.

To ensure that the images are actually displayed, the path to them must be specified correctly. HTML provides various options for referencing.

- Absolute paths

- Absolute paths relative to the base address

- Relative path specifications relative to the base address

First of all, absolute paths. This variant is usually used whenever the image is not located on your own server. Let's assume you want to embed the butterfly known from PSD-Tutorials.de into your website. Then you could theoretically load it directly from the server on which it is located. First determine the path of the image. The easiest way to do this is to right-click on the image in the browser and then select Copy image URL.

What is loaded into the clipboard should look like this in the end:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

This is the complete address of the image. This information is already sufficient to embed the image.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

The src attribute is therefore assigned the full path to the image.

However, the problem with these absolute paths is that you ultimately have no real control over the embedded content. If the referenced graphic is deleted from the server or moved to a different directory, a display error occurs.





This absolute referencing should therefore be the exception.

Absolute path information relative to the base address

This variant is always suitable if the graphic is located on the same computer/server as the HTML file and is accessible via the current protocol. It sounds complicated, but it is not.

Here is an example:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

This is the complete address. The following part is the absolute path.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

This absolute path specification is relative to the base address http://4eck-media.de.

Relative path information relative to the base address

The variant presented here is certainly the most common. The current path is always taken as the reference point from which addressing is ultimately carried out. Again, here are some examples. Let's assume that there is an index.htm file into which you want to integrate an image. In addition, the directory images exists on the same level, in which the said image is located.

index.htm
images
--logo.png

The call in the src attribute would look like this in this case:

src="images/logo.png"

But what would the whole thing look like if the image is located in a directory above the HTML file?

project
--images
-----logo.png
--archive
-----index.htm

In this case, index.htm is located one directory below the logo.png image to be included.

src="../images/logo.png"

The syntax here means: Go up one level, change to the images directory and display the logo.png.

project
--images
----logo.png
----2013
------januar
--------index.htm

Here the syntax looks like this:

src="../../images/logo.png"

In this case, the logo.p ng image is located two levels above the index.htm in the images directory.

The advantage of relative path specifications is their flexibility. For example, you can develop the project locally and then copy it to a "real" server. The paths then remain unchanged.