{"id":59,"date":"2022-03-19T09:54:28","date_gmt":"2022-03-19T09:54:28","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&p=59"},"modified":"2022-03-19T09:54:29","modified_gmt":"2022-03-19T09:54:29","slug":"html-images","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-images\/","title":{"rendered":"HTML – Images"},"content":{"rendered":"\n

They say an image is worth a thousand words and that goes for HTML images too. Images help to enrichen your web pages. You can add images to any web page using the <img><\/code> tag in the following syntax.<\/p>\n\n\n\n

<img src="Image URL or encoded data" [other optional attributes]><\/code><\/pre>\n\n\n\n
Unlike other tags we have seen so far, the <img><\/code> tag is an empty tag, which means that it can contain only a list of attributes and it has no closing tag.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n   <head>\n      <title>This is document title<\/title> \n   <\/head>\t\n   <body>\n      <p>Image inserted<\/p>\n      <img src="logo.png" alt="Brightwhiz.com logo">\n   <\/body>\t\n<\/html><\/code><\/pre>\n\n\n\n
The src Attribute<\/h2>\n\n\n\n
The tag loads the image resource from the value specified in the src attribute. Images are usually stored on the web server or somewhere on the Internet in a separate folder. By specifying the path and file name the web browser will navigate to the location and load the image where the tag is positioned in the HTML document.<\/p>\n\n\n\n
Usually, image formats that you can load are those supported by the web browser. If the image is not supported the browser will download it as though it was any other binary file such as a ZIP file.<\/p>\n\n\n\n
Common Image Formats<\/h2>\n\n\n\n
Abbreviation<\/strong><\/td>File Format<\/strong><\/td>File Extension<\/strong><\/td><\/tr>
APNG<\/td>Animated Portable Network Graphics<\/td>.apng<\/td><\/tr>
GIF<\/td>Graphics Interchange Format<\/td>.gif<\/td><\/tr>
ICO<\/td>Microsoft Icon<\/td>.ico, .cur<\/td><\/tr>
JPEG<\/td>Joint Photographic Expert Group image<\/td>.jpg, .jpeg, .jfif, .pjpeg, .pjp<\/td><\/tr>
PNG<\/td>Portable Network Graphics<\/td>.png<\/td><\/tr>
SVG<\/td>Scalable Vector Graphics<\/td>.svg<\/td><\/tr>
WebP<\/td>open format for lossy compressed true-color graphics<\/td>.webp<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
The alt Attribute<\/h2>\n\n\n\n
The required alt attribute provides an alternate text for an image. This text is displayed instead of the image in the event that the user cannot load the images due to various reasons such as slow connection, a missing image at the specified source, or if the user is using a screen reader.<\/p>\n\n\n\n
Typically, the alt attribute value should be something descriptive of the image.<\/p>\n\n\n\n
Image Size – Width and Height<\/h2>\n\n\n\n
You can use the width and height attributes to specify the display size in pixels.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
<img src="logo.png" alt="Brightwhiz.com logo" width="480" height="270"><\/code><\/pre>\n\n\n\n
You can also use the style attribute to specify the image size. Using the style attribute is not restricted to pixels. Using style also prevents any CSS stylesheets from modifying the image size seeing CSS styles supersede the width and height attribute.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
<img src="logo.png" alt="Brightwhiz.com logo" style="width:480px;height:270px;"><\/code><\/pre>\n\n\n\n
Note<\/strong>: Always specify the width and height of an image. That way you preserve the page layout and if for any reason the image doesn’t load you still keep the layout. Specifying the image size also improves the web page rendering performance.<\/p>\n","protected":false},"excerpt":{"rendered":"
They say an image is worth a thousand words and that goes for HTML images too. Images help to enrichen your web pages. You can add images to any web page using the <img> tag in the following syntax. Unlike other tags we have seen so far, the <img> tag is an empty tag, which […]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,8],"yoast_head":"\nLearn HTML - Images<\/title>\n<meta name=\"description\" content=\"HTML images help bring a richer experience to web pages and documents and can be animated, vector, and raster based\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML - Images\" \/>\n<meta property=\"og:description\" content=\"HTML images help bring a richer experience to web pages and documents and can be animated, vector, and raster based\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-19T09:54:29+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-images\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-images\/\",\"name\":\"Learn HTML - Images\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T09:54:28+00:00\",\"dateModified\":\"2022-03-19T09:54:29+00:00\",\"description\":\"HTML images help bring a richer experience to web pages and documents and can be animated, vector, and raster based\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML – Images\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn HTML - Images","description":"HTML images help bring a richer experience to web pages and documents and can be animated, vector, and raster based","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":"http:\/\/local.tutorials\/topic\/html-images\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML - Images","og_description":"HTML images help bring a richer experience to web pages and documents and can be animated, vector, and raster based","og_url":"http:\/\/local.tutorials\/topic\/html-images\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2022-03-19T09:54:29+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-images\/","url":"http:\/\/local.tutorials\/topic\/html-images\/","name":"Learn HTML - Images","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T09:54:28+00:00","dateModified":"2022-03-19T09:54:29+00:00","description":"HTML images help bring a richer experience to web pages and documents and can be animated, vector, and raster based","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-images\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML – Images"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/59"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=59"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=59"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}