{"id":618,"date":"2021-09-01T12:20:00","date_gmt":"2021-09-01T12:20:00","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/websitehow-to-add-image-or-logo-to-your-website\/"},"modified":"2025-03-10T11:50:53","modified_gmt":"2025-03-10T11:50:53","slug":"website-how-to-add-image-or-logo-to-your-website","status":"publish","type":"post","link":"\/ph\/tutorials\/website\/how-to-add-image-or-logo-to-your-website","title":{"rendered":"How to insert an image in HTML in 6 easy steps"},"content":{"rendered":"

When creating websites with a popular CMS like WordPress, there may be restrictions on where you can add images.<\/p>

This can be aggravating because it may be necessary to insert more than just a background image on a web page. For example, one might want to include a website logo in the header and footer.<\/p>

One option is to include images in the site’s theme HTML file. While inserting images on a website using HTML in WordPress does require some basic HTML knowledge, beginners can still follow along because the process is not difficult.<\/p>

This article will show you how to easily insert an image in HTML into your website. We will divide the tutorial into six steps, each with detailed explanations and easy-to-follow procedures.<\/p>

\"\"<\/a><\/figure>

\n\n\n\n\n\n\n<\/p>

How to insert an image or a logo using HTML<\/h2>

There are three ways to upload and insert images in an HTML document: via an FTP client like FileZilla<\/a>, via hPanel’s file manager, and through the WordPress dashboard. For this tutorial, we will be using the second option.<\/p>

We will also break down the image HTML code and explain the attributes needed to insert an image on your site. All the HTML tags and syntax mentioned below are included in our HTML Cheat Sheet<\/a> as well.<\/p>

1. Upload the image file<\/h3>

For this step, we will be uploading an image file into a WordPress website’s public_html<\/strong> directory via Hostinger’s file manager<\/a>. However, this tutorial can still be implemented through any control panel and type of website.<\/p>

    \n
  1. Access your hPanel<\/strong>, navigate to the Files <\/strong>section, and click on File Manager<\/strong>.<\/li>\n<\/ol>
    \"hPanel's<\/a><\/figure>
      \n
    1. Open the public_html <\/strong>directory and double-click the wp-admin <\/strong>– images<\/strong> folder.<\/li>\n<\/ol>
      \"Images<\/a><\/figure>
        \n
      1. Click on the Upload Files<\/strong> button at the top-right corner of the menu bar and select File<\/strong>.<\/li>\n<\/ol>
        \"The<\/a><\/figure>
          \n
        1. Select the image files you want to upload. Ensure that the file names are easy to read and descriptive, as they will be the title attribute of the HTML images. Plus, remember to add dashes to separate the words. Clear image file names also help search engines understand their content, improving the site’s SEO<\/a>.<\/li>\n<\/ol>
            \n
          1. Press UPLOAD <\/strong>and wait until the process is finished.<\/li>\n<\/ol>

            Another way is to add images through the WordPress dashboard<\/a>. Here’s how:<\/p>

              \n
            1. On the WordPress dashboard<\/strong>, navigate to Media <\/strong>– Add New<\/strong>.<\/li>\n<\/ol>
              \"Screenshot<\/a><\/figure>
                \n
              1. Select the images you want to add and wait for them to finish uploading.<\/li>\n<\/ol>

                When it comes to the best image formats<\/a>, there are two categories to choose from, raster<\/strong> and vector<\/strong>. JPEG\/JPG<\/strong>, PNG<\/strong>, and GIF<\/strong> are some examples of raster image file formats, while vectors include PDF<\/strong>, SVG<\/strong>, and EPS<\/strong>.<\/p>

                \"Hostinger<\/a><\/figure>

                2. Access the Theme Folder<\/h3>

                \n\n\n

                \n

                Pro Tip<\/h4>\n

                Since we’ll be editing an HTML document, download a backup of your site before making any changes. This ensures that no data is lost if, by any chance, an error occurs during the process.<\/p>\n <\/div>\n\n\n\n<\/p>

                For this step, first access the WordPress theme editor<\/a> and the HTML file where you want to insert images:<\/p>

                  \n
                1. From the WordPress dashboard<\/strong>, go to Appearance <\/strong>– Theme Editor<\/strong>.<\/li>\n<\/ol>
                  \"Screenshot<\/a><\/figure>
                    \n
                  1. Select the theme your site is using – for example, Twenty-Twenty<\/strong>.<\/li>\n\n\n\n
                  2. Scroll through the Theme Files<\/strong> section and click on the HTML file you want to add an image to. For example, if you want to add a logo to the header, click the header.php<\/strong> file.<\/li>\n<\/ol>
                    \"The<\/a><\/figure>
                      \n
                    1. Find the line where the body HTML <\/strong>tag <\/strong>or <body><\/code> starts. Under the first <div><\/code> tag, insert the <\/strong>image tag: <img><\/code>.<\/li>\n<\/ol>
                      \"Inserting<\/a><\/figure>

                      The <img><\/code> <\/strong>tag is what embeds images into HTML files. It’s an empty tag that includes HTML attributes such as src<\/strong> and alt<\/strong> and doesn’t require a closing tag.<\/p>

                      Now, we’ll break down the other HTML elements required after the img<\/strong> tag.<\/p>

                      3. Add the img src attribute to the image<\/h3>

                      Short for image source, src<\/code><\/strong> is a must-have HTML attribute of an image element as it determines the file path of the image in HTML. If the src<\/code><\/strong> is not specified correctly, the image will not load.<\/p>

                      There are two ways to write an image source attribute, using a relative or absolute path. In the relative path option, the image source is based on the image’s current directory or folder.<\/p>

                      This option is used when the image is uploaded to the same directory as the HTML file you want to edit.<\/p>

                      A relative path syntax looks like so:<\/p>

                      <img src=”images\/file-name.jpg”\/><\/pre>
                      On the other hand, the absolute path specifies the image URL as its source. Use this path when the images are uploaded via WordPress Media or located in a different folder as the HTML file you’re editing.<\/p>
                      An absolute path syntax has the following structure:<\/p>
                      <img src=”your website’s URL\/folder-name\/image-file-name.jpg”\/><\/pre>
                      For this tutorial, we’ll be using the absolute path. In this case, the example image source for the image we uploaded in the images <\/strong>folder would look like this:<\/p>
                      <img src=”https:\/\/yoursite.com\/wp-admin\/images\/website-logo.png”\/><\/pre>
                      If uploading the image through WordPress media, follow these instructions to find the image source:<\/p>
                        \n
                      1. From the WordPress dashboard<\/strong>, navigate to Media <\/strong>– Library<\/strong>.<\/li>\n<\/ol>
                        \"Screenshot<\/a><\/figure>
                          \n
                        1. Click on the image you’re planning to add, then scroll the sidebar until you find the File URL field.<\/li>\n\n\n\n
                        2. Press the Copy URL to Clipboard<\/strong> button and simply paste it as the image source.<\/li>\n<\/ol>
                          \"Pasting<\/a><\/figure>
                          4. Set width and height<\/h3>
                          The width and height attributes specify the size of the image, usually in pixels. It’s essential to always set the image’s width and height. They determine how much space is needed for the image when the browser loads the web page.<\/p>
                          If they are not set, the browser won’t be able to determine the image size and will use its original measurements. This can change the layout of the web page and cause errors when the browser loads the image.<\/p>
                          Below is the syntax for the width attribute with an example measurement:<\/p>
                          <img width=”50px”\/><\/pre>
                          While the height attribute syntax looks like so:<\/p>
                          <img height=”50px”\/><\/pre>
                          Change 50px<\/code> to the desired size, depending on where you’re planning to put the image and the design of the web page.<\/p>
                          5. Add an alt attribute<\/h3>
                          The HTML alt<\/strong> attribute lets you add alternative text or information to the image. A descriptive text is essential when the image fails to load due to an error or slow connection. It also helps screen-readers explain the image to visually impaired visitors.<\/p>
                          Other than that, alt text allows search engines to understand what the image is about during the crawling process. It increases the chance of the images appearing in image search results and helps your web page rank better.<\/p>
                          Remember to be specific when describing the image and provide context to it. It’s also important to insert target keywords if possible.<\/p>
                          An alt<\/strong> attribute syntax looks like this:<\/p>
                          <img alt=”insert text here”\/><\/pre>
                          6. Save changes<\/h3>
                          Once you have input all the essential attributes and information into the HTML image file, the image tag will look something like this:<\/p>
                          <img src=\"https:\/\/yoursite.com\/wp-admin\/images\/website-logo.png\" height=\"50px\" width=\"50px\" alt=”site’s logo”\/><\/pre>
                          \"How<\/a><\/figure>
                          Check the code once more before clicking the Update File button to save the changes. Then, reload the website to see if the changes are successful.<\/p>
                          \"The<\/a><\/figure>