Parakeet internalisation and inlining

The related concepts of internalisation and inlining provide additional control over how content is addressed and incorporated into your site.


Internalisation[1] is the process of taking content external to the site (e.g. on another site) and making it part of the site content.

For example, I have a Smugmug account for photo hosting. For some posts I want to link to a full size (very large) version of a picture and display on the page the medium size one. The markup for this would be:

src: i-c57rXqk-M.jpg
href: i-c57rXqk.jpg

As it stands this will produce the HTML:

<a href="i-c57rXqk.jpg">
<img src="i-c57rXqk-M.jpg">

With internalisation, one or both of those links would move to this site. For example, fully internalised the HTML becomes:

<a href="../../../cache/bc97bf78c6e5e167fa4eaf106131728a/cached.jpg">
<img src="../../../cache/9a34b147ef8ae68f81a763de0a005f95/cached.jpg">

Parakeet will periodically check to make sure the internalised version is in-sync with the original.

Why do this? Well, perhaps the site you’re building is faster than the host of the original but the original is the golden source, or is better suited to the storage of many large files.


To stake the bleeding obvious, you can’t just internalise someone else’s content with no regard for copyright. Be careful when using this feature that you’re not duplicating things you shouldn’t.


References to audio files using the <media> element are always internalised.

References to local files using the file:// protocol are always internalised (or they wouldn’t be valid on the Web).


Internalisation settings are available for the following content types:

  • image
  • css
  • js
  • html (often a bad idea)
  • atomic
  # maxmium size of file to be internalised
  # (-1 is unlimited)
  internalise max size = 1000000
  # minimium size of file to be internalised
  internalise min size = 0

  # only internalise network resources when the host is in this list
  # (if omited, all hosts are valid)
  internalise domain =
  internalise domain =

So with these restrictions our HTML is now:

<a href="i-c57rXqk.jpg">
<img src="../../../cache/9a34b147ef8ae68f81a763de0a005f95/cached.jpg">

The smaller image is still internalised, whilst the larger one is hosted off-site.


Inlining is the process of placing content within the HTML file rather than linking to it.

This is the difference between:

<style rel="stylesheet" type="text/css" href="somefile.css">


H1, H2, H3, H4, H5, H6, .large, .x-large
margin: 0;
padding: 0;
font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
font-stretch: condensed;
font-weight: 700;

This can be applied to:

  • css
  • image (some issues with very old browsers)
  • js

Inlining and performance

Careful use of inlining can increase the performance of your site. For small resources it may be quicker for the client to just receive the data in the HTML rather than making an additional network call for a separate resource, even if doing so may allow it to make use of caching.

On the other hand:

  • No ability for the client to cache
  • Inlining increases the overall size of your pages
  • Inlined images will prevent the browser from displaying all the text content until the HTML is fully loaded


  # maximum size of resource to inline
  # (-1 is unlimited - almost certainly a bad idea)
  inline max size = 4096

  # minim size of resource to inline
  inline min size = 0

  # Allow inlining of external content
  # (i.e. content not under src/content)
  inline external = false
  1. Terrible name, but couldn’t think of anything better. [Back]