Images in Html

Images on a web page are known as bitmaps and can represent icons, buttons, images with transparent areas, or photos

Depending on the level of compression used we will lose quality, so we must know how to choose the format that best suited to our needs:

• png

  it is a lossless compression format that also supports transparency

  We can represent icons or images with transparent areas, so that is a good alternative for any type of image that is not a photograph

• jpg or jpeg

  it is a format of compression with loss that does not supports transparency

  It is typically used for photographs

• gif

  it's a lossless compression format, but it's limited to 256 colors

  It takes up very little space and is ideal for low-quality images, such as icons or buttons

  Supports transparencies and animations

As with HTML editing, we need an image editor for manipulation

There are commercial and very powerful editors like Photoshop, but we can also use editors with a similiar quality and open source like GIMP

We also have the possibility to use some tool that allows us to convert between the different formats, such as ImageMagick

The item to include images in our web page is img which must include at least the attribute src to which we will tell the browser, by means of the relative or absolute path, the name of the image and by its extension, the format of the same

<img src='/wp-content/uploads/2016/04/palmeras.jpg' width='1260' height='240' alt="Secarcam's Computer Science Web" />

In the example we can see that in addition to the attribute src we have used width that allows us to specify the width of the image

The attribute height that allows you to specify the height of the image

And the attribute alt entering a description (a word or a short sentence) about the image

In principle it can be omitted, but it is beneficial for those who access the page with a browser in the form of only text, since they will not be able to see the image, but at least they will be able to get an idea about it thanks to that description

Remaining as a result:

You can capture the images that the browser shows us, in order to save them permanently on your hard drive

From the browser, click on the image with the right mouse key, we will see a menu in which there is the possibility to save the image in the directory of the hard drive that we indicate

In the event that we do not want users to be able to save the images from our website we will need to use some technique to avoid the press of the right key of the mouse using Javascript

Image used as link

In some cases, an image is also used as a link to another page

With regard to the location of the image file, it is used just like a link. If nothing special is indicated, it means that the file is in the same directory as the HTML document we are writing

An image that is not on our system can be uploaded using the same method as the links, the full URL of the image is indicated on the label. Although this is not very advisable, as it would unnecessarily lengthen the loading time of our page

A very important aspect to consider is the size of the images, because a large image is a large file, and this can cause excessive loading time, with the consequent risk that anyone trying to load our page will get tired of waiting, and desist from it

<a href='/wp-content/uploads/2016/04/palmeras.jpg'><img src='/wp-content/uploads/2016/04/palmeras.jpg' width='150' height='75' /></a>

The example has used a thumbnail (miniature reproduction of the image), which links to the image in its true size

This way we don't reload a page too much, and the user will be the one who decides which images they want to upload

Another way to achieve this is to reduce it with an image editor to 150×75, save it with another name, and then make the small one the link of the big

This would be a solution if we used a very old version of Netscape, as it did not recognize the width and height attributes

Remaining as a result:

<a href='index.html'><img src='/wp-content/uploads/2016/04/palmeras.jpg' width='150' height='75' border='0' /></a>

In the example the image has been used to redirect us to the home page, so we can link the image to the desired page

We can also use icons, buttons or animations to perform this task

In the example we have also used the attribute border with the value 0 because sinó the image will be surrounded by a rectangle of the normal color of the links, in this way, we prevent that rectangle from appearing

Remaining as a result:

By hovering over this image, we check that it also acts as a link even if it lacks the colored rectangle. This may be more aesthetic, although there is a risk that the user will not realize that the image serves as a link

Position of the text relative to the image

To choose the position of the image relative to the text there are different possibilities

The simplest is to place it between two paragraphs, with the text on one side

Using CSS style sheets you can get more elaborate effects, such as animations, motion, rotations, etc

To choose the position of the text relative to the image using the attribute align and allowed the following possibilities:

• top

  the text is top-aligned

• middle

  the text appears aligned in the middle

• bottom

  the text appears bottom-aligned

This attribute is no longer supported in HTML5 and the example has been included for backward compatibility, we recommend that you use a style sheet to get this effect or by using the element div

<div align='top'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Top-aligned text</img></div>
<div align='middle'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Text aligned in the middle</img></div>
<div align='bottom'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Bottom-aligned text</img></div>

In the example we have opted to use the item div

Remaining as a result:

Top-aligned text

Text aligned in the middle

Bottom-aligned text