Insert HTML images: Learn how to put images on your website with this tutorial

Learning how to insert HTML images into your website is essential to improve its visual appearance and attract visitors. With HTML, you can use various attributes to customize the image and optimize its size and weight to improve accessibility.

You can also adjust the image size and use different image formats to create a richer and more enjoyable experience for the user. In addition, you can use CSS to insert background images on your page.

In this article, you’ll learn step by step how to insert an image from different directories or files, and how to make your images more accessible to your readers. We’ll also explain how to adjust image sizes, what formats are supported by HTML, and how to use videos and other media. We hope you enjoy this tutorial!

How to insert an image in HTML

Inserting an image into a web page is a common task for any web developer. Here we show you the steps you must follow to do it correctly in HTML, as well as the necessary attributes for it.

Steps to insert an image on your website

To insert an image on your website, you must follow these steps:

• Open the HTML file where you want to insert the image with a text or code editor.
• Locate where you want the image to appear.
• Make sure the image you want to insert is stored on your computer or on the web.
• Enter the following code to insert the image into your HTML file:
  <img src=”path-of-your-image”>

Remember to replace “path-of-your-image” with the location of your image. If you have the image in the same folder as your HTML file, you can simply name your image file.

Later I tell you all about file paths.

Therefore, to put the image on a web page with HTML we must use the img tag with the following syntax:

img comes from image

src comes from source

alt comes from alternative

Generally, the image will be located on the same server where our HTML pages are stored. The most common image formats are files with gif, jpg, png, webP or svg extensions. We will see it in detail later.

In the example above the image file would be located in the same folder where the file in which we are writing the code is located, which in the tree structure of the capture would be called “article1.html”.

Although the svg format is a vector image file type and cannot be viewed with any image viewer, modern browsers are compatible and allow them to be used and displayed correctly.

It is usually used for the logo in HTML because it takes up little disk space.

Insert an HTML image

In addition to the path of your image, there are other attributes that you must take into account when inserting images in HTML, so we have:

• src: defines the path to the resource, in this case, the image file you want to display. It is the only mandatory one for the label to work.
• Alt: This attribute describes the image for the visually impaired. If the image does not load, the alt attribute will display the alt text instead.
• Height/Width: These attributes define the size of the image in pixels. It is advisable to use them to make the page load faster.

To add these attributes to your HTML code, you can write them like this:

src attribute of an HTML img

In the src attribute we indicate the url of the image, that is, path to the resource (therefore the source in English) and the name of the image file.

It is highly recommended not to use spaces, symbols, tildes, eñes or capital letters in file names to avoid difficulties.

If the image is located in the same directory where the HTML page is stored, indicating the file name is sufficient.

In this case, as seen in the example, you do not need to use any folder paths.

Alt attribute of an HTML img

The alt attribute, for alt text, we use to specify text that users will see when the image cannot be displayed.

It’s also what a screen-reading app reads like those used by the visually impaired and blind, so the text should describe the content of the image.

With these simple steps and attributes, you can insert an image into your web page using HTML. Always remember to use alt and size attributes for better accessibility and loading speed!

Insert pictures from a file

When we want to add an image to our website, we can do it in two ways: inserting the image from the same directory where our website is located or from another directory on the server side.

Insert images from the same directory

If the image we want to insert on our website is in the same directory where our page is located, we can simply use the following syntax so that the image is displayed on our website: <img src="nombre-de-la-imagen.jpg"> In this case, “image-name.jpg” refers to the name of the image file we want to insert.

Relative routes. Frequent possibilities with examples

If the image were in a subfolder called images, the path to get it would be:

That is, we put the name of the folder and the / bar before the name of the image file.

Note that relative and absolute paths are the way to reference files, so they can be used in other types of tags, such as links or hyperlinks.

If the image is located in a parent folder where the HTML page is located, the syntax will be:

That is, we put you first.. and the bar / to the image file name.

The two points in a row, therefore, serve to address us to a parent capeta. So if we had to go up two levels it would look like this:

In the previous image we are in article 1.html and we must climb two levels to reach the image.

Finally, if we want to access an image that is in a folder called images and the HTML file from which we reference in another folder that is at the same level as the images, we should first raise a level and then access the images folder, being as follows:

This way of using file paths is by relative references, that is, we determine the path with respect to the element from which we request the external resource.

We will apply the same later when for example we want to reference a css style file or a js script.

Below you can see this explained in video. This video is part of my HTML5 Online Course.

Access to see all the details and more classes of free access!

Absolute routes. Here I link a video so you understand it better

