title: JPEG Static Header And Append Image Data
body: <p>I am trying to do something like this: <a href="https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/" rel="nofollow noreferrer">Facebook Preview Photos</a>.</p>
  
  <p>As I understand it, they are utilizing small jpegs and the fact that all jpegs have similar "header" information to get a very small initial image preview to the user before the full image loads.</p>
  
  <p>I want to do something similar, with the proposed workflow:</p>
  
  <p><strong>1).</strong> Leverage <code>data</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding" rel="nofollow noreferrer">Base64</a> to store the JPEG header in every <code>&lt;image&gt;</code> element.</p>
  
  <p><strong>2).</strong> Load the rest of the <em>small image</em> as an append to the Base64 header string.</p>
  
  <p><strong>3).</strong> Load the full image utilizing JavaScript onloads.</p>
  
  <p><strong>For Reference: <a href="https://www.w3.org/Graphics/JPEG/jfif3.pdf" rel="nofollow noreferrer">JPEG Specs</a></strong></p>
  
  <p>I have a hex editor, and I stripped the EXIF data, saved the header and now have an image that won't display. It is because I took too much away when I stripped the EXIF data, I believe. I used <strong><a href="https://en.wikipedia.org/wiki/JPEG#Syntax_and_structure" rel="nofollow noreferrer">this</a></strong> to decide where to clip the data, that is everything from <code>0xFF, 0xC0</code> to <code>0xFF, 0xDA</code> which I think was too much. I'm looking for an authoritative answer on how to get the most basic, renderable header before I can output the scan of the image. That is, how much of the hex data can I remove from the header before converting to Base64?</p>
  
  <p>Facebook's Blog says:</p>
  
  <blockquote>
    <p>we looked through the rest of the standard JPEG header, the only
    other table that could change with different images and options was
    the Huffman table.</p>
  </blockquote>
  
  <p>But it isn't clear to me on this reading whether that means they kept the rest of the header or they just manipulated this header.</p>