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!
Índice de contenidos del artículo
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.
To insert an image on your website, you must follow these steps:
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 src="image.jpg" alt="descriptive text">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.
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:
To add these attributes to your HTML code, you can write them like this:
<img src="image-route" alt=" descriptive text" width="100" height="100">In the src attribute we indicate the url of the image, that is, path to the resource 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.
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!
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.
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.
If the image were in a subfolder called images, the path to get it would be:
<img src="images/image.jpg" alt="Image">
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:
<img src="../image.jpg" alt="image">
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:
<img src="../../image.jpg" alt="image">
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:
<img src="../imagenes/imagen.jpg" alt="image">
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.
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:
<img src="C:/blog/imagen.jpg" alt="descriptive text">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.pngWe can perfectly use a full URL like this as the value of the src attribute of the img tag.
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://server-direction.com/image-route/image-name.jpg">In this case, “http://server-direction.com” refers to the address where the image is hosted and “image-route/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.
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:
<img src="logo.png" alt="Esto es mi logo" width="150px">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.
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.
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.
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:
<img src="logo.png" alt="Esto es mi logo" width="150px">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:
<img src="image-path.png" alt="descriptive text" width="100%" height="50%">Here are some practical exercises on using the width and height attributes to adjust the size of images in HTML:
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.
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?
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:
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:
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.
In order to be able to set a background image in CSS, the following properties are used:
Here are some examples of how to use the background-image CSS property to add background images to a website:
body { background-image: url('imagen-de-fondo.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }body { background-image: url('patron-de-fondo.jpg'); background-repeat: repeat; background-position: 0 0; background-attachment: fixed; }.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.
Images are an important part of any website, and they should be optimized not only for display, but also for accessibility.
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.
To add an alt attribute to an image, you must use the ” alt ” attribute and specify the text that describes the image.
<img src="image.jpg" alt="descriptive text">This attribute is not mandatory, but is highly recommended for better accessibility.
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.
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.
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.
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 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.
Any tag that displays images can be used to add icons in HTML, although the span or i tag is usually used.
<i class="fa fa-cloud"></i><i class="fa fa-cloud"></i>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.
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.
<p style="text-align: center">
<img src="image.jpg" alt="centered image">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="image centered">
</div>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.
<figure>
<img src="image.jpg" alt="description">
<figcaption>Image title.</figcaption>
</figure>