Another way to reference files is by absolute paths. The absolute paths have as a reference the root of the file system in which we are.

If, for example, we have a project in a folder called blog on drive C of the disk, following the previous examples, the absolute path in a Windows system would be as follows:

When we work with files it is not advisable to use absolute paths, since if we moved the project for example to an external storage drive such as a USB pendrive, the absolute path would stop working, since the letter of the drive would change. Whereas through relatives we would not have that problem.

On the contrary, when we work on web servers, absolute paths that start from the domain name are usually used as the root element.

This would be the absolute route of the logo of this website:

http://diegocmartin.com/wp-content/uploads/2016/08/logo-diego-004-e1499697890812.png

We can perfectly use a full URL like this as the value of the src attribute of the img tag.

Here you can watch another free video of my HTML5 course on absolute routes.

Insert images from another directory on the server side

If we want to insert an image that is stored on another server, we can do it using the following syntax through absolute paths: <img src="http://direccion-del-servidor.com/ruta-de-la-imagen/nombre-de-la-imagen.jpg">

In this case, “http://direccion-del-servidor.com” refers to the address where the image is hosted and “image-path/image-name.jpg” refers to the location of the image on the server.

It is important to note that, by using this form of image insertion, a dependency is created between our website and the server where the image is hosted. If the image is deleted or renamed on the server, our website will no longer display it.

Specify the size of images

We have seen that the img tag has 2 attributes, src and alt mandatory, but it can have more. Two very useful are width and height, with which we can control the width and height respectively.

These attributes serve to show the images to the size we want regardless of the dimensions of the file.

Normally we will use only one of the attributes, since in this way the browser will recalculate the other dimension proportionally so that the image is not distorted.

Example:

As you can see, we are expressing the measurement in px, pixels.

It is also usual to use the percentage % as an average unit. In this way, the size of the image will be adjusted to the available space according to the size of the screen. We’ll see more about this in CSS.

Image with link or link with image? with downloadable example

It’s a question I like to ask my students. What do you think? How do we build an image that when clicked goes somewhere else?

Hyperlink to an image. and

As we already know hyperlinks and how to insert images on our page, we can now create hyperlinks that show images.

The solution is to place the img tag between the opening and closing clauses of the link (), replacing the usual anchor text.

Here is an example of a page that shows two images (photo1.jpg and photo2.jpg) as hyperlinks. Clicking will take you to another page.

Images are supposed to be placed in a folder called images:

  
  
  
    
Click on the images for +info.
    
    

  

For the example to work when you open it in the browser, you must have a file and folder structure like the one proposed, that is, the html files together in a folder along with another folder that contains the images.

You can download this example commented on images and links:

Example of images and links2

How to put a background image with CSS

To put images as background in HTML it is necessary to resort to CSS code. By using the background property, among many other things we can specify the url with the path to the image file we want to use.

This would be an example of the CSS code:

background: url('imagen1.jpg');

If you’re not clear about the basics of how CSS works, start here.

And here is an example in which I put a background with 4 images at once, each in an area.

You can do these things also within other elements like forms.

CSS properties for background images

In order to be able to set a background image in CSS, the following properties are used:

• background-image: Defines the background image.
• background-repeat: If the background image is set, it can be placed as a waterfall (repeat), only show it once (no-repeat), or adjust to the image (repeat-x or repeat-y).
• background-position: Determines the position of the background image.
• background-attachment: Defines whether the background image moves with the content or stays fixed in place.
• background-size: Sets the size of the background image.

Practical examples of CSS background images

Here are some examples of how to use the background-image CSS property to add background images to a website:

