HTML Concept - Images
<img>
Most websites have many pictures/images within them. Images can be a variety of file types, including .jpg, .gif, and .png files.
We use images in different ways. We use them for logos, headers, background images,etc. Images can be linked to themselves or to another page within a website. An image tag has a couple of parts to it.
If an image is kept in the root folder of a website, then its source would be:
<img src="River-Bend-Logo.png" />
Normally when creating a website, we keep images in a separate folder, sometimes in more
than one folder (galleries). If the image is in a folder called "images", then the image
source would be:
<img src="images/River-Bend-Logo.png" />
<img src="images/River-Bend-Logo.png" alt="River Bend logo" style="max-width:60%; height:auto;" />
<img (image tag) src= (source of the image) “images/River-Bend-Logo.png” (let’s the browser know that the image “River-Bend-Logo.png” is located in the “images” folder) alt=”River Bend Logo” (provides a text alternative for search engines), style=” attribute (defines the width and height to the image, /> (closes the image tag).
It is very important to include the "alt" attribute to images. It not only helps with SEO, but also helps with the visually impaired.
You can also embed an image using its absolute URL. For example the absolute URL for the
River Bend logo image is:
<img src="https://www.jamesgirardi.com/images/River-Bend-Logo.png" />
Warning: If you did not take the image, then the image belongs to someone else. It is not good practice to link to someone else's image unless you have permission to do so. It is called hotlinking. Plus, you do not have control over the image any longer. If the owner decided to change the image but leave the URL the same, you may end up with an image you didn't intend to have on your web page.
Styling Images
Sometimes, well, most times the size of an image is not the size that you would like. You can style an image with the width and height attributes. Be careful of this. If you have an image that is 600px x 400px and you use the width and height attributes and change to 500px x 300px, the aspect ratio won't be the same.