title: Using Javascript vs HTML to display images
body: <p>Firstly, sorry for my incredibly noobishness, but I am just starting javascript and have a lot of questions.</p>
  
  <p>1.) Would it be faster loading image through javascript or HTML?  </p>
  
  <p>I would assume HTML and also for things like, javascript enabled on browser, it would be safer to use HTML?  I am just trying to figure out when it is better to use javascript vs CSS, jquery because the thing I'm working now seems very slow with jquery..</p>
  
  <p>fiddle: <a href="https://jsfiddle.net/jzhang172/44v297n0/" rel="nofollow">https://jsfiddle.net/jzhang172/44v297n0/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var img = new Image(100,200);
      img.src = "https://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951";
  
  console.log(img);
  
      // This next line will just add it to the &lt;body&gt; tag
      document.getElementById('ok').appendChild(img);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img{
    height:300px;
    width:200px;
    border:1px solid green;
  }
  .ok{
    width:300px;
    height:300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>I am but a HTML image&lt;img src="https://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951" alt=""&gt;
  
  
  &lt;div id="ok"&gt;Hello, I was put here by Javascript&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>