{"id":951,"date":"2011-09-01T19:36:38","date_gmt":"2011-09-01T19:36:38","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2011\/09\/01\/changing-the-size-of-an-image\/"},"modified":"2021-08-16T23:52:53","modified_gmt":"2021-08-17T03:52:53","slug":"changing-the-size-of-an-image","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/","title":{"rendered":"Changing the Size of an Image"},"content":{"rendered":"<p>Sometimes you may need to change the size of an image on your webpage so to better format it on the page. This is easily accomplished using the attributes associated with the &lt;img src&gt; tag. Changing the height and width of the image in the tag will not automatically resize the image proportionally. It is up to the person writing the code to determine the ratio to adjust the picture so it does not distort it. Also, this method of changing the picture size does not change the actual file size of the image.<\/p>\n<p style=\"margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; font-style: inherit; font-size: 12px; font-family: inherit; vertical-align: baseline; padding: 0px;\">We will start with our code from the last section:<\/p>\n<p class=\"code_block\"><strong>&lt;img src=&#8221;Images\/image.jpg&#8221; align=&#8221;middle&#8221;&gt;<\/strong><\/p>\n<p>To change the width and height of the image, you will need to use the width and height tags:<\/p>\n<ul>\n<li>width=&#8221;___&#8221;<\/li>\n<li>height=&#8221;___&#8221;<\/li>\n<\/ul>\n<p>Now we will insert the tags into our code, putting in the width and height that we want the image to be (in pixels):<\/p>\n<p class=\"code_block\"><strong>&lt;img src=&#8221;Images\/image.jpg&#8221; align=&#8221;middle&#8221; width=&#8221;250&#8243; height=&#8221;320&#8243;&gt;<\/strong><\/p>\n<p>Remember that any time you add an attribute, make sure you use quotation marks around the value or it will not work properly. Also, the order of the attributes does not matter, you can also use:<\/p>\n<p class=\"code_block\"><strong>&lt;img src=&#8221;Images\/image.jpg&#8221; width=&#8221;250&#8243; height=&#8221;320&#8243;align=&#8221;middle&#8221;&gt;<\/strong><\/p>\n<p>Please check the next article on <a href=\"\/support\/website\/how-to-make-an-image-a-link\/\" target=\"_blank\" title=\"Click here to view the next article\" rel=\"noopener noreferrer\">How to make an Image a Link<\/a>. If you missed our previous article, please see the <a href=\"\/support\/website\/changing-image-alignment\/\" target=\"_blank\" title=\"Click here to view the previous article\" rel=\"noopener noreferrer\">Changing the Image Alignment<\/a> tutorial. For more information on this course please visit <a href=\"\/support\/\" target=\"_blank\" title=\"Click here to view the courses\" rel=\"noopener noreferrer\">Inserting Images into a Website<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes you may need to change the size of an image on your webpage so to better format it on the page. This is easily accomplished using the attributes associated with the &lt;img src&gt; tag. Changing the height and width of the image in the tag will not automatically resize the image proportionally. It is<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\"> Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288],"tags":[],"class_list":["post-951","post","type-post","status-publish","format-standard","hentry","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Changing the Size of an Image | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"In this tutorial we will discuss how to re-size an image in your webpage without changing the actual image.\" \/>\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.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Changing the Size of an Image | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we will discuss how to re-size an image in your webpage without changing the actual image.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-09-01T19:36:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:52:53+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"Changing the Size of an Image\",\"datePublished\":\"2011-09-01T19:36:38+00:00\",\"dateModified\":\"2021-08-17T03:52:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\"},\"wordCount\":264,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\",\"name\":\"Changing the Size of an Image | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2011-09-01T19:36:38+00:00\",\"dateModified\":\"2021-08-17T03:52:53+00:00\",\"description\":\"In this tutorial we will discuss how to re-size an image in your webpage without changing the actual image.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Changing the Size of an Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Changing the Size of an Image | InMotion Hosting","description":"In this tutorial we will discuss how to re-size an image in your webpage without changing the actual image.","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.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/","og_locale":"en_US","og_type":"article","og_title":"Changing the Size of an Image | InMotion Hosting","og_description":"In this tutorial we will discuss how to re-size an image in your webpage without changing the actual image.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2011-09-01T19:36:38+00:00","article_modified_time":"2021-08-17T03:52:53+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"Changing the Size of an Image","datePublished":"2011-09-01T19:36:38+00:00","dateModified":"2021-08-17T03:52:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/"},"wordCount":264,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/","name":"Changing the Size of an Image | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2011-09-01T19:36:38+00:00","dateModified":"2021-08-17T03:52:53+00:00","description":"In this tutorial we will discuss how to re-size an image in your webpage without changing the actual image.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/changing-the-size-of-an-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Changing the Size of an Image"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=951"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/951\/revisions"}],"predecessor-version":[{"id":86603,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/951\/revisions\/86603"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}