{"id":1355,"date":"2019-07-24T21:20:36","date_gmt":"2019-07-24T21:20:36","guid":{"rendered":"https:\/\/www.copahost.com\/blog\/?p=1355"},"modified":"2020-05-31T13:58:30","modified_gmt":"2020-05-31T13:58:30","slug":"html-image","status":"publish","type":"post","link":"https:\/\/www.copahost.com\/blog\/html-image\/","title":{"rendered":"HTML Image: easy and complete guide with examples"},"content":{"rendered":"<p>In this article, we will explain how to use and manipulate a HTML image. There are many possibilities to use images in an HTML page, forms, link tags, etc.<\/p>\n<h3>Table of contents<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic1\">The HTML image tag<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic2\">Image size<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic3\">Images with links<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic4\">Centering an image<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic5\">Using an image as the background of a page<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic6\">Position of images<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic7\">Image as a form button<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic8\">Image border<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-image\/#topic9\">Conclusion<\/a><\/li>\n<\/ul>\n<p><iframe title=\"How to insert images in HTML ? Learn in just 8 minutes.\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/h9aw14w_lzM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h3>HTML image tag<\/h3>\n<p>Images are the most common element we <a href=\"https:\/\/www.copahost.com\/blog\/top-tips-to-boost-your-website-traffic-in-2016\/\">see when we visit any website<\/a>. Images make a website look more attractive. We can create images in <a href=\"https:\/\/www.copahost.com\/blog\/html-comments\/\">HTML with a simple img tag<\/a>. img tag is one such tag that has no closing tag. There are many attributes of the img <a href=\"https:\/\/www.copahost.com\/blog\/html-link-tag\/\">tag which are useful in creating better-looking images in HTML<\/a>. Two of these attributes are required in the img tag, src, and alt.<\/p>\n<h4>src<\/h4>\n<p>Technically, we don&#8217;t insert images in HTML, we <a href=\"https:\/\/www.copahost.com\/blog\/html-link-tag\/\">link images to HTML<\/a>. The img tag creates a holding space for the referenced image. We use the src attribute to link the URL of the image. The following <a href=\"https:\/\/www.copahost.com\/blog\/html-link-tag\/\">HTML code has an img tag<\/a> with the src attribute.<\/p>\n<pre class=\"lang:default decode:true\">&lt;img src=\"spiderman.jpg\"&gt;<\/pre>\n<p>The output is:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-1366\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png\" alt=\"\" width=\"937\" height=\"568\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png 937w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2-300x182.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2-768x466.png 768w\" sizes=\"(max-width: 937px) 100vw, 937px\" \/><\/p>\n<p>We can see a picture of spiderman. In the src attribute, we inserted the link of this picture of spiderman.<\/p>\n<h4>alt<\/h4>\n<p>What if the image does not load because of some reason? The img tag has an alt attribute to solve this problem. Whenever the image does not load on the web page, the text given in the alt attribute shows up at its place. The following <a href=\"https:\/\/www.copahost.com\/blog\/html-link-tag\/\">HTML code has an img tag<\/a> with an src attribute and alt attribute. The link I used in the src attribute is a non-working link.<\/p>\n<pre class=\"lang:default decode:true\">&lt;img src=\"non-existent-image.jpg\" alt=\"Sorry! the image can't load\"&gt;\r\n<\/pre>\n<p>The output is:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1367\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalt.png\" alt=\"\" width=\"455\" height=\"118\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalt.png 455w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalt-300x78.png 300w\" sizes=\"(max-width: 455px) 100vw, 455px\" \/><\/p>\n<p>Observe the output. The image doesn&#8217;t load because we provided a non-working link. There we can see the text which we gave in the alt attribute before. This is how the alt attribute works.<br \/>\n<a id=\"topic2\"><\/a><\/p>\n<h3>HTML image size<\/h3>\n<p>There is no fixed size for an image in HTML. We can change the size of images according to our requirements. The height attribute is used to change the height of an image and width attribute is used to change the width of an image. The values for both the height and width attributes are given in pixels. The following code has two images of spiderman, one with no height and width specified and second with the height and width of three hundred pixels.<\/p>\n<pre class=\"lang:default decode:true\">&lt;img src=\"spiderman.jpg\" height=\"300px\" width=\"300px\"&gt;<\/pre>\n<p>Apart from height and width attributes, We can also use CSS to change the size of an image.<\/p>\n<pre class=\"lang:default decode:true\">&lt;img src=\"spiderman.jpg\" style=\"height:400px; width:400px\"&gt;<\/pre>\n<p>In the above example, we used inline CSS to change the height and width of the image to four hundred pixels.<\/p>\n<p>The output after changing the size:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1365\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize.png\" alt=\"\" width=\"932\" height=\"523\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize.png 932w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize-300x168.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize-768x431.png 768w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize-145x80.png 145w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><br \/>\n<a id=\"topic3\"><\/a><\/p>\n<h3>Images with links<\/h3>\n<p>We can also use images as a <a href=\"https:\/\/www.copahost.com\/blog\/html-link\/\">link<\/a> in HTML. This means, whenever someone clicks the image, a link will open. This can be done by putting the img tag inside the &lt;a&gt; tag. The following example is an image that behaves like a link.<\/p>\n<pre class=\"lang:default decode:true\">&lt;a href=\"https:\/\/www.google.com\"&gt;\r\n    &lt;img src=\"spiderman.jpg\" style=\"height:400px; width:400px\"&gt; \r\n&lt;\/a&gt;<\/pre>\n<p>The output is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1363\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imglink1.png\" alt=\"\" width=\"649\" height=\"519\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imglink1.png 649w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imglink1-300x240.png 300w\" sizes=\"(max-width: 649px) 100vw, 649px\" \/><\/p>\n<p>Observe the above code. The img tag is inserted inside the &lt;a&gt; tag. The link to google&#8217;s homepage is given to the href attribute of &lt;a&gt; tag. Now, when we click the image, the Google link will open.<br \/>\n<a id=\"topic4\"><\/a><\/p>\n<h3>Position of images<\/h3>\n<p>We can also align images according to the surrounding elements. For this, we need to use the align attribute. We can align the surroundings to the top, middle, bottom, right and left. The following code shows how to use the align attribute.<\/p>\n<pre class=\"lang:default decode:true\">&lt;h2&gt;align=\"bottom\"(default):&lt;\/h2&gt;\r\n&lt;p&gt;Your friendly neighbourhood. \r\n&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"bottom\"&gt; \r\nMy name is Spiderman.&lt;\/p&gt;\r\n\r\n&lt;h2&gt;align=\"top\":&lt;\/h2&gt;\r\n&lt;p&gt;Your friendly neighbourhood. \r\n&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"top\"&gt; \r\nMy name is Spiderman.&lt;\/p&gt;\r\n\r\n&lt;h2&gt;align=\"middle\":&lt;\/h2&gt;\r\n&lt;p&gt;Your friendly neighbourhood. \r\n&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"middle\"&gt; \r\nMy name is Spiderman.&lt;\/p&gt;\r\n\r\n&lt;h2&gt;align=\"right\":&lt;\/h2&gt;\r\n&lt;p&gt;Your friendly neighbourhood. \r\n&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"right\"&gt; \r\nMy name is Spiderman.&lt;\/p&gt;\r\n\r\n&lt;h2&gt;align=\"left\":&lt;\/h2&gt;\r\n&lt;p&gt;Your friendly neighbourhood. \r\n&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"left\"&gt; \r\nMy name is Spiderman.&lt;\/p&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1362 size-full\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgpos.png\" alt=\"html image\" width=\"936\" height=\"652\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgpos.png 936w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgpos-300x209.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgpos-768x535.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/p>\n<p>Observe the above code, the surrounding paragraph is aligned to the spiderman&#8217;s picture according to the value of the align attribute.<\/p>\n<p>Here is one more example of the align attribute. The alignment can be done in various ways, depending upon your requirements.<\/p>\n<pre class=\"lang:default decode:true\">&lt;p&gt;&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"left\"&gt;\r\nYour friendly neighbourhood.&lt;\/p&gt;\r\n&lt;p&gt;Your friendly neighbourhood.&lt;\/p&gt;\r\n&lt;p&gt; My name is Spiderman &lt;\/p&gt;\r\n\r\n\r\n&lt;p&gt;&lt;img src=\"spiderman.jpg\" width=\"50px\" height=\"50px\" align=\"right\"&gt;\r\nYour friendly neighbourhood.Your friendly neighbourhood.Your friendly neighbourhood.&lt;\/p&gt;\r\n&lt;p&gt;Your friendly neighbourhood.Your friendly neighbourhood.Your friendly neighbourhood.&lt;\/p&gt;\r\n&lt;p&gt; My name is Spiderman. My name is Spiderman. My name is Spiderman. \r\nMy name is Spiderman. My name is Spiderman.  &lt;\/p&gt;<\/pre>\n<p>The output is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1377\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalign.png\" alt=\"\" width=\"938\" height=\"296\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalign.png 938w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalign-300x95.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgalign-768x242.png 768w\" sizes=\"(max-width: 938px) 100vw, 938px\" \/><br \/>\n<a id=\"topic5\"><\/a><\/p>\n<h3>Image as the background of the HTML<\/h3>\n<p>The background of a web page can be modified in various ways. We can change the background of a web page, or we can use an image as the background. Images are frequently used as the <a href=\"https:\/\/www.copahost.com\/blog\/html-background-color\/\">background of a web page in HTML<\/a>. We can apply CSS to the body <a href=\"https:\/\/www.copahost.com\/blog\/html-comments\/\">tag of the HTML<\/a> to set any image as the background. The following HTML has a spiderman&#8217;s image as the background.<\/p>\n<pre class=\"lang:default decode:true\">&lt;html&gt; \r\n  &lt;head&gt; \r\n   &lt;style&gt; \r\n     html { height: 100%; } \r\n     body{ \r\n     background-image: url(\"spiderman.jpg\");\r\n       height: 100%; \r\n       background-position: center;\r\n       background-repeat: no-repeat;\r\n       background-size: cover; \r\n     } \r\n   &lt;\/style&gt; \r\n  &lt;\/head&gt; \r\n&lt;body&gt; \r\n\r\n&lt;\/body&gt; \r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The output is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1361\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgback.png\" alt=\"\" width=\"942\" height=\"870\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgback.png 942w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgback-300x277.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgback-768x709.png 768w\" sizes=\"(max-width: 942px) 100vw, 942px\" \/><\/p>\n<p>Observe the code inside the head tag. First of all, I have fixed the height of the <a href=\"https:\/\/www.copahost.com\/blog\/meta-tags-html\/\">HTML tag<\/a> to its full extent, i.e. the hundred percent. Then I used various styling properties for the body tag. I will explain every property one by one.<\/p>\n<h4>background-image:<\/h4>\n<p>We use this property to set the URL of the image we want to use as the background.<\/p>\n<h4>height:<\/h4>\n<p>Then I used height property once again, this time to stretch the body tag to the hundred percent.<\/p>\n<h4>background-position:<\/h4>\n<p>The background-position property is used to set the starting point of the image. I set the background-position as center because I wanted the image of the background to be in the middle of the page.<\/p>\n<h4>background-repeat:<\/h4>\n<p>We use the background-repeat property to define whether we want to repeat the image or not. We can repeat the background image vertically by using repeat-y as the value and horizontally by using repeat value. But I used no-repeat as the value of this property because I don&#8217;t want to repeat the image throughout the background.<\/p>\n<h4>background-cover:<\/h4>\n<p>When we use an image as the background, we have to stretch the image to cover all the background of the web page. To do this, we can use background cover property and set it to cover.<\/p>\n<p>These all properties are necessary to use an image as the background of an HTML page.<br \/>\n<a id=\"topic6\"><\/a><\/p>\n<h3>Centering an HTML image<\/h3>\n<p>The majority of web developers prefer to align an image to the center of the web page. The image looks way more appealing when it is in the center of the web page. We can use CSS to align an image to the center of the web page. The following image is centered on an HTML page.<\/p>\n<pre class=\"lang:default decode:true\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nimg {\r\n  display: block;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;img src=\"spiderman.jpg\" alt=\"spiderman\" width=\"400px\"&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The output is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1360\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgcenter.png\" alt=\"\" width=\"937\" height=\"301\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgcenter.png 937w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgcenter-300x96.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgcenter-768x247.png 768w\" sizes=\"(max-width: 937px) 100vw, 937px\" \/><\/p>\n<p>Observe the above code. I used an img tag to add a picture of spiderman. I gave a width of four hundred pixels. To align the image to the center of the page, I used a few CSS properties. I will explain each CSS property is used one by one.<\/p>\n<h4>display:<\/h4>\n<p>First of all, I used the display property. I set its value to block. We use display property to specify the behavior of the image. When its value is set to block, it makes sure that the image is in the new line and takes up the whole width.<\/p>\n<h4>margin-left and margin-right:<\/h4>\n<p>We also used the margin-left and margin-left properties of CSS. These properties define the margin from left and right respectively. For centering the image, we can set both of these properties to auto because the browser will automatically adjust the margins from both sides.<br \/>\n<a id=\"topic7\"><\/a><\/p>\n<h3>Using an image as a button in the form<\/h3>\n<p>We can use images in almost everything. Earlier, we used images in the background and as a link. Further, we can also use images as a <a href=\"https:\/\/www.copahost.com\/blog\/html-button\/\">button<\/a> in a <a href=\"https:\/\/www.copahost.com\/blog\/html-form\/\">form<\/a>. To do this, we need to add the img tag inside a button. We also need to apply CSS to center the image, so it can look better. The following code has a form that contains an image as a button.<\/p>\n<pre class=\"lang:default decode:true\">&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;style&gt;\r\n   img {\r\n      display: block;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n   &lt;form action=\"\"&gt;\r\n     First name:&lt;br&gt;\r\n     &lt;input type=\"text\"&gt;&lt;br&gt;&lt;br&gt;\r\n     Last name:&lt;br&gt;\r\n     &lt;input type=\"text\"&gt;&lt;br&gt;&lt;br&gt;\r\n     &lt;button type=\"submit\" width=\"90px\"&gt;\r\n        &lt;img src=\"spiderman.jpg\" alt=\"spiderman\" width=\"90px\"&gt;\r\n     &lt;\/button&gt;\r\n &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The output is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1359\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgform-1.png\" alt=\"\" width=\"294\" height=\"238\" \/><\/p>\n<p>Observe the above code. The form has two input fields and a button. Instead of a text, we put an image there. To do this, first we used a button tag and set its type as submit, so I can submit the form. Then inside the button tag, we added an img tag. But to make it look better and attractive, we applied some CSS to the img tag as well as the button tag. Earlier, we learned how to center an image, I used the same code here(observe the head tag). Then we set the width of both, button and image as ninety pixels. You can set the width according to your requirements.<br \/>\n<a id=\"topic8\"><\/a><\/p>\n<h3>Image border<\/h3>\n<p>Images look much better and attractive when borders are applied. The img tag has a border attribute which can be used to apply a border to the image. The following image has a border of five.<\/p>\n<pre class=\"lang:default decode:true\">&lt;img src=\"spiderman.jpg\" alt=\"spiderman\" width=\"400px\" border=\"5px\"&gt;\r\n<\/pre>\n<p>We can also apply a border by using CSS. The following image has a border of five pixels with black <a href=\"https:\/\/www.copahost.com\/blog\/font-color-html\/\">color<\/a> and solid style.<\/p>\n<pre class=\"lang:default decode:true\">&lt;img src=\"spiderman.jpg\" alt=\"spiderman\" width=\"400px\" style=\"border: 5px solid black\"&gt;\r\n<\/pre>\n<p>The output is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1357\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgborder2.png\" alt=\"\" width=\"567\" height=\"311\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgborder2.png 567w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgborder2-300x165.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgborder2-145x80.png 145w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><br \/>\n<a id=\"topic9\"><\/a><\/p>\n<h3>Conclusion<\/h3>\n<p>Images are one of the most important aspects of HTML. We can use images almost everywhere in an HTML. We can use CSS with the img tag to improve the appearance of images. Moreover, there are a few attributes that are also helpful.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will explain how to use and manipulate a HTML image. There are many possibilities to use images in an HTML page, forms, link tags, etc. Table of contents The HTML image tag Image size Images with links Centering an image Using an image as the background of a page Position of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1355","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML Image: easy and complete guide with examples - Copahost<\/title>\n<meta name=\"description\" content=\"All you need to know about HTML image. Position, links, image as a background. Using images as a form button, image sizes. Includes examples and pictures.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.copahost.com\/blog\/html-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Image: easy and complete guide with examples - Copahost\" \/>\n<meta property=\"og:description\" content=\"All you need to know about HTML image. Position, links, image as a background. Using images as a form button, image sizes. Includes examples and pictures.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copahost.com\/blog\/html-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Copahost\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-24T21:20:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-31T13:58:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png\" \/>\n<meta name=\"author\" content=\"Gustavo Gallas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Gallas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/\"},\"author\":{\"name\":\"Gustavo Gallas\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246\"},\"headline\":\"HTML Image: easy and complete guide with examples\",\"datePublished\":\"2019-07-24T21:20:36+00:00\",\"dateModified\":\"2020-05-31T13:58:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/\"},\"wordCount\":1490,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.copahost.com\/blog\/html-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/html-image\/\",\"name\":\"HTML Image: easy and complete guide with examples - Copahost\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png\",\"datePublished\":\"2019-07-24T21:20:36+00:00\",\"dateModified\":\"2020-05-31T13:58:30+00:00\",\"description\":\"All you need to know about HTML image. Position, links, image as a background. Using images as a form button, image sizes. Includes examples and pictures.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.copahost.com\/blog\/html-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png\",\"width\":937,\"height\":568},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.copahost.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Image: easy and complete guide with examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"name\":\"Copahost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.copahost.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\",\"name\":\"Copahost\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"width\":223,\"height\":40,\"caption\":\"Copahost\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246\",\"name\":\"Gustavo Gallas\",\"description\":\"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/\"],\"url\":\"https:\/\/www.copahost.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Image: easy and complete guide with examples - Copahost","description":"All you need to know about HTML image. Position, links, image as a background. Using images as a form button, image sizes. Includes examples and pictures.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.copahost.com\/blog\/html-image\/","og_locale":"en_US","og_type":"article","og_title":"HTML Image: easy and complete guide with examples - Copahost","og_description":"All you need to know about HTML image. Position, links, image as a background. Using images as a form button, image sizes. Includes examples and pictures.","og_url":"https:\/\/www.copahost.com\/blog\/html-image\/","og_site_name":"Copahost","article_published_time":"2019-07-24T21:20:36+00:00","article_modified_time":"2020-05-31T13:58:30+00:00","og_image":[{"url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png"}],"author":"Gustavo Gallas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gustavo Gallas","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.copahost.com\/blog\/html-image\/#article","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/html-image\/"},"author":{"name":"Gustavo Gallas","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246"},"headline":"HTML Image: easy and complete guide with examples","datePublished":"2019-07-24T21:20:36+00:00","dateModified":"2020-05-31T13:58:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/html-image\/"},"wordCount":1490,"commentCount":0,"publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.copahost.com\/blog\/html-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.copahost.com\/blog\/html-image\/","url":"https:\/\/www.copahost.com\/blog\/html-image\/","name":"HTML Image: easy and complete guide with examples - Copahost","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png","datePublished":"2019-07-24T21:20:36+00:00","dateModified":"2020-05-31T13:58:30+00:00","description":"All you need to know about HTML image. Position, links, image as a background. Using images as a form button, image sizes. Includes examples and pictures.","breadcrumb":{"@id":"https:\/\/www.copahost.com\/blog\/html-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copahost.com\/blog\/html-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/html-image\/#primaryimage","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/imgsize2.png","width":937,"height":568},{"@type":"BreadcrumbList","@id":"https:\/\/www.copahost.com\/blog\/html-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copahost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Image: easy and complete guide with examples"}]},{"@type":"WebSite","@id":"https:\/\/www.copahost.com\/blog\/#website","url":"https:\/\/www.copahost.com\/blog\/","name":"Copahost","description":"","publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copahost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.copahost.com\/blog\/#organization","name":"Copahost","url":"https:\/\/www.copahost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","width":223,"height":40,"caption":"Copahost"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246","name":"Gustavo Gallas","description":"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.","sameAs":["https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/"],"url":"https:\/\/www.copahost.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/comments?post=1355"}],"version-history":[{"count":22,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1355\/revisions"}],"predecessor-version":[{"id":2427,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1355\/revisions\/2427"}],"wp:attachment":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media?parent=1355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/categories?post=1355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/tags?post=1355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}