The related concepts of internalisation and inlining provide additional control over how content is addressed and incorporated into your site.
Internalisation 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:
As it stands this will produce the HTML:
With internalisation, one or both of those links would move to this site. For example, fully internalised the HTML becomes:
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:
- html (often a bad idea)
So with these restrictions our HTML is now:
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:
This can be applied to:
- image (some issues with very old browsers)
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