Every portrait on your site, held to one standard.
Add one line to your website and every team photo, author photo and speaker headshot is optimised in the visitor's browser. No uploads, no workflow, no editing.
Imogen Ferris-LoweHead of Research
Marcus Ellery-HallChief Standards Officer
Ryan CastellanoChief Revenue Officer
Greg HallworthChief Financial Officer
Kwame AsanteChief Product Officer
Oliver PembertonChief Technology OfficerDemonstration. The page above is running the same script you would install.
Install in one line
Paste this before the closing body tag. Then mark the portraits you want optimised.
<script src="https://5ivehead.com/embed.js" data-level="2" async></script>
Then add data-fivehead to each portrait, or to a wrapper around a group of them:
<img src="/team/ada.jpg" data-fivehead alt="Ada Lovelace"> <div class="team" data-fivehead> <img src="/team/grace.jpg" alt="Grace Hopper"> <img src="/team/alan.jpg" alt="Alan Turing"> </div>
Add the snippet under Appearance, Theme File Editor, footer.php, or with a header and footer plugin.
Settings, Advanced, Code Injection, Footer.
Online Store, Themes, Edit code, theme.liquid before the closing body tag.
Project Settings, Custom Code, Footer Code.
Settings, Custom Code, add to Body, end.
Add with a script tag in your root layout. Call window.FiveHead.run() after route changes.
Options
Everything is optional. The defaults suit most websites.
| Attribute | Default | What it does |
|---|---|---|
data-level | 2 | Enhancement level from 1 (Standard) to 3 (Executive). |
data-selector | img[data-fivehead] | A CSS selector for the portraits to optimise, for sites you cannot edit. |
data-manual | false | Set to true to run it yourself with FiveHead.run(). |
FiveHead.run(level) optimises the marked portraits. FiveHead.restore() puts the originals back. A fivehead:done event fires when it has finished.
Built for the way websites work
Portraits are processed on the visitor's device. Your images are never sent to 5iveHead.
Nothing is changed on your server or in your media library. Remove the script and everything returns to normal.
Photos with several people are supported. Faces that are turned away or too small are left alone.
One script file, loaded asynchronously, so it never delays your page.