{"id":676,"date":"2020-01-02T19:44:21","date_gmt":"2020-01-03T00:44:21","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=676"},"modified":"2025-05-20T18:08:39","modified_gmt":"2025-05-20T18:08:39","slug":"images","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/images\/","title":{"rendered":"Images"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2022\/01\/penguins.jpeg\" alt=\"\" \/><figcaption class=\"wp-element-caption\">Photo by&nbsp;<a href=\"https:\/\/unsplash.com\/@muuvmuuv?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Marvin Heilemann<\/a>.<\/figcaption><\/figure>\n\n\n\n<p><strong>People process images more quickly and easily than words.<\/strong> In the era of short attention spans, and users bouncing from page to page, (the average Internet user spends less than 30 seconds on each webpage), images are invaluable.<\/p>\n\n\n\n<p>Images:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Grab the user&#8217;s attention<\/li>\n\n\n\n<li>Illustrate stories<\/li>\n\n\n\n<li>Add credibility<\/li>\n\n\n\n<li>If done correctly,  can improve the user&#8217;s experience on your website <\/li>\n<\/ul>\n\n\n\n<p>Have you ever navigated to a website that didn\u2019t have images? With the exception of Craiglist or Reddit, you probably didn\u2019t stay long.<br><br>By the end of this lesson, you will learn how to add images to your websites\u2014something you may have already learned in Free Code Camp.&nbsp;<\/p>\n\n\n\n<p>By now, you&#8217;re probably pretty solid on creating a new HTML file in Visual Studio Code, so:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a folder called <code>images<\/code> in your playground folder. It\u2019s standard practice to keep your images in a separate folder.<\/li>\n\n\n\n<li>Create a file called <strong>penguins.html <\/strong>and save it in your playground folder.<\/li>\n\n\n\n<li>Download an image. Click the big green \u201cdownload free\u201d button on <a href=\"https:\/\/unsplash.com\/photos\/3Xd5j9-drDA\" target=\"_blank\" rel=\"noreferrer noopener\">this image<\/a>, courtesy of Unsplash. Chances are, your computer downloaded a file titled \u201cderek-oyen-3Xd5j9-drDA-unsplash.jpg.\u201d <\/li>\n\n\n\n<li>Rename the image. Right-click&gt; Rename; or click on the name to rename the file to <strong>penguins.jpg<\/strong>. <\/li>\n\n\n\n<li>Move penguins.jpg to the images folder we created earlier.<\/li>\n\n\n\n<li>Add the image to penguins.html:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"images\/penguins.jpg\"&gt;<\/code><\/pre>\n\n\n\n<p>Img src (image source) is an empty element, also called a &#8220;void&#8221; element, meaning there is no closing tag to follow. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alt text<\/h2>\n\n\n\n<p>For accessibility purposes, if someone cannot see your image, <strong>alt text<\/strong> describes the image. When people use screen readers, this text is read aloud. If your image is purely decorative and doesn&#8217;t add any meaning, you don&#8217;t have to include <strong>alt text<\/strong>, but in most cases, your images will serve a specific purpose and will need <strong>alt text<\/strong>.<\/p>\n\n\n\n<p>Go ahead and add alt text that describes the image: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"images\/penguins.jpg\" <strong>alt=\"A waddle of penguins\"<\/strong>&gt;<\/code><\/pre>\n\n\n\n<a href=\"#footnote-1-676\" id=\"note-1-676\" rel=\"footnote\">1<\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Title text<\/h2>\n\n\n\n<p>The <strong>title attribute<\/strong> displays content in a tooltip when someone hovers over the image. This is a good place to add more, but perhaps slightly less important, information. <\/p>\n\n\n\n<p>Don\u2019t fact-check me on this title text:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"images\/penguins.jpg\" alt=\"A waddle of penguins\" title=\"In Antarctica, there are eight types of penguins.\"&gt;<\/code><\/pre>\n\n\n\n<p>In the preview, you can see the image. Mouse over it until you see the title text.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Resizing Images<\/strong><\/h2>\n\n\n\n<p>That image we downloaded was extremely high-quality and frankly, ginormous! Let\u2019s make it a little smaller. <\/p>\n\n\n\n<p>Double-click penguins.jpg so it opens in Preview (default photo app on Mac).<a href=\"#footnote-2-676\" id=\"note-2-676\" rel=\"footnote\">2<\/a><\/p>\n\n\n\n<p>Go to &#8220;Tools&#8221; in the top navbar, and select &#8220;Adjust Size.&#8221; Change the width to 288 pixels. Select &#8220;OK.&#8221; Hit Cmd+s to save the file.<\/p>\n\n\n\n<p>Images should be saved at the right size. If you save a small image and then specify a larger width than height in your HTML, such as if we forced our 288 px width image to display at 800 px: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"images\/penguins.jpg\" alt=\"A waddle of penguins\" title=\"In Antarctica, there are eight types of penguins.\" <strong>width=\"800\" height=\"500<\/strong>\"&gt;<\/code><\/pre>\n\n\n\n<p>The image would appear stretched, distorted, and pixelated. Take my word on this. <strong>Do not force images to be larger.<\/strong><\/p>\n\n\n\n<p>If you do the opposite\u2014take a huge image and specify it to be a smaller size\u2014it will take a very long time to load.<\/p>\n\n\n\n<p>You <strong>should<\/strong> resize your images to be the same size you want them to appear on the webpage. Webpages use tiny squares known as pixels as a unit of measurement.<\/p>\n\n\n\n<p>Since we already resized our image to a size that will not take eons to load, let\u2019s add some text under it: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the&nbsp;temperate&nbsp;zone, but one species, the&nbsp;Gal\u00e1pagos penguin, lives near the equator.&nbsp;<br>\u2014 <a rel=\"noreferrer noopener\" aria-label=\"Wikipedia (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/Penguin\" target=\"_blank\">Wikipedia<\/a><\/pre>\n\n\n\n<p class=\"has-light-gray-background-color has-background\"><strong>A word of caution about images<\/strong>: <br>Too often, students will save a file with a <strong>.jpeg<\/strong> extension, and try to insert it by writing <strong>.jpg<\/strong>. While the two file types are virtually identical, your browser doesn&#8217;t know that. <br><br>For example, <strong>&lt;img src=&#8221;images\/penguins.jpg&#8221;&gt;<\/strong> is <strong>NOT <\/strong>going to work if your image is actually named <strong>penguins.jpeg<\/strong>. Same with if your image is a .png, or .gif, or something else. File extensions matter.<\/p>\n\n\n\n<p><strong>Your turn!<br><br><\/strong>A) Add the paragraph about penguins under the image, in its own &lt;p&gt; tags. Where does that place the image in relation to the text?&nbsp;<br>B) Place both the image and the paragraph in the same &lt;p&gt; tags. Where does that place the image in relation to the text? <br>C) Place the image after the first sentence in the same paragraph tag as the paragraph. Where does that place the image in relation to the text?&nbsp;<br><br>When you\u2019re done, leave the text where you like it best.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More practice<\/h3>\n\n\n\n<p>Get some good practice and grab some easy points by making sure to upload both penguins.html and the images folder to the server.<\/p>\n\n\n\n<p>Then, link penguins.html to your webdev index.html. Remember, since both files are in the same folder, your file path should just include the file name. <\/p>\n\n\n\n<p>Don&#8217;t forget to re-upload your webdev index after you add the link so that your instructor can view it. If you get stuck, make sure to check out the previous lessons from this unit. <\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<p><strong>Answers: <br><br><\/strong>A) Places image in its own block above text <br>B) Places image in-line with first line of text <br>C) Places image in middle of text&nbsp;<br><\/p>\n<div class=\"footnotes\"><hr \/><ol><li id=\"footnote-1-676\" class=\"footnote\"><p>Fun, irrelevant fact: if these penguins were in the water, they would be called a <em>raft<\/em> of penguins. Some people also prefer to call groups of on-land penguins a colony, but waddle is way more fun.<a href=\"#note-1-676\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-1.footnote--><li id=\"footnote-2-676\" class=\"footnote\"><p> If you&#8217;re on a Windows machine\/PC you can use Microsoft Paint to <a href=\"https:\/\/www.wikihow.com\/Resize-an-Image-in-Microsoft-Paint\" target=\"_blank\" rel=\"noreferrer noopener\">quickly resize images<\/a>.<a href=\"#note-2-676\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-2.footnote--><\/ol><\/div><!--\/#footnotes-->","protected":false},"excerpt":{"rendered":"<p>People process images more quickly and easily than words. In the era of short attention spans, and users bouncing from page to page, (the average Internet user spends less than 30 seconds on each webpage), images are invaluable. Images: Have you ever navigated to a website that didn\u2019t have images? With the exception of Craiglist [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-676","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":3,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/676\/revisions"}],"predecessor-version":[{"id":6135,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/676\/revisions\/6135"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}