• Set a background image to full size:
  body { background-image: url('imagen-de-fondo.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }
• Create a background pattern with an image:
  body { background-image: url('patron-de-fondo.jpg'); background-repeat: repeat; background-position: 0 0; background-attachment: fixed; }
• Apply a background image to a particular section:
  .seccion { background-image: url('imagen-de-fondo.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }

With these properties, we will have a wide variety of options to customize the appearance of our website using CSS background images.

To know advanced things I invite you to visit the section Backgrounds with multiple images of my article Stylize specific HTML elements with CSS3 with examples.

Improving the accessibility of our HTML images

Images are an important part of any website, and they should be optimized not only for display, but also for accessibility.

The importance of the alt attribute

The alt attribute of an image is very important for accessibility, as it is used by screen readers to describe the image to visually impaired users. Therefore, it is important to always add a descriptive alt attribute to each image used on the page.

Add an alt attribute to an image

To add an alt attribute to an image, you must use the ” alt ” attribute and specify the text that describes the image.

This attribute is not mandatory, but is highly recommended for better accessibility.

Text alternatives for graphic or multimedia content

In case the content is visually complex or contains important information that is not present in the accompanying text, alternative text can be used to better describe the graphic or multimedia content, such as videos.

To do this, the “longdesc” attribute must be added in the HTML element indicating the path where the alternative text is located.

You can also integrate the multimedia content on the page so that it is accessible to those who cannot see the original material.

Other considerations to improve the accessibility of our images

In addition to the above, there are other important considerations to keep in mind when working with images to improve their accessibility.

It is important to provide clear and concise descriptions of images, use images that have a clear and necessary purpose for understanding the content, ensure that images are in the correct format and optimized for web, and avoid using images that may be harmful or discriminatory.

Following these considerations, we can significantly improve the accessibility of our HTML images and, therefore, improve the browsing experience of all users.

Adjusting the size of images in HTML

The size of the images is an important factor to consider in order to improve the user experience and performance of our website. Here are some aspects related to resizing images in HTML.

Importance of width and height attributes

The width and height attributes allow you to set the size of images in pixels. It is important to note that the size of image files affects the loading time of a web page, and therefore, the performance of the website and user experience. Therefore, it is advisable to adjust the size of the images to optimize the page load.

How to adjust the size of an image in HTML

To adjust the size of an image in HTML, you can use the width and height attributes in the image tag. For example, to set an image width of 500 pixels and a height of 300 pixels, you can use the following code:

Percentages can also be used to set the size of the image relative to its container. For example, to set the image to occupy the full width of the container, you can use the following code:

Practical exercises of width and height attributes in images

Here are some practical exercises on using the width and height attributes to adjust the size of images in HTML:

• To set an image width of 400 pixels and a height of 200 pixels
• To set the image to be 50% wide of the container
• To set a maximum image width of 800 pixels

Keep in mind that the size of the images not only affects the performance of the web page, but also accessibility. Therefore, it is important to use these attributes effectively and optimally to improve both the user experience and the SEO of the website.

Image formats supported by HTML

Common image formats

The most common image formats used in HTML are JPEG, PNG, and GIF. Each of these formats has its own characteristics and it is important to consider its use depending on the context in which you want to use them.

• JPEG is ideal for photographs as it retains high image quality with a relatively small file size.
• PNG is useful for graphics with transparent areas and for images that require higher image quality than JPEG.
• GIF is ideal for animated images with transparent background.

Vectors and their compatibility with HTML

Unlike raster images, vectors do not lose quality when scaled because they are based on mathematical formulas rather than pixels. Therefore, they are ideal for logos and icons. SVG (Scalable Vector Graphics) is a vector-based image format that supports HTML.

By using SVG instead of raster images, optimal image quality is ensured at any scale.

New Generation WebP Images

New generation images, such as the WebP format, are new types of image files supported by new browsers that further compress images, so that loading times are reduced.

For some time Now Google has recommended using them to improve the SEO of our pages, but since they are not compatible with outdated browsers, we must be careful when using them.

Currently, for content managers such as WordPress, there are plugins that generate webp versions of our images and serve them exclusively to users who can view them, in this way we avoid the problem of incompatibilities.

Two examples of plugins that do this are WPRocket and Siteground’s SG Optimizer.

HTML icons

Any tag that displays images can be used to add icons in HTML, although the span or i tag is usually used.

The previous example would be the usual way to insert an icon in our HTML code using the Font Awesome icon library, one of the most popular.

Additionally, if you want to put the favicon (the icon that appears in the browser tab), you have to use the link tag in the head of the page in the way you will see right in the section that I indicate of my article. Favicon. What it is and how to create and install it.

How to center images in HTML

To center images you have to take into account that it is an element Inline, so it is located by default after the text, not on a new line, so a trick is to simply put it in a new paragraph, which is a block element and consequently passes it to a new line.

Once that’s done, we’ll have to resort to CSS to center it with the text-align property and the “center” value.

We can also use the trick of the car centered with the margins in CSS:

<Div>
    <img style="margin: 0 auto" src="image.jpg" alt="centered image">
</Div>

Put images with advanced HTML5 tags

You should know that there are other tags a little more advanced to insert images in the HTML document.

The figure tag is intended to add various graphic elements such as images, photographs, graphics, etc. It is accompanied by the figcaption tag, to specify the title or description of the visual element.

There is also the picture tag, with which we have greater control of the elements and is similar to video or audio, which were incorporated into HTML5, so you can find it in this section of my article News and structure of HTML5 web pages.