Like a book, which is not a novel, a website sometimes needs images to present a text. Whether it’s to highlight a service that your company offers, photos of dishes from your restaurant or memories of your last ski trip on your personal blog, inserting images on your site is just as essential as adding of text.

On a site that you code alone, you will need to know how to insert an image in HTML. Nevertheless, even if you use a CMS such as WordPress, Shopify or Prestashop (to name a few), it is not excluded that you have to put your hands in the code to insert an image yourself rather than to use the preconceived tools of the CMS.

This is why it is essential to know how to insert an image in HTML. This is what we will explain to you in this tutorial.

Submit your project for free on Codeur.com, receive fifteen quotes and select the ideal web developer.

Find a web developer

Improve your site design effortlessly

Are you having trouble laying out your site, inserting and placing your illustrations as you wish?

Design, HTML and CSS integration, development of forms… Codeur.com freelancers can help you create the website that suits you.

Post your project for free on the platform and receive quotes from qualified professionals in the moments that follow.

Receive quotes (free)

The basics for integrating an image

The HTML tag that will allow you to insert an image is as follows: <img/>.

Despite the fact that it can contain a wide range of attributes, the one and only essential to its functioning is the attribute src.

This attribute will allow you to indicate the path (absolute or relative) of your image. You will therefore indicate in this attribute and between quotation marks where your image is located on your computer, server or any other hosting system.

Let’s say you’re writing an article about pterosaurs and you want to incorporate an image of a pterodactyl into your article. For example, you will retrieve an image from Pixabay (citing the author as source).

Download the royalty-free image of a pterodactyl from Pixabay and then host this image on your server or a free image host (eg goopics.net). Finally, you will add the image to your site using the tag <img/> like this :

<img src="https://i.goopics.net/kn9pe.jpg" />

You can thus have a similar and very simple result like this:

Find this example on https://codepen.io/pen/?template=vYKxOjX

HTML tags scare you? Start by learning the basics of HTML or hire a freelance web developer to create and format your website.

Other attributes of an image

If you want to go further in the insertion of your image on your website you will be able to complete your tag <img/> with other attributes other than src.

Among these attributes are: alt, title, height, width for the best known.

Alt Attribute: Alternate Text

attribute alt or alternative text is a very important attribute on an image because it will offer 2 important possibilities to your image:

  1. Be read by a screen reader that would be used by a visually impaired user. If your image is linked to important text or content, your alt tag will describe the scene of your image and can be read by a screen reader to describe that scene if the user is visually impaired.
  2. The image may be indexed by search engines, Google for the best known, on the keywords contained in your alt tag. This tag is therefore very important for the referencing of your images and therefore of your site as well.

Depending on the usefulness of your image, the content of the tag alt will be different:

  • If your image is just a “decoration” like an icon for example without any real link with an important text or content, then leave the attribute alt blank as below. This way, the image will be ignored by screen readers.

<img src="https://i.goopics.net/kn9pe.jpg"  alt=""/>

  • If the image is a complement to the text or brings a plus to the content to which it is linked, then describe in the tag alt what the image represents or the additional information provided by the image:

<img src="https://i.goopics.net/kn9pe.jpg"  alt="Ptérodactyle volant à travers une forêt"/>

title attribute: Tooltip

This attribute will allow you to add a tooltip to your image that will appear on hover over it to provide additional information for understanding the image.

HTML <title data-recalc-dims= attribute” width=”1200″ height=”482″ />

The title attribute is used like this:

<img src="https://i.goopics.net/kn9pe.jpg" title="Ptérodactyle en vol" />

Find the best web developer on Codeur.com

Your first quotes in 15 minutes

Free and without obligation

Already more than 75,000 customers

Find a freelancer

The height and width attributes: Set the height and width

These two attributes will allow you to define a height (height) and a width (width) base to your image, which is also possible in CSS.

Their use is simple, write the desired dimensions (in px, %, em, rem,…) in these 2 attributes and when the image appears, it will be resized automatically.

Example :

<img src="https://i.goopics.net/kn9pe.jpg" height="100px" width="200px" />

HTML width height attribute

Conclusion

You now know how to insert an image in HTML on your site or any other place where you can write HTML code. The tag <img/> can be simple but also much more complex with the use of a multitude of other existing attributes for this tag.

If despite this tutorial you are unable to correctly integrate an image into your site, do not hesitate to post a free ad on Codeur.com to quickly find the help of a freelancer. You can also estimate the budget that this represents thanks to our HTML integration price simulator!

Also learn how to center your image, round its edges, create a slideshow and add a hover zoom effect with our CSS tutorials!

Do you want to put your image in the background of your web page? Follow the guide to CSS backgrounds!

Leave a Reply

328 Queensberry Street, North Melbourne VIC 3051, Australia. [email protected]

Categories