Working with images in HTML

In this lesson, we'll Working with images in HTML. Images can add visual interest and help inform your visitors.

Table of Contents

how to add images in html

To put an image on a webpage we use the image element. It's written as IMG. And then there are attributes we want to include on every image element.

The source attribute, shortened to SRC. The alt attribute, ALT. And the width and height attributes.

The source attribute is what tells the browser which image file to load.

<img src="img_1.jpg">

In terms of types of images in HTML that can be displayed on your webpage, there are several, but the three most common are jpegs, gifs, and pngs. Jpegs are commonly used for photographs and they have the .jpg file extension. Gifs can include transparency, and can be either a static or an animated image. The animated gif has been experiencing a bit of a renaissance in the past few years. Gifs have a .gif file extension.

Png, are an extremely flexible image format. They're a vector-based image that can also include an alpha channel or transparency.

ALT attribute

We also need an ALT attribute. This acts as a substitute for the image whenever the image can't be seen. People who are blind, for example, may use a screen reader that reads the ALT text aloud to them.

size of images

Next we need to let the browser know how big the image is in pixels. For example an image is 400 pixels wide and 300 pixels tall.

Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.

The size of images is increasingly being specified using CSS rather than HTML.

You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.

how to align images in html

The align attribute was commonly used to indicate how the other parts of a page should flow around an image. It has been removed from HTML5 and new websites should use CSS to control the alignment of images

<img src="img_1.jpg" alt="Smiley face" width="500" height="600">

Si quieres conocer otros artículos parecidos a Working with images in HTML puedes visitar la categoría HTML COURSE.