{"id":5061,"date":"2022-10-26T12:16:03","date_gmt":"2022-10-26T12:16:03","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=5061"},"modified":"2022-10-26T12:16:03","modified_gmt":"2022-10-26T12:16:03","slug":"how-to-insert-an-image-in-html","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/","title":{"rendered":"How to Insert an Image in HTML ?"},"content":{"rendered":"<ul>\n<li style=\"text-align: justify;\">In HTML document we can use different fonts and lists.<\/li>\n<li style=\"text-align: justify;\">For look more attractive we can add more graphics to make the document.<\/li>\n<li style=\"text-align: justify;\">Web browsers support a number of graphic formats, there are three types of formats widely used they are Graphics Interchange Format (GIF), <strong>Joint Photographic Expert Group (JPEG), Portable Network Graphics (PNG).<\/strong><\/li>\n<li style=\"text-align: justify;\">Graphics Interchange Format (GIF) is the best format displaying images designed with a graphics program.<\/li>\n<li style=\"text-align: justify;\"><strong>Joint Photographic Expert Group (JPEG) is the <\/strong>best format for photographs.<\/li>\n<li style=\"text-align: justify;\"><strong>Portable Network Graphics (PNG) is the best format <\/strong>for images with transparency or the low color count.<\/li>\n<li style=\"text-align: justify;\">In HTML document <img> tag specifies an image to be displayed.<\/li>\n<\/ul>\n<h2 id=\"inserting-an-image-with-css\"><strong>Inserting\u00a0<\/strong><strong>an<\/strong>\u00a0<strong>image with CSS<\/strong><\/h2>\n<h3 id=\"sample-code\">Sample Code<\/h3>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\"><!DOCTYPE html><br\/><html><br\/>    <style><br\/>        image{border:4px solid orange; width: 120px;height: 100px;}<br\/>        h1{text-transform:uppercase}<br\/>    <\/style><br\/><head><br\/>    <title><br\/>        HTML frame scrolling Attribute<br\/>    <\/title><br\/><\/head><br\/><body><br\/>    <h1>Inserting Image<\/h1><br\/>    <img src=&quot;wikitechy.png&quot; alt=&quot;image is not available&quot;><br\/><\/body><br\/><\/html><\/code><\/pre> <\/div>\n<h3 id=\"output\">Output<\/h3>\n<h3 id=\"\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-5062\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png\" alt=\"\" width=\"1001\" height=\"661\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png 1001w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-300x198.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-768x507.png 768w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-390x258.png 390w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-820x541.png 820w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/h3>\n<h2 id=\"inserting-an-image-without-the-css\">Inserting an Image without the CSS<\/h2>\n<h3 id=\"sample-code-2\">Sample Code<\/h3>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\"><!DOCTYPE html><br\/><head><br\/>    <title><br\/>        HTML frame scrolling Attribute<br\/>    <\/title><br\/><\/head><br\/><body><br\/>    <h1>Inserting Image<\/h1><br\/>    <img src=&quot;wikitechy.png&quot; alt=&quot;image is not available&quot; width=&quot;120px&quot; height=&quot;100px&quot;><br\/><\/body><br\/><\/html><\/code><\/pre> <\/div>\n<h3 id=\"output-2\">Output<\/h3>\n<h3 id=\"-2\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-5062\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png\" alt=\"\" width=\"1001\" height=\"661\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png 1001w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-300x198.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-768x507.png 768w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-390x258.png 390w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source-820x541.png 820w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/h3>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In HTML document we can use different fonts and lists. For look more attractive we can add more graphics to make the document. Web browsers support a number of graphic formats, there are three types of formats widely used they are Graphics Interchange Format (GIF), Joint Photographic Expert Group (JPEG), Portable Network Graphics (PNG). Graphics [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19019],"tags":[19062,19057,19056,19064,19060,19058,19054,19055,19063,19059,19061],"class_list":["post-5061","post","type-post","status-publish","format-standard","hentry","category-html","tag-how-to-center-an-image-in-html","tag-how-to-insert-an-image-in-html","tag-how-to-insert-an-image-in-html-page","tag-how-to-insert-an-image-in-html5","tag-how-to-insert-image-in-html","tag-how-to-insert-images-using-html","tag-html-images","tag-html-img-tag","tag-image-alignment-in-html","tag-images-in-html","tag-img-src-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Insert an Image in HTML ? - Images in HTML<\/title>\n<meta name=\"description\" content=\"How to Insert an Image in HTML ? - How to Add an Image &amp; Background Image in HTML - In HTML document we can use different fonts and lists.\" \/>\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.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Insert an Image in HTML ? - Images in HTML\" \/>\n<meta property=\"og:description\" content=\"How to Insert an Image in HTML ? - How to Add an Image &amp; Background Image in HTML - In HTML document we can use different fonts and lists.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-26T12:16:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/\"},\"author\":{\"name\":\"webmaster\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"headline\":\"How to Insert an Image in HTML ?\",\"datePublished\":\"2022-10-26T12:16:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/\"},\"wordCount\":298,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/html-image-source.png\",\"keywords\":[\"how to center an image in html\",\"how to insert an image in html\",\"how to insert an image in html page\",\"how to insert an image in html5\",\"how to insert image in html\",\"how to insert images using html\",\"html images\",\"html img tag\",\"image alignment in html\",\"images in html\",\"img src html\"],\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/\",\"name\":\"How to Insert an Image in HTML ? - Images in HTML\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/html-image-source.png\",\"datePublished\":\"2022-10-26T12:16:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"How to Insert an Image in HTML ? - How to Add an Image & Background Image in HTML - In HTML document we can use different fonts and lists.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/html\\\/how-to-insert-an-image-in-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/html-image-source.png\",\"contentUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/html-image-source.png\",\"width\":1001,\"height\":661},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\"],\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/author\\\/webmaster\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Insert an Image in HTML ? - Images in HTML","description":"How to Insert an Image in HTML ? - How to Add an Image & Background Image in HTML - In HTML document we can use different fonts and lists.","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.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Insert an Image in HTML ? - Images in HTML","og_description":"How to Insert an Image in HTML ? - How to Add an Image & Background Image in HTML - In HTML document we can use different fonts and lists.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/","og_site_name":"Wikitechy","article_published_time":"2022-10-26T12:16:03+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png","type":"","width":"","height":""}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/#article","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/"},"author":{"name":"webmaster","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"headline":"How to Insert an Image in HTML ?","datePublished":"2022-10-26T12:16:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/"},"wordCount":298,"commentCount":0,"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png","keywords":["how to center an image in html","how to insert an image in html","how to insert an image in html page","how to insert an image in html5","how to insert image in html","how to insert images using html","html images","html img tag","image alignment in html","images in html","img src html"],"articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/","name":"How to Insert an Image in HTML ? - Images in HTML","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png","datePublished":"2022-10-26T12:16:03+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"How to Insert an Image in HTML ? - How to Add an Image & Background Image in HTML - In HTML document we can use different fonts and lists.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/html\/how-to-insert-an-image-in-html\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/10\/html-image-source.png","width":1001,"height":661},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/5061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=5061"}],"version-history":[{"count":1,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/5061\/revisions"}],"predecessor-version":[{"id":5063,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/5061\/revisions\/5063"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=5061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=5061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=5061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}