ericportis.com — Posts2024-02-22T19:43:40-08:00Eric Portise@ericportis.comhttps://ericportis.com/posts//apple-touch-icon.pngOkay, Color Spacestag:ericportis.com,2024-02-20:/posts/2024/okay-color-spaces/2024-02-20T00:00:00-08:00
<style>
.color {
border: 1px solid hsl(0deg 0% 58% / 0.36);
word-break: no-break;
/* background-color: #eee; */
padding: 0.0ch 0.5ch 0.125ch 0.5ch;
border-radius: 0.25em;
white-space: nowrap;
}
.swatch {
display: inline-block;
height: 0.8625em;
width: 0.8625em;
border-radius: 2px;
border: 1px solid hsl(0deg 0% 58% / 0.36);
margin-right: 0.75ch;
position: relative;
top: 0.1em;
box-shadow:
0px 0.6px 0.7px hsl(0deg 0% 58% / 0.36),
0.1px 1.9px 2.1px -0.8px hsl(0deg 0% 58% / 0.36),
0.1px 4.9px 5.5px -1.7px hsl(0deg 0% 58% / 0.36),
0.3px 11.8px 13.3px -2.5px hsl(0deg 0% 58% / 0.36);
}
.surfaceAndCrossectionContainer {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 400px) {
.surfaceAndCrossectionContainer {
grid-template-columns: 1fr;
}
}
canvas {
width: 100%;
}
.crosssectionContainer {
display: grid;
position: relative;
top: -7.5%;
pointer-events: none; /* daniel holbert fix! */
}
.crosssectionContainer > * {
box-sizing: border-box;
grid-area: 1/1;
width: 100%;
margin: 0;
}
.crosssectionContainer > canvas {
/* get data to line up with grid/axes */
padding: 13.333%; /* 20px / 150px */
/* other stuff */
image-rendering: pixelated;
/* outline: 1px solid rgb( 10% 10% 10% / 0.25 ); */
}
#xyz-crosssection {
transform: rotate(270deg);
}
#oklab-crosssection {
transform: scaleY(-1);
}
.inputContainer {
padding: 0.5em;
background: white;
border-radius: 0.25em;
width: max-content;
margin: 1em auto;
}
.inputContainer input {
width: 18em;
height: 1em;
}
.inputContainer output {
display: inline-block;
min-width: 4ch;
margin-left: 0.5ch;
}
label {
display: block;
}
output {
font-family: Monaco, monospaced;
width: 5ch;
overflow: clip;
font-size: 0.8em;
}
.color-solid {
cursor: grab;
}
.info-line math {
font-size: 1.125em;
}
.info-line {
text-wrap: balance;
}
figcaption.info-line p {
padding-left: 1em;
padding-right: 1em;
}
aside.footnotes {
font-size: 0.8625em;
background: #ddd;
padding: 1em;
border-radius: 1em;
}
</style>
<h2 class="little-h">Colors… <em>in… spaaaaaaace</em></h2>
<p>
What is a “color space?”
<p>
Well first you take some <em>colors.</em>
<ul>
<li><code><span class="swatch" style="background-color: red;"></span>red</code>
<li><code><span class="swatch" style="background-color: yellow;"></span>yellow</code>
<li><code><span class="swatch" style="background-color: blue;"></span>blue</code>
</ul>
<p>
And then you arrange them, however you like, into some kind of <em>space:</em>
<figure>
<img
alt="A Cartesian plane with a horizontal X axis and a vertical Y axis. Three square color swatches are arranged in a triangle around the origin; red at the top, yellow in the bottom left, and blue in the bottom right."
style="width: 75%;"
src="/assets/2024-02-20-okay-color-spaces/toy-colorspace2.svg"
/>
</figure>
<p>
The space has <em>coordinates</em>. In the little toy color space we've just defined, <code><span class="swatch" style="background-color: red;"></span>red</code> is at <math><mo>(</mo><mi>x</mi><mo>=</mo><mn>0</mn><mo>,</mo><mi>y</mi><mo>=</mo><mn>1</mn><mo>)</mo></math>, <code><span class="swatch" style="background-color: yellow;"></span>yellow</code> is at <math><mo>(</mo><mn>-1</mn><mo>,</mo><mn>-1</mn> <mo>)</mo></math>, and <code><span class="swatch" style="background-color: blue;"></span>blue</code> is at <math><mo>(</mo> <mn>1</mn><mo>,</mo> <mn>-1</mn> <mo>)</mo></math>. That’s a color space!
<p>
You might ask: what kind of color might we find at the origin: <math><mo>(</mo> <mn>0</mn><mo>,</mo> <mn>0</mn> <mo>)</mo></math>? Right now, it’s undefined, but we could put anything there: <code><span class="swatch" style="background-color: black;"></span>black</code>, <code><span class="swatch" style="background-color: gray;"></span>gray</code>, <code><span class="swatch" style="background-color: brown;"></span>brown</code>, heck – even <code><span class="swatch" style="background-color: hotpink;"></span>hotpink</code> if we wanted.
<p>
Which brings us to the first point: color spaces are all constructs. People just make them up! Useful ones are constructed in order to do useful things, but there’s no, like, One True Fundamental Color Space.</p>
<figure>
<img
alt="A donut-shape divided into six segments. Three of them are slightly larger: red at the top, blue in the bottom right, and yellow in the bottom left. The in-between segments are smaller: purple lies between red and blue, green between blue and yellow, and orange between yellow and red."
src="/assets/2024-02-20-okay-color-spaces/RYB_color_wheel.svg"
style="width: 50%;"
/>
<figcaption class="info-line center" style="line-height: 1.2;">The <a href="http://www.huevaluechroma.com/072.php">red-yellow-blue color wheel</a><br/>(as handed down from <a href="http://www.colorsystem.com/?page_id=683&lang=en">Newton</a> and <a href="http://www.colorsystem.com/?page_id=766&lang=en">Goethe</a>).
</figcaption>
</figure>
<p>
When I was a kid, various art teachers taught me about The Color Wheel with its Three Primary Colors and its Three Secondary Colors and while that wheel did help me make greenish paint when the classroom only had yellow and blue, it <em>also</em> gave me some wrong ideas about color.
<p>
You see, just like the <a href="https://en.wikipedia.org/wiki/Food_pyramid_(nutrition)">food pyramid</a>, the RYB color wheel is <em>made up</em>. It’s a conceptual model, invented by people, who invented it by arranging a set of things into an abstract, hierarchical geometry, as a problem-solving tool. The RYB color wheel was developed in order to give artists and eight-year-olds a (rough) way to (loosely) predict what might happen when they mixed certain pigments. But colors – like tastes, touches, and smells – don’t have any kind of innate geometric relationship to each other. When we arrange colors around a wheel, or set them into any other <em>space:</em> we did that.
<p>
All of this is to say: color spaces can’t really be “right” (or “wrong.”) They can only be <em>useful.</em>
<h2 class="little-h">CIE XYZ: a very useful color space</h2>
<p>
The toy color space that I constructed at the beginning of this post is useless. It doesn't help us do anything.
<p>
What might a useful color space do? Well, just like the RYB color wheel, maybe it could help us predict how different colors will mix.
<p>
And lo, in 1931, <a href="https://files.cie.co.at/529.pdf#page=22">an international team of experts got together in England</a> and laid out a color space that does exactly that<sup id="fn-1-mark"><a href="#fn-1-note">1</a></sup>. They used <a href="https://yuhaozhu.com/blog/cmf.html">science and math</a>. They called themselves the International Commission on Illumination (<abbr class="small-caps">aka</abbr> <i lang="fr">le Commission Internationale de l'Éclairage</i>, <abbr class="small-caps">aka</abbr> the <abbr>CIE</abbr>), and they called their color space CIE XYZ.
<p>
Here are three colors plotted in CIE XYZ: a red, a green, and a blue.
<!-- TODO width height aspect ratio -->
<figure>
<div
class="primariesContainer"
id="xyz-primaries"
aira-role="img"
aria-label="A three dimensional chart, with X, Y, and Z axes, each going from the origin (zero) to one-point-zero. You are facing the origin, Z shoots towards you, past your left, X shoots towards you, past your right, and Y shoots straight up in the air. There are three swatches floating in the space. Blue hovers just off the floor to your left, almost directly on the Z axis, at almost Z=1. Red is a bit higher, and sits almost on top of the X axis, but only about half way down it (X=0.5). Finally, green is much higher - about three times as high as the red, and maybe two thirds of the way to the 1.0 mark on the Y axis. It appears, from your vantage point, slightly to the right of the Y axis, at around the quarter mark on the X axis."
>
</div>
<figcaption class="info-line center">Click/touch and drag to rotate the space</figcaption>
</figure>
<p>
The first thing you might notice is, it's 3D! Turns out, most useful color spaces have at least three dimensions, although in order to visualize various things, people will often flatten 3D spaces into 2D.
<p>
Now, CIE XYZ isn’t limited to three colors. In fact, it contains <em>all</em> of the colors<sup id="fn-2-mark"><a href="#fn-2-note">2</a></sup>.
<p>
So let’s fill our visualization out a bit. The red, green, and blue that that I plotted above happen to be the three <a href="https://en.wikipedia.org/wiki/Primary_color">primary colors</a> that define the <a href="https://en.wikipedia.org/wiki/DCI-P3">P3 color gamut</a>. Here’s the rest of the P3 gamut, plotted in CIE XYZ:
<figure class="wide">
<div class="inputContainer">
<label class="info-line" for=y>Cross section <math><mi>Y</mi></math></label>
<input id=y type="range" min=0 max=1 step=0.01 value=0.5>
<output for=y></output>
</div>
<div class="surfaceAndCrossectionContainer">
<div
class="surfaceContainer"
id="xyz-solid"
aria-role="img"
arial-label="A very colorful solid shape, with six sides, in our 3-D space with the same axes as before. The shape is like a squished cube that’s been skewed up and rotated towards us, or a parallelogram extruded thrugh space. Black at the point at the origin and white at the highest point, farthest from the origin. The red, blue, and green points are where the swatches were in the previous graphic. In addition to those four, and black and white, there are cyan, magenta, and yellow points at the other points on the smushed cube. Every face is a blend of the four colors at its corners. Much wider and taller than it is long."
>
</div>
<div class=crosssectionContainer
aria-role="img"
aira-label="A chart with an X axis and a Z axis. Both go from the origin (0, 0) to 1. As the input slider above moves, we see a crossection of the solid at that Y value. Near Y=0, this shape is a dark triangle shooting quickly out along the Z axis, then it grows taller, getting red and magenta along its top side as its bottom becomes green, extending to a parallelogram. Then, for a while the whole parallelogram shifts up in the chart, not deforming or changing its fundamental shape (just moving), and gets lighter and lighter until about Y=0.7. Here, the bottom sides start retracting quickly, and it shrinks to a triangle with yellow on the left edge, very light teal on the right, getting whiter and whiter at the top. That triangle shrinks to a tiny white speck as we approach, and then reach, Y=1."
>
<canvas id="xyz-crosssection"></canvas>
<img src="./assets/crosssection-background.svg" style="width: 100%;">
</div>
</div>
<figcaption class="info-line center"><p>Sweep the “cross section <math><mi>Y</mi></math>” slider to get a sense of how colors are distributed in the solid’s interior.</p>
</figcaption>
</figure>
<p>
Unlike our toy color space, which defined three discrete colors, CIE XYZ is <em>continuous</em>. I could pick any point in the CIE XYZ space and get a unique color. That’s cool, but it’s still not useful. What’s <em>useful</em> about CIE XYZ is the way it helps people solve the related problems of <em>predicting mixes</em> and <em>creating matches</em> of arbitrary colors.
<p>CIE XYZ is built out of <a href="https://en.wikipedia.org/wiki/CIE_1931_color_space#Color_matching_functions">three functions</a>. Those functions take some wavelength of light as input, and give <math><mi>X</mi></math>, <math><mi>Y</mi></math>, and <math><mi>Z</mi></math> as output. This means you can sample some real-world light with a <a href="https://en.wikipedia.org/wiki/Spectrometer">spectrometer</a>, do <a href="https://en.wikipedia.org/wiki/CIE_1931_color_space#Computing_XYZ_from_spectral_data">some math</a>, and get an <math><mi>X</mi></math>, a <math><mi>Y</mi></math>, and a <math><mi>Z</mi></math>, which locate that light’s color within the CIE XYZ space.
<p>Let’s say I’ve got a pair of spotlights:
<ul>
<li><code><span class="swatch" style="background-color: #f2522b; background-color: color(xyz-d65 0.4 0.25 0.05);"></span>color(xyz-d65 0.40 0.25 0.05)</code> (red)
<li><code><span class="swatch" style="background-color: #6dd327; background-color: color(xyz-d65 0.3 0.5 0.1);"></span>color(xyz-d65 0.30 0.50 0.10)</code> (green)
</ul>
<p>
What color will I see if I shine them both, full-blast, at the same spot? CIE XYZ lets me predict the result. The space has been structured in just such a way that all I have to do is add up the <math><mi>X</mi></math>s, <math><mi>Y</mi></math>s, and <math><mi>Z</mi></math>s:
<p>
<code><span class="swatch" style="background-color: #ffdf3c; background-color: color(xyz-d65 0.7 0.75 0.15);"></span>color(xyz-d65 0.70 0.75 0.15)</code> (yellow!)
<p>
By slicing a lil’ parallelogram out of the CIE XYZ space – with one corner at black, two corners at the locations of our two spotlights, and the last corner at the location of their full-blast mix – I can predict what <em>any</em> combination of these two lights, at any intensity level, is going to look like.
<script type=module>
class lightSlider extends HTMLElement {
connectedCallback() {
const inputEl = this.querySelector('input');
const outputEl = this.querySelector('output');
const lightEl = document.querySelector(
`svg #${
this.getAttribute('target')
}`
);
const otherLightSliderEl = document.querySelector(
`#${
this.getAttribute('other')
}`
);
const intersectionEl = document.querySelector(
`svg #${
this.getAttribute('intersection')
}`
);
const lightColor =
lightEl.getAttribute('fill')
.match(/color\(xyz-d65 ([\-\d\.]+) ([\-\d\.]+) ([\-\d\.]+)\)/)
.slice(1)
.map( s => parseFloat(s) );
this.color = lightColor;
inputEl.addEventListener('input', () => {
outputEl.textContent = `${ Math.round( inputEl.value * 100 ) }%`;
this.color = lightColor.map( n => n * inputEl.value );
const newFill = `color(xyz-d65 ${ this.color[0] } ${ this.color[1] } ${ this.color[2] })`;
lightEl.setAttribute( 'fill', newFill );
const intersectionColor = this.color.map( ( n, i ) =>
n + otherLightSliderEl.color[i]
);
// console.log( intersectionColor )
const newIntersectionFill = `color(xyz-d65 ${ intersectionColor[0] } ${ intersectionColor[1] } ${ intersectionColor[2] })`;
intersectionEl.setAttribute( 'fill', newIntersectionFill )
} );
}
}
customElements.define("light-slider", lightSlider);
</script>
<style>
svg.spotlights {
background: black;
width: 100%;
border: 1em solid black;
}
light-slider {
display: block;
}
hr {
border-style: solid;
border-color: #eee;
}
</style>
<figure class="wide">
<div class="inputContainer">
<light-slider id=leftLightSlider target=left other=rightLightSlider intersection=intersection>
<label class="info-line" for="left_input">Red spotlight intensity</label>
<input id=left_input type=range min=0 max=1 value=1 step=.01>
<output for=left_input>100%</output>
</light-slider>
<hr/>
<light-slider id=rightLightSlider target=right other=leftLightSlider intersection=intersection>
<label class="info-line" for="right_input">Green spotlight intensity</label>
<input id=right_input type=range min=0 max=1 value=1 step=.01>
<output for=right_input>100%</output>
</light-slider>
</div>
<div class="surfaceAndCrossectionContainer">
<!-- TODO can we switch this fill="color()" to have fallbacks? like style="fill: #hex; fill: color();" -->
<svg
class="spotlights"
viewbox="0 0 50 50"
aria-role="img"
aria-label="Two overlapping circles on a black background. The left one is red and the right one is green. When they are both at full intensity, the overlapping section is yellow. If the green dims while the red is at full intensity, the middle section gets orange, and then red. As the red dimms while the green is at full intensity, the yellow just gets... greener and greener. When both are dim the middle section is very dark; when both are at 0% the entire image is solid black."
>
<defs>
<clipPath id="clip">
<circle r=23.05 cx=23 cy=25 />
</clipPath>
</defs>
<circle id=left r=23 cx=23 cy=25 fill="color(xyz-d65 0.40 0.25 0.05)" />
<circle id=right r=23 cx=27 cy=25 fill="color(xyz-d65 0.30 0.50 0.10)" />
<circle id=intersection r=23.05 cx=27 cy=25 clip-path="url(#clip)" fill="color(xyz-d65 0.70 0.75 0.15)" />
</svg>
<div
class="sliceContainer"
id="xyz-slice"
aria-role="img"
aria-label="The solid shape from before has become very transaprent, and there is an opaque parallelogram visible inside of it, extending up from the origin, vertically, close to parallel with the X axis. As the spotlight intensity sliders move and the spotlights in the adjacent image change color, a white circle on this parallelogram moves linearly, circling the color within the XYZ colorspace that matches the color of the spotlight mix."
>
</div>
</div>
<figcaption class="info-line center"><p>Left: simulated spotlights. Right: the white circle shows the location of the mixed color within CIE XYZ.</p></figcaption>
</figure>
<p>
With <a href="https://www.fourmilab.ch/documents/specrend/#:~:text=The%20amount%20of%20each%20primary%20to%20mix%20to%20yield%20a%20CIE%20colour%20with%20a%20given%20x%2C%20y%2C%20and%20z%20is%20the%20unknown%20J%20vector%20in%20the%20equation%3A">a little matrix algebra</a>, I can go the other way: CIE XYZ lets me take a color and figure out whether-and-how I can replicate it by mixing another set of colored lights. This is extremely useful! Once I know the CIE XYZ coordinates of the subpixels that make up a physical pixel on a display, I can calculate how to mix them to precisely replicate all kinds of colors. With CIE XYZ, I can dial up, say, <code><span class="swatch" style="background-color: #642f99; background-color: color(xyz-d65 0.12 0.07 0.31);"></span>color(xyz-d65 0.12 0.07 0.31)</code> on <em>wildly different displays</em> and get <em>consistent results.</em>
<p>
CIE XYZ turns color mixing problems and color matching problems into math problems. This has proven so useful that <a href="https://en.wikipedia.org/wiki/ICC_profile">every modern color space is defined in terms of CIE XYZ</a>. When we say that a system is “color managed” what we’re saying is: it’s built on top of CIE XYZ.
<p>
So! CIE XYZ! It’s useful! But it’s not useful for everything.
<h2 class="little-h">Perceptual uniformity (is hard)</h2>
<p>
Predicting mixes was one thing I learned in art class. Another? Creating even gradients.
<figure>
<picture>
<source
type="image/avif"
sizes="auto, 80vw"
width="1214"
height="260"
srcset="/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-1214w.avif 1214w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-1000w.avif 1000w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-800w.avif 800w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-600w.avif 600w"
/>
<source
type="image/webp"
sizes="auto, 80vw"
width="1214"
height="260"
srcset="/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-1214w.webp 1214w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-1000w.webp 1000w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-800w.webp 800w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-600w.webp 600w"
/>
<!--TODO 80vw, really? -->
<img
alt="A hand-drawn row of seven squares, each given a solid shade with cross-hatched dark blue pencil. The left-most square is pure white, the right-most square is as dark as it can get, and from left to right the in-between squares get progressively darker."
loading="lazy"
sizes="auto, 80vw"
width="1214"
height="260"
srcset="/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-solid-1214w.jpg 1214w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-solid-1000w.jpg 1000w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-solid-800w.jpg 800w,
/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-solid-600w.jpg 600w"
src="/assets/2024-02-20-okay-color-spaces/gradient-handdrawn-solid-600w.jpg"
/>
</picture>
<figcaption class="info-line center">Still got it</figcaption>
</figure>
<p>
When you’re learning a new medium or technique – crosshatching, watercolors, whatever – this is the 101 lesson; it’s like playing scales in music. Practicing gradients gives you a facility with the tools and teaches you how to judge and create even intervals of color.
<p>
CIE XYZ is very bad at this. If we draw a straight line through the CIE XYZ space and mark that line at evenly-spaced intervals, sampling at each mark, we get <em>bad gradients.</em> Like this lopsided grayscale:
<!-- l: black to white -->
<!-- `black` -> `white` -->
<style>
.gradient {
box-shadow:
0px 0.6px 0.7px hsl(0deg 0% 58% / 0.36),
0.1px 1.9px 2.1px -0.8px hsl(0deg 0% 58% / 0.36),
0.1px 4.9px 5.5px -1.7px hsl(0deg 0% 58% / 0.36),
0.3px 11.8px 13.3px -2.5px hsl(0deg 0% 58% / 0.36);
}
p ~ figure {
margin-top: 1.5em;
}
</style>
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven solid-colored squares in a line. They go from white on the left to black on the right, getting progressively darker as they go, but most of them are pretty light. The second-to-last looks like a middle gray, and there is a huge change between it and the last, totally-black square."
>
<rect x="0" width="100" height="100" style="fill: #f1f1f1; fill: color(xyz-d65 0.8327736 0.8761833 0.9542142);" />
<rect x="100" width="100" height="100" style="fill: #dedede; fill: color(xyz-d65 0.6948548 0.7310753 0.7961832);" />
<rect x="200" width="100" height="100" style="fill: #c9c9c9; fill: color(xyz-d65 0.5569361 0.5859673 0.6381522);" />
<rect x="300" width="100" height="100" style="fill: #b1b1b1; fill: color(xyz-d65 0.4190173 0.4408593 0.4801212);" />
<rect x="400" width="100" height="100" style="fill: #949494; fill: color(xyz-d65 0.2810986 0.2957513 0.3220902);" />
<rect x="500" width="100" height="100" style="fill: #6c6c6c; fill: color(xyz-d65 0.1431798 0.1506433 0.1640592);" />
<rect x="600" width="100" height="100" style="fill: #111; fill: color(xyz-d65 0.005261 0.0055353 0.0060282);" />
</svg>
<figcaption class="info-line center"><p>CIE XYZ gradient</p></figcaption>
</figure>
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares, from white to black, just like the previous illustration, but this time the steps are a lot more even, the middle gray is in the middle, and the right half of the illustration contains some dark grays before we get to black."
>
<rect x="0" width="100" height="100" style="fill: #f1f1f1; fill: lab(95 0 0);" />
<rect x="100" width="100" height="100" style="fill: #c6c6c6; fill: lab(80 0 0);" />
<rect x="200" width="100" height="100" style="fill: #9e9e9e; fill: lab(65 0 0);" />
<rect x="300" width="100" height="100" style="fill: #777; fill: lab(50 0 0);" />
<rect x="400" width="100" height="100" style="fill: #525252; fill: lab(35 0 0);" />
<rect x="500" width="100" height="100" style="fill: #303030; fill: lab(20 0 0);" />
<rect x="600" width="100" height="100" style="fill: #111; fill: lab(5 0 0);" />
</svg>
<figcaption class="info-line center"><p>Something better, for comparison</p></figcaption>
</figure>
<p>
CIE XYZ hangs out in the light-gray zone forever, and then gets very dark very fast – that last step is a doozy.
<p>
<em>All</em> CIE XYZ transitions from lighter colors to darker colors suffer from this problem<sup><a id="fn-3-mark" href="#fn-3-note">3</a></sup>.
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares again, but now they go from yellow to purple. Most of them are yellow, and there is a quick drop-off to deep purple right at the end."
>
<rect x="0" width="100" height="100" style="fill: #ff0; fill: color(xyz-d65 0.7699751 0.9278077 0.1385256);" />
<rect x="100" width="100" height="100" style="fill: #eeec41; fill: color(xyz-d65 0.6616459 0.7848397 0.1671047);" />
<rect x="200" width="100" height="100" style="fill: #dbd65c; fill: color(xyz-d65 0.5533168 0.6418718 0.1956837);" />
<rect x="300" width="100" height="100" style="fill: #c6be6f; fill: color(xyz-d65 0.4449876 0.4989038 0.2242628);" />
<rect x="400" width="100" height="100" style="fill: #ada07f; fill: color(xyz-d65 0.3366584 0.3559359 0.2528419);" />
<rect x="500" width="100" height="100" style="fill: #8e798d; fill: color(xyz-d65 0.2283292 0.2129679 0.2814209);" />
<rect x="600" width="100" height="100" style="fill: #642f99; fill: color(xyz-d65 0.12 0.07 0.31);" />
</svg>
<figcaption class="info-line center"><p>Yellow yellow yellow yellow, yellowish-gray… mauve… <em>purple!</em> </p></figcaption>
</figure>
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Once again, seven squares from yellow to purple. This one looks a lot more even; yellows on the left, purples on the right, even steps between adjacent squares."
>
<rect x="0" width="100" height="100" style="fill: #ff0; fill: oklab(96.798272% -0.071369 0.1985698);" />
<rect x="100" width="100" height="100" style="fill: #e2de5d; fill: oklab(87.862697% -0.044469 0.1421801);" />
<rect x="200" width="100" height="100" style="fill: #c6bd7a; fill: oklab(78.927122% -0.017568 0.0857904);" />
<rect x="300" width="100" height="100" style="fill: #ab9c8a; fill: oklab(69.991547% 0.0093322 0.0294007);" />
<rect x="400" width="100" height="100" style="fill: #917b93; fill: oklab(61.055972% 0.0362327 -0.026989);" />
<rect x="500" width="100" height="100" style="fill: #795898; fill: oklab(52.120397% 0.0631331 -0.083379);" />
<rect x="600" width="100" height="100" style="fill: #642f99; fill: oklab(43.184822% 0.0900336 -0.139768);" />
</svg>
<figcaption class="info-line center"><p>This one has the same number of yellows and purples, and puts the middle color in the middle.</p></figcaption>
</figure>
<p>Transitions between light colors and dark colors aren’t the only problem. Gradients between different hues can look lopsided, too.<sup><a id="fn-4-mark" href="#fn-4-note">4</a></sup>.
<!-- h: blue to green -->
<!-- in theory these two colors produce significantly more lopsidedness:
oklch(66% 0.175 263)
oklch(66% 0.17258 128)
but to my eyes it's not that much more, and boy -- that's an uglier gradient
color(xyz-d65 0.27 0.27 0.99)
= 0090FF
= 465nm
color(xyz-d65 0.12 0.27 0.02)
#00a700
~510nm
-->
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares, again, now they go from a cerulean blue to green. Lots of blue and only gets green twoards the end."
>
<rect x="0" width="100" height="100" style="fill: #0092ff; fill: color(xyz-d65 0.27 0.27 0.99);" />
<rect x="100" width="100" height="100" style="fill: #0096eb; fill: color(xyz-d65 0.245 0.27 0.8283333);" />
<rect x="200" width="100" height="100" style="fill: #009ad4; fill: color(xyz-d65 0.22 0.27 0.6666667);" />
<rect x="300" width="100" height="100" style="fill: #009dba; fill: color(xyz-d65 0.195 0.27 0.505);" />
<rect x="400" width="100" height="100" style="fill: #00a199; fill: color(xyz-d65 0.17 0.27 0.3433333);" />
<rect x="500" width="100" height="100" style="fill: #00a46a; fill: color(xyz-d65 0.145 0.27 0.1816667);" />
<rect x="600" width="100" height="100" style="fill: #00a700; fill: color(xyz-d65 0.12 0.27 0.02);" />
</svg>
<figcaption class="info-line center"><p>I can barely tell the difference between the first two swatches. But things are getting green quickly, over on the right.</p></figcaption>
</figure>
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares from cerulean blue to green again, this time with much better balance and even steps."
>
<rect x="0" width="100" height="100" style="fill: #0092ff; fill: oklab(64.628218% -0.07586 -0.185598);" />
<rect x="100" width="100" height="100" style="fill: #009add; fill: oklab(64.249045% -0.095807 -0.129729);" />
<rect x="200" width="100" height="100" style="fill: #009fba; fill: oklab(63.869871% -0.115754 -0.07386);" />
<rect x="300" width="100" height="100" style="fill: #00a399; fill: oklab(63.490697% -0.135701 -0.017991);" />
<rect x="400" width="100" height="100" style="fill: #00a674; fill: oklab(63.111524% -0.155648 0.037878);" />
<rect x="500" width="100" height="100" style="fill: #00a746; fill: oklab(62.73235% -0.175596 0.0937469);" />
<rect x="600" width="100" height="100" style="fill: #00a700; fill: oklab(62.353176% -0.195543 0.1496158);" />
</svg>
<figcaption class="info-line center"><p>Better.</p></figcaption>
</figure>
<p>My favorite perceptual problem with CIE XYZ is that transitions between blue and gray get weirdly purple in the middle:
<!-- c: blue to gray -->
<!-- `blue` -> lab() lightness of `blue` with zero chroma and hue... oklab(45.201372% 0 0) -->
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares again. This time they go from blue to gray. In the middle, the squares look purplish."
>
<rect x="0" width="100" height="100" style="fill: #00f; fill: color(xyz-d65 0.1804808 0.0721923 0.9505322);" />
<rect x="100" width="100" height="100" style="fill: #2121ed; fill: color(xyz-d65 0.1650304 0.0755526 0.8088732);" />
<rect x="200" width="100" height="100" style="fill: #3131d9; fill: color(xyz-d65 0.1495799 0.0789128 0.6672143);" />
<rect x="300" width="100" height="100" style="fill: #3d3dc3; fill: color(xyz-d65 0.1341295 0.0822731 0.5255554);" />
<rect x="400" width="100" height="100" style="fill: #4646a9; fill: color(xyz-d65 0.1186791 0.0856333 0.3838965);" />
<rect x="500" width="100" height="100" style="fill: #4e4e87; fill: color(xyz-d65 0.1032287 0.0889936 0.2422376);" />
<rect x="600" width="100" height="100" style="fill: #565656; fill: color(xyz-d65 0.0877782 0.0923538 0.1005787);" />
</svg>
<figcaption class="info-line center"><p><a href="https://en.wikipedia.org/wiki/Abney_effect">Blue lights actually do this in real life!</a></p></figcaption>
</figure>
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares from blue to gray again. This time they do not get purplish in the middle, they just look grayish-bluish."
>
<rect x="0" width="100" height="100" style="fill: #00f; fill: oklab(45.201372% -0.032457 -0.311528);" />
<rect x="100" width="100" height="100" style="fill: #0133e3; fill: oklab(45.201372% -0.027047 -0.259607);" />
<rect x="200" width="100" height="100" style="fill: #1444c7; fill: oklab(45.201372% -0.021638 -0.207685);" />
<rect x="300" width="100" height="100" style="fill: #274eab; fill: oklab(45.201372% -0.016228 -0.155764);" />
<rect x="400" width="100" height="100" style="fill: #385390; fill: oklab(45.201372% -0.010819 -0.103843);" />
<rect x="500" width="100" height="100" style="fill: #475673; fill: oklab(45.201372% -0.005409 -0.051921);" />
<rect x="600" width="100" height="100" style="fill: #565656; fill: oklab(45.201372% 0 0);" />
</svg>
<figcaption class="info-line center">
<p>True blue, all the way through.</p>
</figcaption>
</figure>
<p>
Color nerds call color spaces that are <em>good</em> at creating even gradients “perceptually uniform.” Meaning, the <em>distance</em> between any two colors in the space corresponds to “how different” they look, to people. There are all sorts of reasons folks might want a color space like this.
<ul>
<li><a href="https://en.wikipedia.org/wiki/Cynthia_Brewer#Brewer_palettes">Maybe</a> they’re making a data visualization and want to use color differences to communicate value differences.
<li><a href="https://helpx.adobe.com/photoshop-elements/using/adjusting-color-saturation-hue-vibrance.html">Maybe</a> they’re making image-editing software, and want modifications to feel consistent and intuitive.<sup><a id="fn-5-mark" href="#fn-5-note">5</a></sup>
<li><a href="https://en.wikipedia.org/wiki/LMS_color_space#Image_processing">Maybe</a> they’re storing colors digitally, and want to store as many perceptually-different colors in as few bits as possible.
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">Maybe</a> they’re trying to measure color contrast in order to ensure accessibility.
<li><a href="https://gradient.style/">Maybe</a> they’re trying to render a nice, even-looking gradient as a design element.
</ul>
<p>
For these tasks (and <a href="https://en.wikipedia.org/wiki/Beer_measurement#Colour">more</a>!), a perceptually-uniform color space is the right tool for the job.
<p>
As discussed, CIE XYZ ain’t it.
<p>(<a href="https://en.wikipedia.org/wiki/SRGB">sRGB</a>, the web’s dominant, default color space, was constructed in order to model a typical 1990s cathode-ray tube display; sRGB also ain’t it.<sup><a id="fn-6-mark" href="#fn-6-note">6</a></sup>)
<p>
The first attempt at “it” (a perceptually-uniform color space) was made by <a href="https://en.wikipedia.org/wiki/Albert_Henry_Munsell">Albert Munsell</a>, who <a href="https://www.gutenberg.org/files/26054/26054-h/26054-h.htm#tag5">described his space in 1905</a> (charmingly, as a <span class="small-caps">“COLOR TREE”</span>) and <a href="https://library.si.edu/digital-library/book/atlasmunsellcol00muns">published an “Atlas” to it in 1913</a>.
<p>
The central “trunk” of Munsell’s <span class="small-caps">TREE</span> goes from black at the bottom, through grey in the middle, to white at the top. The middle expands outwards into a rainbow of “branches”, with each angle around the trunk representing a particular hue. Each branch starts off desaturated near the middle, and gets more and more saturated the further out it goes.
<figure class="wide">
<div class="surfaceAndCrossectionContainer" style="align-items: center;">
<picture>
<source
type="image/avif"
sizes="auto, (min-width: 400px) 50vw, 100vw"
width="1446"
height="1504"
srcset="/assets/2024-02-20-okay-color-spaces/color-tree-transparent-1446w.avif 1446w,
/assets/2024-02-20-okay-color-spaces/color-tree-transparent-1200w.avif 1200w,
/assets/2024-02-20-okay-color-spaces/color-tree-transparent-1000w.avif 1000w,
/assets/2024-02-20-okay-color-spaces/color-tree-transparent-800w.avif 800w,
/assets/2024-02-20-okay-color-spaces/color-tree-transparent-600w.avif 600w"
/>
<img
loading="lazy"
sizes="auto, (min-width: 400px) 50vw, 100vw"
width="1446"
height="1504"
srcset="/assets/2024-02-20-okay-color-spaces/color-tree-solid-1446w.jpg 1446w,
/assets/2024-02-20-okay-color-spaces/color-tree-solid-1200w.jpg 1200w,
/assets/2024-02-20-okay-color-spaces/color-tree-solid-1000w.jpg 1000w,
/assets/2024-02-20-okay-color-spaces/color-tree-solid-800w.jpg 800w,
/assets/2024-02-20-okay-color-spaces/color-tree-solid-600w.jpg 600w"
src="/assets/2024-02-20-okay-color-spaces/color-tree-solid-600w.jpg"
alt="An old-timey-looking black-and-white line engraving of a tree, with the trunk divided into nine numbered segments (1-9). Branches extend outwards. Each branch has a sign hanging off of it describing its hue (“Yellow”, “Red”, “Yellow-Red”, “Green-Yellow”, “Blue-Green”, “Purple”, “Purple-Blue”, “Red-Purple”, “Blue”, and “Green”). Each branch has numbered leaves - the numbers go higher as they get further from the trunk. Branches have different numbers of leaves; for instance, the reds go to 10, but the purples only go to 6. There are many delightful illustrated details: a sun with a face on it shining down from the top of the image, an artist with a trusty dog painting a canvas in the lower right, a squirrel burrowing under the base of the tree, billowing clouds, rolling hills."
/>
</picture>
<picture>
<source
type="image/avif"
sizes="auto, (min-width: 400px) 50vw, 100vw"
width="1280"
height="960"
srcset="/assets/2024-02-20-okay-color-spaces/Munsell_1943-1280w.avif 1280w,
/assets/2024-02-20-okay-color-spaces/Munsell_1943-800w.avif 800w,
/assets/2024-02-20-okay-color-spaces/Munsell_1943-600w.avif 600w"
/>
<source
type="image/webp"
sizes="auto, (min-width: 400px) 50vw, 100vw"
width="1280"
height="960"
srcset="/assets/2024-02-20-okay-color-spaces/Munsell_1943-1280w.webp 1280w,
/assets/2024-02-20-okay-color-spaces/Munsell_1943-800w.webp 800w,
/assets/2024-02-20-okay-color-spaces/Munsell_1943-600w.webp 600w"
/>
<img
loading="lazy"
sizes="auto, (min-width: 400px) 50vw, 100vw"
width="1280"
height="960"
src="/assets/2024-02-20-okay-color-spaces/Munsell_1943-600w.png"
alt="A colorful, modern, and clean 3D visualization. It consists of a bunch of stacked rings made of little cubic wedges, each with a solid color. It almost looks like voxel art. All together they make an rough, irregular, lopsided shape that starts at a single small black cylinder at the bottom, grows out to a huge colorful pinwheel of colors, and shrinks back to a single small white cylinder white at the top. A quarter of the solid has been cleanly cut away to the core, letting us see two planes of squares - all with constant hue but varying lightness and chroma. The core is achromatic and goes from black through gray up to white. Each step away from it gets more and more chromatic. The furthest tips on each cutaway plane are the most chromatic. The left plane of the cutaway has a magenta hue and the right, blue. The rest of the stacked rings are colored like the rainbow: orange, yellow, green, and cyan. Presumably missing, in the cutaway section, are red and purple."
/>
</picture>
</div>
<figcaption class="info-line center">
<p>
Left: A wood engraving illustrating Munsell’s <span class="small-caps">COLOR TREE</span> from <a href="https://archive.org/details/gri_c00033125006531145/page/n21/mode/2up"><cite>A Grammar of Color</cite></a> by T. M. Cleland, 1921. Right: An excellent cutaway visualization of the <a href="https://www.rit.edu/science/munsell-color-science-lab-educational-resources#munsell-renotation-data">Munsell Renotation Data</a> by the stellar Wikipedian, <a href="https://commons.wikimedia.org/wiki/User:Datumizer">Mike Horvath, <abbr class="small-caps">aka</abbr> Datumizer</a>
</p>
</figcaption>
</figure>
<p>
Whereas every color theorist before Albert Munsell (and many, after him) worked from the “frame in”, trying to cram all visible colors into a regular shape like a wheel or a sphere or whatever, Munsell instead worked from the “content out”, trying to create <em>even intervals</em> between adjacent colors and letting each “branch” extend as far as it could before he reached some limit of saturation. The resulting solid resembles a lumpy, lopsided spinning top.
<p>
Albert’s <span class="small-caps">COLOR TREE</span> was immediately recognized as useful, and is in fact <a href="https://en.wikipedia.org/wiki/Munsell_color_system#:~:text=the%20Munsell%20system%20is%20still%20widely%20used">still used</a>. But as time passed, problems accumulated:
<ul>
<li>It was based on his own personal judgements rather than scientific experiments, <a href="https://www.rit.edu/science/munsell-color-science-lab-educational-resources#munsell-renotation-data"><em>and it showed.</em></a>
<li>(Just like our toy color space!) the <span class="small-caps">COLOR TREE</span> is discrete, and only specifies the positions of a few hundred individual colors.
<li>Those colors didn’t cover anything close to the range of colors that people can actually see.
</ul>
<p>
In the decades that followed, people tried to solve all of these problems, both iterating on Munsell’s tree and creating wholly new continuous color spaces that attempted to be perceptually uniform. Arguably, the most significant of those spaces was constructed by the CIE, in 1976: <a href="https://en.wikipedia.org/wiki/CIELAB_color_space">CIELAB</a>. (Ever heard of “Lab color”? This is that.)
<p>
CIELAB is a relatively simple mathematical transform of CIE XYZ, making it easy to implement in “color managed” digital contexts. But – tragically! – <a href="https://www.w3.org/Graphics/Color/Workshop/slides/talk/lilley#limit">CIELAB isn’t exactly perceptually uniform</a>. Worse, the more experiments people did, the clearer it became that <em>no</em> three-dimensional space <em>could ever</em> be perceptually uniform; three dimensions just cannot capture all of the weird and wonderful ways that our eyes and brains process color comparisons. As anyone who has <a href="https://massmoca.org/event/james-turrell/">entered a Turrell</a> or debated <a href="https://en.wikipedia.org/wiki/The_dress">The Dress</a> can tell you, color perception is <em>wild.</em> When trying to predict how people are going to perceive the difference between two colors, we need to account for <em>way</em> more than three variables. For instance:
<ul>
<li>How large are the color samples? Where are they in the subject’s field of vision?
<li>How long have they been there? What other colors were there recently?
<li>Crucially, what other colors surround the samples?
<li>What’s the ambient background lighting like?
</ul>
<p>
(I’m not even going to mention the ways in which we “read” scenes within <a href="https://lsm.media.mit.edu/papers/kubat_4_29.pdf">semantic</a> and <a href="https://radiolab.org/podcast/211213-sky-isnt-blue">cultural</a> contexts, which also matter.)
</p>
<p>
So, after 1976, people started developing more-and-more complicated models that attempted to account for more-and-more of this complexity. <a href="https://en.wikipedia.org/wiki/Color_appearance_model#Color_appearance_models">We’ve spent fifty years coming up with these things</a>. Many of the resulting color models are considered too complex for most practical applications, and yet none of them is considered perfect.
<p>
I am fascinated that the CIE knocked <em>predicting color mixes and matches</em> out of the park in 1931, and yet here we are, almost a hundred years later, still trying to solve the problem of <em>predicting color differences.</em> Our mastery of mixing and matching makes us very good at capturing and replicating colors. But, because we can’t predict differences well, we’re still bad at automating all sorts of other color tasks, which remain as much art as science.
<p>
One thing that’s absolutely clear is that the problem of perceptual uniformity is <em>never</em> going to be solved with a plain-Jane three-dimensional color space. But! The entire universe of digital imaging is rooted in such spaces, because it’s all built on top of CIE XYZ.
<p>
So – what is someone who wants a perceptually-uniform space in a digital context supposed to do these days?
<h2 class="little-h">Oklab: it’s okay!</h2>
<p>
Until a few years ago, the best tool for these sorts of jobs was still CIELAB. So I was excited when <a href="https://www.w3.org/TR/2016/WD-css-color-4-20160705/#lab-colors">CIELAB-for-the-web was first proposed in 2016</a>. And then I waited for five years, <a href="https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes#CSS">until it finally shipped</a>.
<p>
While I was waiting, in December of 2020, a guy named <a href="https://bottosson.github.io/posts/oklab/">Björn Ottosson wrote a blog post</a>. In it, he introduced a brand-new three-dimensional color space that he’d been working on: Oklab.
<p>
In an over-simplified nutshell, here’s how Björn came up with Oklab:
<ol>
<li>He picked a couple of best-in-class color models<a id="fn-7-mark" href="#fn-7-note"><sup>7</sup></a>.
<li>After choosing a set of values representing “normal” viewing conditions, he used those models to generate a set of color comparison data.
<li>He transformed CIE XYZ in a mathematically clean/easy way to <em>approximately</em> fit all of that color comparison data <em>pretty well.</em>
</ol>
<p>
<i lang='fr'>Et voila:</i> Oklab. Here’s what it looks like:
<figure class=wide>
<div class="inputContainer">
<label class="info-line" for=l>Cross section <math><mi>L</mi></math></label>
<input id=l type="range" min=0 max=1 step=0.01 value=0.5>
<output for=l></output>
</div>
<div class="surfaceAndCrossectionContainer">
<div
class="oklabContainer"
id="oklab-solid"
aria-role="img"
arial-label="Another 3D graph of a color solid. Unlike the XYZ solid, this one is not cubic at all, and has curved sides and lines. It’s centered around the (vertical) L axis, and almost looks like an ice cream cone. At the bottom is black; the shape swells out into a cone/ring of colors, and then arches/points up to white at the top. The points that are the furtest away from the L axis are the most colorful/pure. There are cross axes, along the “floor,” labelled “a” and “b”, that each go from -0.4 to +0.4. L goes from 0 to 1."
>
</div>
<div
class=crosssectionContainer
aria-role="img"
arial-label="A 2D cross-section of the Oklab solid at a given value of L, showing a Cartesian plane with “a” and “b” axes going from -0.4 to +0.4. When L is small, the cross-section is small and dark. It grows into a kind of billowing triangle sail shape with curved sides, untl about L=0.5, when it starts morphing into a rainbow parallelogram. At L values above 0.8 it shrinks quickly into a light, very skinny/tall sail of a shape, and finally shrinks to a single white point. At every L value, the value at a=b=0 is achromatic - a gray of varying lightness, and the further away from it we get, the more colorful the pixels. All of the hues are arrayed around the origin, so that if you were to travel the outside perimeter of the shape at any L level, you would see a rainbow gradient: moving clockwise from 12 o’clock we start at yellow, with orange at one o’clock and red at two, magenta at three, purple from four to five, indigo at six, cerulean blue at seven, teal from eight to nine, greenest green at 10:30, and back to yellow at noon."
>
<canvas id="oklab-crosssection"></canvas>
<img src="assets/crosssection-background-oklab.svg" style="width: 100%;">
</div>
</div>
<figcaption class="info-line center"><p>The P3 gamut, plotted in the Oklab color space.</p></figcaption>
</figure>
<p>
Is it perfect? <a href="https://front-end.social/@eeeps/111443549539978889">No</a>, it is <a href="https://github.com/w3c/csswg-drafts/issues/9449#issuecomment-1754094385">not</a>. But is it mathematically and computationally simple? Yes! And does it perform better at most tasks requiring perceptual uniformity than all of the other simple, three-dimensional color spaces? Sure seems like it!
<p>
What happened next was astonishing: <a href="https://github.com/w3c/csswg-drafts/issues/6642">the web platform rapidly adopted Oklab</a>. Oklab went from a blog post to shipping in Safari in <em>fifteen months!</em> Wild!
<p>
<a href="https://helpx.adobe.com/photoshop/using/gradient-interpolation.html">Photoshop soon followed suit.</a>
<p>
So, Oklab: if you want perceptual ~uniformity, it’ll do.
<h2 class="little-h">OKLCH, because Munsell was a good API designer</h2>
<p>
What do Oklab’s <math><mi>L</mi></math>, <math><mi>a</mi></math>, and <math><mi>b</mi></math> parameters <em>actually mean?</em>
<ul>
<li><math><mi>L</mi></math> is lightness. This represents how light or dark a color looks. <math><mi>L</mi></math> goes from zero to one.
<li><math><mi>a</mi></math> is “greeness-to-redness” with gray at zero. It’s theoretically unbounded but in practice it goes from around -0.4 to +0.4.
<li><math><mi>b</mi></math> is “blueness-to-yellowness” with gray at zero. Same-same with the practical approximate -0.4 to +0.4 range.
</ul>
<p>
So, in Oklab, <a href="https://www.w3.org/TR/css-color-4/#valdef-color-blueviolet"><code>blueviolet</code></a> is <code><span class="swatch" style="background-color: blueviolet; background-color: oklab(53.38% 0.1303 -0.2137);"></span>oklab(53.38% 0.1303 -0.2137)</code>: medium lightness, somewhat red, and rather blue.
<p>
Are you thinking what I'm thinking? <math><mi>a</mi></math> and <math><mi>b</mi></math> are <em>weird.</em>
<p>
Munsell’s <span class="small-caps">COLOR TREE</span> has much nicer dimensions:
<ul>
<li>Lightness: height up the tree; black to white.
<li>Hue: angle around the trunk; just like the color wheels of my youth.
<li>Chroma: how far away from the trunk are we? Gray in the middle and more saturated the further away we get.
</ul>
<p>
These three dimensions seem to express ways that our brains actually process color. When comparing one color to another on the same branch of Munsell’s <span class="small-caps">COLOR TREE</span>, it feels like only one thing has changed: chroma. Likewise when we go up and down the tree, or around it – both lightness and hue <em>feel</em> like independent variables. Whereas when we change, say, the <math><mi>a</mi></math> of an Oklab color, it feels like we’re changing two things – both the hue and the chroma – simultaneously. It’s not easy to predict how changing <math><mi>a</mi></math> or <math><mi>b</mi></math> is going to look.
<p>
Thankfully – turns out! – Oklab was explicitly designed so that movement up/down, in/out, and around the <math><mi>L</mi></math> axis works exactly like navigating Munsell’s <span class="small-caps">COLOR TREE</span>. Each type of movement changes <em>just one, psychologically-independent thing</em>: the lightness, chroma, or hue of the color. In order to navigate Oklab like this, we need to use a polar coordinate system, instead of a rectangular one. When we do, we refer to the space by another name: OKLCH<a id="fn-8-mark" href="#fn-8-note"><sup>8</sup></a>.
<figure class="wide">
<div class="surfaceAndCrossectionContainer">
<picture>
<source type="image/avif" srcset="/assets/2024-02-20-okay-color-spaces/crosssection-oklab-blueviolet-avif.svg" />
<source type="image/webp" srcset="/assets/2024-02-20-okay-color-spaces/crosssection-oklab-blueviolet-webp.svg" />
<img
src="/assets/2024-02-20-okay-color-spaces/crosssection-oklab-blueviolet-png.svg"
alt="A crossection of the Oklab space, placed on a rectilinear grid, with a horizontal “a” axis and vertical “b” axis. An irregular shape extends from about -0.2 to +0.25 “a”, and -0.3 to +0.15 “b”. It looks kind of like a rounded coffee cup, with a flatish top and bottom, and the right side convex bulging out, but the left side is concave, bending in towards the origin. The origin is a medium-dark gray; as we move away from it the colors get more and more colorful; as we rotate around it with the same progression of colors as we move around the clock described previously. A small, heavy white circle is in the lower right-hand quadrant, circling a purple color."
>
</picture>
<picture>
<source type="image/avif" srcset="/assets/2024-02-20-okay-color-spaces/crosssection-oklch-blueviolet-avif.svg" />
<source type="image/webp" srcset="/assets/2024-02-20-okay-color-spaces/crosssection-oklch-blueviolet-webp.svg" />
<img
src="/assets/2024-02-20-okay-color-spaces/crosssection-oklch-blueviolet-png.svg"
alt="A crossection of the OKLCH space. We see the exact same rainbow-coffe-cup, at the exact same scale and position, as the Oklab crossection we just examined. However, instead of a rectilinear grid, it is now placed within polar coordinates - it looks like a dart board, with concentric circles and spokes of a wheel. Movement around the wheel is labeled “H”, and movement in/out along any spoke is labelled “C”. The small heavy white circle around a particular purple is in the same place as before, too."
>
</picture>
</div>
<figcaption class="info-line center"><p>
Same same; <code><span class="swatch" style="background-color: #8a2be2; background-color: oklab(53.38% 0.1303 -0.2137);"></span>oklab(53.38% 0.1303 -0.2137)</code> =
<code><span class="swatch" style="background-color: #8a2be2; background-color: oklch(53.38% 0.2503 301.4deg);"></span>oklch(53.38% 0.2503 301.4deg)</code>.
</p></figcaption>
</figure>
<p>I should note that OKLCH was <a href="https://en.wikipedia.org/wiki/HCL_color_space">not the first color space to adopt Munsell’s lightness-chroma-hue “API”</a>; even CIELAB had a polar version that worked like this, called LCH. But <a href="https://raphlinus.github.io/color/2021/01/18/oklab-critique.html#hue-linearity">OKLCH does appear to be one of the best</a>.
<p>
Both OKLCH and Oklab have their uses. Gradients in polar spaces work differently than gradients in rectangular spaces. They’re not better or worse, mind you – just different.
<p>
In a rectangular space, a gradient between two colors that lie on opposite sides of the space gets gray in the middle:
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Again with the seven squares. This time we're going from orange to blue. The orange gets progressively desaturated til we hit the middle square, which is perfectly gray. Then the gray gets bluer until we hit the last blue square."
>
<rect x="0" width="100" height="100" style="fill: #e58042; fill: oklab(70% 0.093847 0.1118425);" />
<rect x="100" width="100" height="100" style="fill: #cf8c66; fill: oklab(70% 0.0625647 0.0745617);" />
<rect x="200" width="100" height="100" style="fill: #b89684; fill: oklab(70% 0.0312823 0.0372808);" />
<rect x="300" width="100" height="100" style="fill: #9e9e9e; fill: oklab(70% 0 0);" />
<rect x="400" width="100" height="100" style="fill: #80a5b7; fill: oklab(70% -0.031282 -0.037281);" />
<rect x="500" width="100" height="100" style="fill: #57aacf; fill: oklab(70% -0.062565 -0.074562);" />
<rect x="600" width="100" height="100" style="fill: #00ade7; fill: oklab(70% -0.093847 -0.111842);" />
</svg>
<picture>
<source type="image/avif" srcset="/assets/2024-02-20-okay-color-spaces/oklab-interpolation-avif.svg" />
<source type="image/webp" srcset="/assets/2024-02-20-okay-color-spaces/oklab-interpolation-webp.svg" />
<img
style="width: 80%; margin-bottom: -6%; margin-top: -4%;"
src="/assets/2024-02-20-okay-color-spaces/oklab-interpolation-png.svg"
alt="A crossection of the Oklab solid, with the rectilinear grid and “a” and “b” axes, as previously described. This particular crossection is like a parallelogram with four corners - green in the upper left, orange in the upper right, magenta in the lower right, and blue in the lower left. But the magenta edge has been, like, clipped, as if someone chopped off the point of it. Anyways there is a series of seven white circles, each circling one of the colors in the above seven-step-gradient. They are perfectly evenly spaced and on a perfect straight line from the bottom left to top right. The fourth circle is right at the origin, and circles a pure gray."
>
</picture>
</figure>
<p>
In a polar space, instead of drawing a straight line through the space to get from one color to the other, we orbit the origin, creating a half-rainbow of evenly-separated hues.
</p>
<figure>
<svg
class="gradient"
viewbox="0 0 700 100"
aria-role="img"
aria-label="Seven squares, from the same orange to the same blue. But now instead of getting gray in the middle, they get yellow – green in the middle – teal – then blue."
>
<rect x="0" width="100" height="100" style="fill: #e58042; fill: oklch(0.7 0.146 50);" />
<rect x="100" width="100" height="100" style="fill: #cd9200; fill: oklch(0.7 0.146 80);" />
<rect x="200" width="100" height="100" style="fill: #a5a51b; fill: oklch(0.7 0.146 110);" />
<rect x="300" width="100" height="100" style="fill: #6ab459; fill: oklch(0.7 0.146 140);" />
<rect x="400" width="100" height="100" style="fill: #00bb90; fill: oklch(0.7 0.146 170);" />
<rect x="500" width="100" height="100" style="fill: #00b7c0; fill: oklch(0.7 0.146 200);" />
<rect x="600" width="100" height="100" style="fill: #00ade7; fill: oklch(0.7 0.146 230);" />
</svg>
<picture>
<source type="image/avif" srcset="/assets/2024-02-20-okay-color-spaces/oklch-interpolation-avif.svg" />
<source type="image/webp" srcset="/assets/2024-02-20-okay-color-spaces/oklch-interpolation-webp.svg" />
<img
style="width: 80%; margin-bottom: -6%; margin-top: -6%;"
src="/assets/2024-02-20-okay-color-spaces/oklch-interpolation.svg"
alt="A crossection of the OKLCH space. Same clipped-corner parallelogram as before, but now it’s on the dartboard/wheel/polar grid. Again there are seven circles, but this time, instead of being aligned in a straight line right through the origin, from the blue to the orange, we have a perfect half-circle around the origin. Interestingly, the circles around the teal and and yellow colors are getting kind of close to leaving the parallelogram – being outside the P3 gamut – but they stay in bounds."
>
</picture>
</figure>
<p>
Some tasks (like measuring color difference) are simpler in rectangular spaces. But whenever we want to change the hue or chroma of a color independently – say, when we want to turn a color’s saturation up a notch, or <a href="https://web.dev/articles/building/a-color-scheme">theme and scheme with code</a> – only a perceptually ~uniform, <em>polar</em> space will do. Right now, on the web: that means OKLCH.
<h2 class="little-h">So!</h2>
<p>What have we learned?</p>
<ul>
<li>Color spaces are constructs, which arrange colors into some coordinate-based space.
<li>Colors don’t have any kind of innate spatial relationship to each other, but arranging them in various ways can be useful.
<li>CIE XYZ is an extremely useful color space, because it turns color mixing problems and color matching problems into math problems.
<li>All “color managed” digital imaging is based on CIE XYZ.
<li>Measuring how we’ll perceive the <em>difference</em> between two colors is a whole other kettle of fish; predicting differences remains an unsolved problem.
<li>Solving that problem – by constructing a model with perfect “perceptual uniformity” – is going to require more than three variables, but oops! We built all digital imaging on top of CIE XYZ, a three-dimensional space.
<li>Oklab tries to resolve this by making many assumptions and simplifications, in order to model everything we’ve learned about perceptual uniformity in a simple three-dimensional space.
<li>Oklab is pretty good!
<li>People tend to think about color in terms of three variables: lightness, chroma, and hue.
<li>Oklab does a good job of isolating these variables, but in order to use them, we have to navigate it using polar coordinates instead of rectangular ones. When we navigate Oklab this way, we call it OKLCH.
</ul>
<h2 class="little-h">Time to play</h2>
<p>Enough reading! Go! Explore!</p>
<ul>
<li><a href="https://oklch.com/">Evil Martians’ OKLCH color picker</a> is fantastic.</li>
<li>I couldn’t have written this post without <a href="https://colorjs.io">Color.js</a>. It’s doing all of the color math in the interactive visualizations, and I had multiple <a href="https://colorjs.io/notebook/">color notebooks</a> open at all times, while writing.
<li>Speaking of the interactive illustrations, if you want to visualize <em>other</em> gamuts in <em>other</em> color spaces, <a href="https://facelessuser.github.io/coloraide/demos/3d_models.html">the ColorAide <cite>Interactive 3D Color Space Models</cite> demo</a> has you covered.</li>
<li>For a different entry point into understanding color spaces in general and CIE XYZ in particular, check out <a href="https://ciechanow.ski/color-spaces/">Bartosz Ciechanowski’s <cite>Color Spaces</cite></a>. It’s chock full of interactives.
<li>I know I linked to it earlier, but <a href="https://bottosson.github.io/posts/oklab/">Björn Ottosson’s original Oklab blog post</a> is very good.
</ul>
<p>Okay, bye! 🌈</p>
<aside class='footnotes'>
<ol start=1>
<li id="fn-1-note">…for colored <em>light,</em> not colored pigments. <a href="https://larswander.com/writing/spectral-paint-curves/">Predicting how pigments will mix is hard</a>. <a href="#fn-1-mark">↩︎</a>
</li>
<li id="fn-2-note">
In addition to containing all of the <em>visible colors,</em> CIE XYZ contains a bunch of <em><a href="https://en.wikipedia.org/wiki/Impossible_color#Imaginary_colors">imaginary colors</a>,</em> which are, uh, outside of the scope of this article.
<a href="#fn-2-mark">↩︎</a>
</li>
<li id="fn-3-note">…because CIE XYZ represents intensity linearly, but <a href="https://en.wikipedia.org/wiki/Weber–Fechner_law#Vision">like all of our senses, human vision responds ~logarithmically to input</a>. <a href="#fn-3-mark">↩︎</a>
</li>
<li id="fn-4-note">…because <a href="https://en.wikipedia.org/wiki/Luminous_efficiency_function">we’re more sensitive to some hues than others</a>. An implication of this is that there are many times more photons shooting out of the blue side of that gradient, than there are from the green side, even though every swatch on the gradient has the same apparent lightness. Weird! <a href="#fn-4-mark">↩︎</a>
</li>
<li id="fn-5-note">Many image editing operations (for instance: compositing and downscaling) require a color space like CIE XYZ that models <em>how light works</em>. But many others (for instance: changing hue, saturation, and/or lightness) benefit from being done in a perceptually uniform space that models <em>how our eyes and brains process light.</em><a href="#fn-5-mark">↩︎</a>
</li>
<li id="fn-6-note">Although, interestingly, <a href="https://en.wikipedia.org/wiki/Cathode-ray_tube#Gamma">cathode-ray tubes respond to input non-linearly, kind-of-sort-of like people do</a>. <a href="#fn-6-mark">↩︎</a>
</li>
<li id="fn-7-note"><a href="https://en.wikipedia.org/wiki/Color_appearance_model#CAM16">CAM16-UCS</a> and <a href="https://en.wikipedia.org/wiki/Color_appearance_model#IPT">IPT</a>. <a href="#fn-7-mark">↩︎</a>
</li>
<li id="fn-8-note"><a href="https://front-end.social/@eeeps/109955851076325361">Pronounced “Oklachroma”</a>. <a href="#fn-8-mark">↩︎</a>
</li>
</ol>
</aside>
<script type="module" crossorigin src="./assets/index-mXX5eTHP.js"></script>
Sizes="auto" pretty much requires width and height attributestag:ericportis.com,2023-12-05:/posts/2023/auto-sizes-pretty-much-requires-width-and-height/2023-12-05T00:00:00-08:00
<p>Writing, reading, and maintaining <code class="language-plaintext highlighter-rouge">sizes</code> attributes is the worst part about authoring responsive images; <a href="https://html.spec.whatwg.org/multipage/images.html#:~:text=In%20this%20case%2C%20the%20sizes%20attribute%20can%20use%20the%20auto%20keyword">auto-<code class="language-plaintext highlighter-rouge">sizes</code> for lazy-loaded images</a> is a fantastic addition to the platform.</p>
<p>(It is very funny that the <a href="https://chromestatus.com/feature/5191555708616704">Chrome Platform Status entry for <code class="language-plaintext highlighter-rouge">sizes=auto</code></a> currently describes web developers’ collective opinion about the feature as “no signals.” <a href="https://almanac.httparchive.org/en/2022/media#:~:text=The%20lazysizes.js%20library%20has%20already%20proven%20the%20appetite%20for%20this%20sort%20of%20solution">One-in-ten <code class="language-plaintext highlighter-rouge">sizes</code> attributes on the web are <em>already using</em> <code class="language-plaintext highlighter-rouge">auto</code>,</a> via <a href="https://github.com/aFarkas/lazysizes">lazysizes.js</a>! But I digress.)</p>
<p>Auto-sizes just shipped behind the <a href="https://developer.chrome.com/docs/web-platform/chrome-flags/#two_other_ways_to_try_out_experimental_features">Experimental Web Platform Features flag</a> in <a href="https://www.google.com/chrome/canary/">Chrome Canary</a>. Which makes this a good time to try to explain the one weird thing about it. In short: in addition to requiring <code class="language-plaintext highlighter-rouge">loading=lazy</code>, <code class="language-plaintext highlighter-rouge">sizes=auto</code> also <em>basically</em> requires that <code class="language-plaintext highlighter-rouge"><img></code> elements have <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> attributes.</p>
<p>But don’t take my word for it. Here’s a note from <a href="https://html.spec.whatwg.org/multipage/images.html#sizes-attributes">Section 4.8.2.2 of the HTML specification, <cite>Sizes attributes</cite></a>:</p>
<blockquote>
Note: […] it is strongly encouraged to specify dimensions using the <a href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#attr-dim-width"><code>width</code></a> and <a href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#attr-dim-height"><code>height</code></a> attributes or with CSS. Without specified dimensions, the image will likely render with 300x150 dimensions because <code>sizes="auto"</code> implies <code>contain-intrinsic-size: 300px 150px</code>
</blockquote>
<p>What!? 300×150? It’s true! <a href="https://codepen.io/eeeps/full/yLZGKGZ">Here’s an <code class="language-plaintext highlighter-rouge"><img></code> element that uses <code class="language-plaintext highlighter-rouge">sizes=auto</code></a>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><img
loading="lazy"
sizes="auto"
srcset="
https://o.img.rodeo/w_1200,h_1200,b_tomato/t_WxH/_.png 1200w,
https://o.img.rodeo/w_900,h_900,b_goldenrod/t_WxH/_.png 900w,
https://o.img.rodeo/w_600,h_600,b_forestgreen/t_WxH/_.png 600w,
https://o.img.rodeo/w_300,h_300,b_dodgerblue/t_WxH/_.png 300w"
src="https://o.img.rodeo/w_300,h_300,b_forestgreen/t_WxH/_.png"
alt="An example image that reports its natural dimensions"
>
</code></pre></div></div>
<p>And here’s what that looks like right now, in Canary, with the Experimental Web Platform Features flag on:</p>
<figure>
<img src="https://o.img.rodeo/q_auto,f_auto/aqrmm7pegoz2bkuhhjuy.png" alt="Screenshot of a Chrome window, showing a Codepen titled “sizes=auto, without width and height”. It’s a mostly blank page, showing a small green rectangle (the img), which has some squished-looking text reading “600x600” in it." />
<figcaption class="info-line center">Note that Canary <em>did</em> load the best resource to fit (300<code>px</code>@2x = 600 device pixels).</figcaption>
</figure>
<p>Before I answer some obvious questions (what is happening, why), let’s tackle the practical: how do I fix it?</p>
<h2 class="little-h">What values should I use for <code>height</code> and <code>width</code>? </h2>
<p>You should use the height and width, in pixels, of the largest resource that your <code class="language-plaintext highlighter-rouge"><img></code> can serve. If you’re using <code class="language-plaintext highlighter-rouge">srcset</code>, that means the dimensions of the largest resource in your <code class="language-plaintext highlighter-rouge">srcset</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><img
loading="lazy"
sizes="auto"
width="1200"
height="1200"
srcset="
https://o.img.rodeo/w_1200,h_1200,b_tomato/t_WxH/_.png 1200w,
https://o.img.rodeo/w_900,h_900,b_goldenrod/t_WxH/_.png 900w,
https://o.img.rodeo/w_600,h_600,b_forestgreen/t_WxH/_.png 600w,
https://o.img.rodeo/w_300,h_300,b_dodgerblue/t_WxH/_.png 300w"
src="https://o.img.rodeo/w_300,h_300,b_dodgerblue/t_WxH/_.png"
alt="An example image that reports its natural dimensions"
>
</code></pre></div></div>
<p>(If you’re using <a href="https://wicg.github.io/responsive-image-client-hints/">Client Hints</a>, you should use the dimensions of the full-size resource, before any server-side downscaling for delivery. <a href="https://cdpn.io/pen/debug/PoVxMKX">Here’s a (Chrome-only) example that uses Client Hints</a>.)</p>
<p>Depending on what else you have going on in your CSS, adding <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> to your HTML might unexpectedly distort your <code class="language-plaintext highlighter-rouge"><img></code>, giving it a garish, fixed height which will pair terribly with its delightfully flexible width. One line of CSS will fix that for you:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>img {
height: auto;
}
</code></pre></div></div>
<p><a href="https://codepen.io/eeeps/pen/YzBdaBZ">All together, now</a>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><style>
img {
width: 100%;
height: auto;
}
</style>
<img
loading="lazy"
sizes="auto"
width="1200"
height="1200"
srcset="
https://o.img.rodeo/w_1200,h_1200,b_tomato/t_WxH/_.png 1200w,
https://o.img.rodeo/w_900,h_900,b_goldenrod/t_WxH/_.png 900w,
https://o.img.rodeo/w_600,h_600,b_forestgreen/t_WxH/_.png 600w,
https://o.img.rodeo/w_300,h_300,b_dodgerblue/t_WxH/_.png 300w"
src="https://o.img.rodeo/w_300,h_300,b_dodgerblue/t_WxH/_.png"
alt="An example image that reports its natural dimensions"
>
</code></pre></div></div>
<p>And here’s a screenshot of what that looks like in Canary with the flag on:</p>
<figure>
<img src="https://o.img.rodeo/q_auto,f_auto/bizjuedsjbu2hqnghtyr.png" alt="Screenshot of a Chrome window, showing a different Codepen, titled “sizes=auto, with width, height, and…” (unfortunately the title is truncated!?). Anyways in this one the img is gold/yellow, square, and fills almost the whole viewport. Inside if it is not-squished, normal-looking text, reading “900x900”." />
<figcaption class="info-line center">
All better!
</figcaption>
</figure>
<p>Perhaps you’re already adding <code class="language-plaintext highlighter-rouge">height</code> and <code class="language-plaintext highlighter-rouge">width</code> to your responsive image HTML and <code class="language-plaintext highlighter-rouge">height: auto</code> to your CSS in order to <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">prevent layout shifts</a>. Great! Change nothing!</p>
<p>Ok, so:</p>
<h2 class="little-h">What is happening and why?</h2>
<p>By default, images on the web are rendered at their <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth">natural (<span class="small-caps">aka</span> intrinsic)</a> dimensions. <a href="https://codepen.io/eeeps/pen/dyawmyb">If you stick a 300×300 resource into an <code class="language-plaintext highlighter-rouge"><img></code> and do nothing else, its layout size will be 300×300</a>.</p>
<p><a href="https://codepen.io/eeeps/pen/MWLZOMM">The natural dimensions of responsive images get surprisingly weird, fast</a>, but:</p>
<ol>
<li>There are a number of ways that a loaded resource’s natural dimensions can affect the layout dimensions of its <code class="language-plaintext highlighter-rouge"><img></code>.</li>
<li>The value of <code class="language-plaintext highlighter-rouge">sizes=auto</code> updates whenever an <code class="language-plaintext highlighter-rouge"><img></code>’s layout dimensions change, possibly triggering a new resource load.</li>
<li>A new resource will have new natural dimensions, which can affect the <code class="language-plaintext highlighter-rouge"><img></code>’s layout dimensions, which will update the <code class="language-plaintext highlighter-rouge">sizes=auto</code> value, which may trigger a new resource load; the new resource will have new natural dimensions, which <em>…&c.</em></li>
</ol>
<figure>
<img src="https://o.img.rodeo/q_auto,f_auto/qjyxub5iy0w43ntmcowt.png" alt="An illustration of the endless cycle. Three items are arranged in a circle. The top, centered one says “measured layout width”. There’s an arrow pointing from it to the second item in the bottom right, “sizes=auto”. Then there’s an arrow pointing from that to the third item, in the bottom left, “resource selection”. This one has three little icons signifying the different sizes of available images in light gray above it. Lastly, there’s another arrow, from “resource selection” back to “measured layout width” at the top." />
<figcaption class="info-line" style="margin-top: 0.5em; line-height: 1.2">A lot of the spec discussion around <code>sizes=auto</code> was just: people coming up with <a href="https://en.wikipedia.org/wiki/Corner_case">corner cases</a> that would load <em>every single resource in a <code>srcset</code>,</em> one-after-the-other, using this mechanism.</figcaption>
</figure>
<p><a href="https://mastodon.social/@zcorpan">Simon Pieters</a>, who wrote the auto-sizes spec, made a few valiant and clever attempts to define all of the cases that could possibly trigger cyclical dependencies and work around them in ways that wouldn’t be too weird or noticeable for authors. But when the rubber hit the road and implementers started implementing, those workarounds <a href="https://github.com/whatwg/html/issues/9448">didn’t hold up</a>. Ultimately, ’twas decided that the only way forward was to make a clean cut: mandate that a loaded resource’s natural dimensions <em>cannot</em> affect its <code class="language-plaintext highlighter-rouge"><img></code>’s layout in any way, <em>ever,</em> when <code class="language-plaintext highlighter-rouge">sizes=auto</code> is involved. Luckily, we have a fairly new feature that explicitly does exactly that: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment#size_containment">size containment</a>.</p>
<figure>
<img src="https://o.img.rodeo/q_auto,f_auto/bwnojfauuregfj4drh0b.png" alt="The exact same diagram as before, except some red scissors have appeared, which are cutting the arrow between “resource selection” to “measured layout width”." />
<figcaption class="info-line center" style="margin-top: 0.5em">Snip snip!</figcaption>
</figure>
<p>So now, this is in Chrome Canary’s UA stylesheet:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>img:is([sizes="auto" i], [sizes^="auto," i]) {
contain: size !important;
contain-intrinsic-size: 300px 150px;
}
</code></pre></div></div>
<p>That says: are we dealing with an <code class="language-plaintext highlighter-rouge"><img></code> with <code class="language-plaintext highlighter-rouge">sizes=auto</code>? Then its natural dimensions are 300×150. NO EXCEPTIONS.</p>
<p><a href="https://github.com/whatwg/html/issues/9448#issuecomment-1625060436">300×150 was chosen</a> because that’s what <a href="https://html.spec.whatwg.org/multipage/media.html#the-video-element:default-object-size"><code class="language-plaintext highlighter-rouge"><video></code></a> and <a href="https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element:~:text=The%20width%20attribute%20defaults%20to%20300%2C%20and%20the%20height%20attribute%20defaults%20to%20150."><code class="language-plaintext highlighter-rouge"><canvas></code></a> do; all of these elements use this smallish-but-non-zero default size in order to encourage you to do better.</p>
<p>Finally, we get to the load-bearing weasel-words in the title of this post: “<code class="language-plaintext highlighter-rouge">sizes=auto</code> <em>pretty much</em> requires <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> attributes”. <a href="https://front-end.social/@eeeps/111530259043483206"><code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code> are not the only way!</a> I think the pattern that I’m pushing, where you describe the aspect ratio of your content in HTML, and give it a flexible size in CSS – provides a better separation of concerns than any other solution. But the fundamental takeaway is: when you use <code class="language-plaintext highlighter-rouge">sizes=auto</code>, your image will be assigned a natural size of 300×150 and a natural aspect ratio of 2:1, and it’s on you to override those dimensions.</p>
The Maintenance Race (and me)tag:ericportis.com,2023-10-04:/posts/2023/the-maintenance-race-and-me/2023-10-04T00:00:00-07:00
<p>A couple of days ago, <a href="https://mastodon.social/@davatron5000/111172614117755841">Dave Rupert shared</a> an excellent article that I’ve been thinking about for, like, a whole year: Steward Brand’s <cite><a href="https://worksinprogress.co/issue/the-maintenance-race">The Maintenance Race</a></cite>.</p>
<p>The article is about a round-the-world solo sailboat race held in 1968, and you should <a href="https://worksinprogress.co/issue/the-maintenance-race">go read it</a> before you read any of this.</p>
<p>After Dave shared it, <a href="https://front-end.social/@eeeps/111173226921088911">I sarcastically quipped back</a>:</p>
<blockquote>
<a href="https://mastodon.social/@davatron5000/">@davatron5000</a> me, looking at a sink full of unwashed dishes and piles of unsorted mail on the counter, before retiring to the couch: “every day a new boat”
</blockquote>
<p>…who <a href="https://mastodon.social/@davatron5000/111173492294038307">responded in earnest</a>…</p>
<blockquote>
<a href="https://front-end.social/@eeeps/">@eeeps</a> Yeah. Looking at my desk I felt the shame. I like the attitude tho and aspire to get there.
</blockquote>
<p>…and made me realize that:</p>
<ol>
<li>My pithy reply was cheap and insufficient.</li>
<li>My year-of-mulling-this-thing-over has left me with some thoughts that are <em>too big for toots.</em></li>
</ol>
<p>First: the whole premise of a solo around-the-world race represents something I am both deeply drawn to, and increasingly wary of.</p>
<h2 class="little-h">Men sailing alone</h2>
<p><a href="https://austinkleon.com/2023/09/18/the-inner-state-of-the-average-man/">Austin Kleon quoted James Hollis the other day</a>:</p>
<blockquote>
<p>I have suggested that women look at men this way: if they took away their own network of intimate friends, […] concluded that they were almost wholly alone in the world, and understood that they would be defined only by standards of productivity external to them, they would then know the inner state of the average man. They are horrified at this notion.</p>
</blockquote>
<p>Through this lens, the Golden Globe Race was the <em>ideal man scenario</em>: each competitor was completely alone, in complete control of themselves and their tools, and placed in complete opposition to the vast and unforgiving world around them. They were in a competition where “success” and “failure” were externally defined and objectively measured.</p>
<p>I feel the appeal of all of this <em>in my bones</em>. But, like Austin, I am trying to fight it. I can see the person that this stance towards the world would lead (and, in some ways, has already led) me to become – and I don’t like him! I want to make more of my own meaning, and find – and share! – that meaning in community.</p>
<p>Moitessier, the hero of the story, <em>does</em> end up finding his own meaning: both in the journey (love this) and in being alone (oh no). It’s beautiful, but it’s not who I want to be.</p>
<h2 class="little-h">The old ways are best</h2>
<p>So, toxic/solitary masculinity is the setting for our story. Within it, three protagonists attempt to build and maintain systems in order to achieve their goals. And hey, aren’t we all just out here, attempting to build and maintain systems in order to achieve our goals, in one way or another? Here’s how they fared:</p>
<ul>
<li>The one who relied on schmantzy tech but had no interest-in/discipline-for the fundamentals of sailing began lying about his progress, went mad, and ultimately died (this is React).</li>
<li>The one with a ramshackle, roll-with-the-punches, can-do attitude won the race (this is PHP).</li>
<li>Finally, there was one sailor who pursued simplicity above all else. He stuck to the basics and perfected the fundamentals. He double-checked and triple-reinforced everything before setting off. And then he found a serene monk-like meaning in maintenance and routine. What happened to him? Well, he just kept on sailing, on and on and on (this is me, reciting passages from the <a href="https://alistapart.com/article/dao/">Dao</a>, floating an inch above my office chair, exuding <a href="https://html.energy">HTML Energy</a>).</li>
</ul>
<p>Clearly, there are value systems at play here that I am deeply attracted and attached to. I love seeing my mindful-minimalist guy become the transcendent hero. I love (the idea of) prepared, focused discipline. Less is more! Choose boring technology! Perhaps most of all I love a story that richly illustrates the superiority of my technological sensibilities using historical boats.</p>
<p>But.</p>
<h2 class="little-h">Inbox zero for boats</h2>
<p>Back to me in the kitchen. Here’s the passage I referenced in my quip to Dave, and often reflect on, when I find myself half-assing maintenance of various sorts:</p>
<blockquote>
<p>One time, when I remarked on how fit [Moitessier’s] boat looked, he said, ‘My rule is, a new boat every day’. His years at sea had taught him that if you don’t fix something when you first see it beginning to fail, it is very likely to finish failing just when it is the most dangerous and the hardest to deal with, such as in the midst of a storm.</p>
</blockquote>
<p>I look at my life, and “a new boat every day,” applied broadly, is untenable. There are too many systems; there isn’t enough time to maintain everything to 100% every single day. Some days I look around and all I see are undone tasks; aspirations half-met, things in various states of disrepair. So why don’t I ruthlessly simplify, like Moitessier?</p>
<p>I guess it’s because Moitessier was living a life that had been maximally-scoped-down: it was just him, his boat, and the sailing.</p>
<p>I’ve got, like, more than that going on? And my life is richer for it. My life has other people in it, and I’m doing all sorts of stuff – changing my mind, trying new things, negotiating, compromising – and there’s a variety and <em>opportunity</em> to the resulting, sometimes messy, push-and-pull that I wouldn’t trade for the serenity of a deep-cleaned kitchen every morning.</p>
<p><a href="https://web.archive.org/web/20230901170042/https://www.washingtonpost.com/home/2023/01/26/marie-kondo-kurashi-inner-calm/">Like Marie Kondo herself said</a>, not too long ago:</p>
<blockquote>
<p>My home is messy, but the way I am spending my time is the right way for me at this time at this stage of my life.</p>
</blockquote>
<p>There have been (and still are!) spaces, places, and seasons in my life for reduction; for focus; for discipline. You gotta pick your boats, though. Maybe your inbox is one; maybe your backlog is one; maybe your kitchen is a boat.</p>
<p>But a whole entire life lived so rigidly? Not for me. Too limiting. Gotta find a balance.</p>
View Transitions Break Incremental Renderingtag:ericportis.com,2023-08-22:/posts/2023/view-transitions-break-incremental-rendering/2023-08-22T00:00:00-07:00
<style>
.observablehq svg {
background-color: unset;
}
.observablehq {
margin-top: 2em;
}
</style>
<p>By default, webpages render like this:</p>
<figure>
<img src="/assets/2023-08-22-view-transitions-break-incremental-rendering/fcp.png" />
<figcaption>
<p class="info-line">Image swiped from <a href="https://web.dev/fcp/">Phil Walton’s web.dev article on First Contentful Paint</a></p>
</figcaption>
</figure>
<p>Stuff pops in as it’s loaded, parsed, and styled. This is called <a href="https://en.wikipedia.org/wiki/Incremental_rendering">incremental rendering</a>.</p>
<p>Incremental rendering is cool and good. It is <em>especially</em> cool/good for people on slow connections. They get to see pieces of the page ASAP; incremental rendering shows them <em>something</em> while the page is in flight, instead of nothing.</p>
<figure>
<div id="observablehq-chart-66f94a4d"></div>
<figcaption>
<p class="info-line"><a href="https://observablehq.com/d/d1ae3f2b705db7e3@237">First Contentful Paint and Page Load Time distributions from the June 2023 RUM Archive</a>, on <a href="https://observablehq.com">Observable</a></p>
</figcaption>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css" />
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/d/d1ae3f2b705db7e3@237.js?v=3";
new Runtime().module(define, name => {
if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-66f94a4d"));
});
</script>
</figure>
<p>For the 99th percentile of page loads in a recent batch of <a href="https://rumarchive.com/">RUM Archive</a> data, incremental rendering gave folks <em>something</em> after 10 seconds. Without it, they would have spent 40 seconds looking at nothing.<sup><a href="#footnote-1" id="footnote-mark-1">1</a></sup></p>
<p>While incremental rendering is especially helpful for people in slower contexts, we don’t have to look to the 99th percentile to see tangible benefits. For the median page load, incremental rendering halved the time people waited to see something, cutting it from just over two seconds to just over one.</p>
<p>So that’s incremental rendering. I like it a lot.</p>
<p>Cross-document <a href="https://drafts.csswg.org/css-view-transitions-1/">View Transitions</a> render like this:</p>
<figure>
<video autoplay="" loop="" muted="" src="/assets/2023-08-22-view-transitions-break-incremental-rendering/daverupert-viewtransitions.mp4"></video>
<figcaption>
<p class="info-line">Video swiped from <a href="https://daverupert.com/2023/05/getting-started-view-transitions/">Dave Rupert’s <cite>Getting started with View Transitions on multi-page apps</cite></a></p>
</figcaption>
</figure>
<p>Upon clicking a link, we leave one fully-rendered page, and usher in a new fully-rendered page, in an animated/orchestrated manner.</p>
<p>I ❤️ View Transitions. Being able to:</p>
<ul>
<li>establish object permanence across navigations, and</li>
<li>direct attention with motion in order to highlight important arriving/departing elements</li>
</ul>
<p>…is going to give designers the ability to make websites easier to navigate and understand. We’re going to be able to establish freaking <a href="https://developer.apple.com/tutorials/app-dev-training/creating-a-navigation-hierarchy">spatial hierarchies across pages</a>, on regular websites! Death to jarring, abrupt transitions!</p>
<p><a href="https://adactio.com/journal/19578">Death</a> to <a href="https://www.zachleat.com/web/single-page-applications/">single-page-apps</a>!</p>
<p>And, uh, death to — incremental rendering? (oh no).</p>
<h2 class="little-h">The problem</h2>
<p>Consider a View Transition to a partially-rendered page.</p>
<p>It might look fine, sometimes. For instance, if an <code class="language-plaintext highlighter-rouge"><img src></code> hasn’t loaded, but that <code class="language-plaintext highlighter-rouge"><img></code> element is otherwise all parsed and styled <em>and</em> includes <code class="language-plaintext highlighter-rouge">height</code> and <code class="language-plaintext highlighter-rouge">width</code> attributes, its dimensions will be reserved on the layout. We’ll get a transition to a solid <code class="language-plaintext highlighter-rouge">background-color</code> placeholder or something, which is not the end of the world. A not-loaded-yet font feels similarly not-horrible: we might View Transition in some invisible FOIT text, which, worst-case, triggers a reflow after it loads, jostling surrounding elements some time later. We lose the transition effect, but it’s kinda-sorta falling back to the experience you would have had, without the View Transition.</p>
<p>But. If we initiate a View Transition before things that are producing DOM or layout are loaded and parsed – CSS, HTML, and JS – that could be a <em>disaster</em>. Let’s say a bit of DOM hasn’t been loaded/parsed/styled/rendered yet when a View Transition starts, and then sometime later, when that piece of DOM <em>is</em> ready to render, it ends up having the same <code class="language-plaintext highlighter-rouge">view-transition-name</code> as something on the outgoing page. This means that the author <em>intended</em> for the old element to transition smoothly into the new one. Instead, the old one exits the page, and then the new one pops in, sometime later, not part of the transition process at all.</p>
<p>This is bad. At best it’ll look glitchy. At worst it does the exact <em>opposite</em> of guiding the eye to the most important elements on the page, and establishing object permanence. Instead of showing users that this thing is the same as that thing, we’ve told them, <em>perhaps with extra motion/panache</em>, that even though these the two things might seem the same, they are in fact distinct. It’s like shaking your head “no” while telling someone “yes.” Or perhaps it is more like walking out of the room and then teleporting back into place before you even answer their question. It is disorienting, surprising, and unsettling. It is much worse than having no transition at all.</p>
<p>This is a fundamental problem with View Transitions. And because browsers can and regularly do render partial pages – even on fast machines with fast connections loading fast pages – it’s going to affect <em>everyone</em>.</p>
<h2 class="little-h">How to solve it?</h2>
<h3 class="tiny-h">Paint slower</h3>
<p>The folks prototyping cross-document View Transitions in Chrome are solving this fundamental problem by building and extending features which <em>delay the first paint until the page is ready to transition.</em></p>
<ul>
<li>Already spec’d and implemented: <a href="https://chromestatus.com/feature/5452774595624960"><code class="language-plaintext highlighter-rouge">blocking=render</code> on scripts and stylesheets</a></li>
<li>A proposed extension: <a href="https://github.com/WICG/view-transitions/blob/main/document-render-blocking.md"><code class="language-plaintext highlighter-rouge">blocking=render</code> on <code class="language-plaintext highlighter-rouge"><html></code></a></li>
</ul>
<p>Two important points about these:</p>
<ol>
<li>In order to use View Transitions, you are going to have to use these features (no matter how fast your site is).</li>
<li>You can use these features to disable incremental rendering, even when you’re <em>not</em> using View Transitions.</li>
</ol>
<p>They are not tied to View Transitions because they are also supposed to solve the other (<abbr>IMO</abbr> all bad) use-cases people have for disabling incremental rendering:</p>
<ul>
<li><a href="https://support.google.com/optimize/answer/7100284?hl=en">“I’m doing a client-side A/B test”</a></li>
<li><a href="https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/#synchronous-javascript">“I’m trying to fix a bad CLS score“</a></li>
<li><a href="https://twitter.com/TimVereecke/status/1558426328659001344">“I don’t like it”</a></li>
</ul>
<p>If you’re at the 25th percentile in that chart at the top of the post – experiencing a First Contentful Paint at ~600ms, with a total Page Load Time of ~1100ms – trading an extra half-second of time-spent-staring-at-nothing in exchange for a less <a href="https://daverupert.com/2015/10/on-hurk-jerk/">hurk-jerk-y</a> experience might seem like an improvement.</p>
<p>But if you’re in the 99th percentile, you would never choose to stare at nothing for forty seconds when something — please, anything! — could have appeared after ten.</p>
<p>I worry that giving developers tools to explicitly block render – with or without View Transitions – is going to make experiencing the web on slow connections and cheap devices <em>much</em> worse. Because while the web’s authors generally experience the web at the left side of our chart, and make decisions based on those experiences, significant portions of the web’s users live their lives over on the right.</p>
<h3 class="tiny-h">But not too slowly</h3>
<p>The render-blocking specs have made room for implementation-defined timeouts for render-blocking features (<a href="https://developer.chrome.com/blog/font-display/#block"><em>ala</em> <code class="language-plaintext highlighter-rouge">font-display: block</code></a>), and there is <a href="https://github.com/w3c/csswg-drafts/issues/9155">currently an open discussion on how/whether to bail out of View Transitions when things are taking too long</a>. <em>I think this is vital.</em> We need tuned timeouts that ensure that the long tail of slow devices/connections don’t wait for View Transitions if they would excessively delay first paint.</p>
<p>It’s probably good that this timeout is left to implementers to define but it’s not great that Chrome currently sets it to network timeout which I think is, like, 240 seconds!? I fully expect this all to get better as View Transitions moves towards shipping, though.</p>
<h3 class="tiny-h">Paint just slowly enough?</h3>
<p>The specs also try to give authors tools to tell the browser a bare-minimum amount of <abbr>HTML</abbr>, <abbr>CSS</abbr>, and <abbr>JS</abbr> that’s needed to paint the initial viewport, but that’s <a href="https://csswizardry.com/2022/09/critical-css-not-so-fast/">incredibly hard to do well</a>. I fully expect everybody who wants to use View Transitions – especially toolmakers and template/component authors who don’t know much about the content they’re working with or the context they’re working in — will simply slap <code class="language-plaintext highlighter-rouge">blocking=render</code> onto everything.</p>
<h3 class="tiny-h">Paint… faster?</h3>
<p>I have low expectations, but sincere hope, that we can do better. Maybe instead of significantly delaying the first paint for View Transitions, quick render-blocking timeouts could serve as a stick which, paired with the carrot of View Transitions, might motivate authors to push their pages to paint <em>faster</em>.</p>
<p>Besides quick timeouts, what else could View Transitions and <code class="language-plaintext highlighter-rouge">blocking=render</code> do, here? What other platform-level changes could make faster and more-complete first paints <em>hard to screw up,</em> rather than <em>hard to do at all</em> – <em>especially</em> on slower connections and devices? I don’t know but I want to spend some time thinking about it.</p>
<p>Low expectations. High hopes!</p>
<hr class="footnote-hr" />
<p class="info-line">Thanks to <a href="https://hire.wil.to">Mat Marquis</a>, <a href="https://www.kryogenix.org">Stuart Langridge</a>, and <a href="https://cloudfour.com/is/jason-grigsby/">Jason Grigsby</a> for reviewing an early draft!</p>
<ol class="footnotes fit-to-p-width info-line">
<li id="footnote-1">
<p>Important caveat! For this analysis, I used two metrics: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event">Page Load Time</a> and <a href="https://web.dev/fcp/">First Contentful Paint</a>. (I also assume they are perfectly correlated, but let’s leave that aside; bigger fish to fry). First Contentful Paint is the exact metric we need; Page Load Time isn’t. The proposed features would delay first paint until the document and many scripts and stylesheets have been loaded. Page Load Time, on the other hand, measures how long it took for <em>everything</em> to load, notably including images (which the proposed features would not wait for). So this chart likely overstates the case. I would love to get a more accurate picture of the potential impact of the proposals; alas this is the best I know how to do at the moment.
<a href="#footnote-mark-1" class="footnote-return-link" title="return to text">↩</a></p>
</li>
</ol>
WebDriving Experimental Featurestag:ericportis.com,2019-08-15:/posts/2019/webdriving-experimental-web-platform-features-in-canary/2019-08-15T00:00:00-07:00
<p>Sometimes I need to automate some quick browser tests. I like to use Node, and <a href="https://webdriver.io/docs/setuptypes.html#standalone-mode">standalone webdriver.io</a> to do this.</p>
<p>Sometimes, the stuff I’m interested in testing is new and experimental. So, I want to get WebDriver to drive:</p>
<ol>
<li>Canary</li>
<li>With the Experimental Web Platform Features flag enabled.</li>
</ol>
<p>But! Before we tackle that, let’s level-set.</p>
<h2 class="little-h">WebDriving plain old Chrome</h2>
<p>To test in regular ol’ Chrome, I need <a href="https://chromedriver.chromium.org">ChromeDriver</a> installed and running. Because I do as much as possible through <a href="https://brew.sh">Homebrew</a>, I installed ChromeDriver via:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ brew cask install chromedriver
</code></pre></div></div>
<p>Then…</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ chromedriver
</code></pre></div></div>
<p>…tada – that’s ChromeDriver up and running.</p>
<p>Next, within my project directory, I:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ npm -i --save-dev webdriver
</code></pre></div></div>
<p>With those two pieces – ChromeDriver and WebDriver.io – in place, I can run a script like this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>const { remote } = require( 'webdriverio' );
( async () => {
const browser = await remote( {
logLevel: 'error',
path: '/',
capabilities: {
browserName: 'chrome'
},
port: 9515
} );
// do stuff with the browser
} );
</code></pre></div></div>
<p>And a little Chrome window pops up and my script is controlling and reading information from it programmatically and it’s great.</p>
<h2 class="little-h">Canary</h2>
<p>So, how do I get that little Chrome window to be a <em>Canary</em> window?</p>
<p>First things first, we need a new ChromeDriver. The stock version will only work with the stable version of Chrome.</p>
<p>Getting ChromeDriver Canary isn’t terribly easy, but it is <a href="https://chromedriver.chromium.org/chromedriver-canary">well-documented</a>. TL;DR you have to jump through a hoop or two to hunt for the very latest ChromeDriver build from within in a big hairy directory containing many thousands of Chromium snapshots, download it, and run it. (It might go without saying but: quit regular ChromeDriver before you do this).</p>
<p>Given the script above, ChromeDriver Canary (and the script) will fail, because ChromeDriver Canary will still try to start up regular-old stable Chrome. Why? I don’t know, the layers of who’s driving what using what configuration settings here (between WebDriver.io, ChromeDriver, and actual Chrome) confuse me. But I did eventually figure out how to get ChromeDriver Canary to, well, drive Canary.</p>
<p>One of the <code class="language-plaintext highlighter-rouge">capabilities</code> that you can set within WebDriver’s <code class="language-plaintext highlighter-rouge">remote</code> instantiation is, apparently, <code class="language-plaintext highlighter-rouge">'goog:chromeOptions'</code>. With this, you can set a <a href="https://chromedriver.chromium.org/capabilities#TOC-chromeOptions-object">bunch of options</a>, that are passed to ChromeDriver. And one of those options is <code class="language-plaintext highlighter-rouge">binary</code>, which you can use to point to a particular Chrome application binary. Like Canary!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>const browser = await remote( {
logLevel: 'error',
path: '/',
capabilities: {
browserName: 'chrome',
'goog:chromeOptions': {
binary: '/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary'
}
},
port: 9515
} );
</code></pre></div></div>
<p>Now, our script will successfully get ChromeDriver Canary to start Canary up, and run tests in it. Step one complete!</p>
<h2 class="little-h">Experimental Web Platform Features</h2>
<p>There’s another <code class="language-plaintext highlighter-rouge">goog:chromeOptions</code> called <code class="language-plaintext highlighter-rouge">args</code>. Using this, you can tell ChromeDriver to pass <a href="https://peter.sh/experiments/chromium-command-line-switches/">command line switches</a> to the Chrome binary, when it’s starting it up. Turns out, one of those switches is <code class="language-plaintext highlighter-rouge">--enable-experimental-web-platform-features</code>, which does just what it says. So! With this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>const browser = await remote( {
logLevel: 'error',
path: '/',
capabilities: {
browserName: 'chrome',
'goog:chromeOptions': {
args: [ 'enable-experimental-web-platform-features' ],
binary: '/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary'
}
},
port: 9515
} );
</code></pre></div></div>
<p>We get a programmatically-controlled Canary window, with the Experimental Web Platform Features flag enabled. Yay!</p>
Responsive Images on the Apple Watchtag:ericportis.com,2018-11-20:/posts/2018/respimg-apple-watch/2018-11-20T00:00:00-08:00
<p><a href="https://www.macrumors.com/how-to/browse-the-internet-watchos-5/">There’s a browser on the Apple Watch now</a>. Apple has some experience shepherding a new class of radically smaller viewports into common use on the web; iPhone WebKit <a href="https://css-tricks.com/snippets/html/responsive-meta-tag/">brought us</a> <code><meta name="viewport" content="width=device-width"></code>; 🍎Watch WebKit <a href="https://erikrunyon.com/2018/06/designing-web-content-for-watchos/">hath</a> <a href="https://developer.apple.com/videos/play/wwdc2018/239/">wrought</a> <code><meta name="disabled-adaptations" content="watch"></code>.</p>
<p>2018’s <code><meta></code>-magic serves the same purpose as 2007’s. Unless you send Apple a specific signal that you’ve considered one-inch-wide screens, they’re going to assume that you haven’t, pretend to be a bigger, more-common viewport, and zoom out.</p>
<p>I was curious about the implementation details, and their implications for responsive images, so I set up <a href="https://codepen.io/eeeps/pen/zaKVow">a test</a>. Recently, I finally convinced someone running WatchOS 5 (my boss, hi Colin) to run said test, and the results are sort of interesting.</p>
<p>I was hoping that <em>without</em> the new <code>meta</code> incantation, Apple Watches would report an accurate DPR, for responsive images’ sake. I was hoping the they’d report DPRs like this:</p>
<table>
<thead>
<tr>
<th class="small-caps">Model</th>
<th class="small-caps">Actual pixel width</th>
<th class="small-caps">Viewport width</th>
<th class="small-caps">DPR</th>
</tr>
</thead>
<tbody>
<tr>
<td>Series 3, 38mm</td>
<td>272 pixels</td>
<td>320 <code>px</code></td>
<td>0.85</td>
</tr>
<tr>
<td>Series 3, 42mm</td>
<td>312 pixels</td>
<td>320 <code>px</code></td>
<td>0.975</td>
</tr>
<tr>
<td>Series 4, 40mm</td>
<td>324 pixels</td>
<td>320 <code>px</code></td>
<td>1.0125</td>
</tr>
<tr>
<td>Series 4, 44mm</td>
<td>368 pixels</td>
<td>320 <code>px</code></td>
<td>1.15</td>
</tr>
</tbody>
</table>
<p>They don’t. Here’s what they actually do:</p>
<table>
<thead>
<tr>
<th class="small-caps">Model</th>
<th class="small-caps">Actual pixel width</th>
<th class="small-caps">Viewport width</th>
<th class="small-caps">DPR</th>
</tr>
</thead>
<tbody>
<tr>
<td>Series 3, 38mm</td>
<td>272 pixels</td>
<td>320 <code>px</code></td>
<td>2</td>
</tr>
<tr>
<td>Series 3, 42mm</td>
<td>312 pixels</td>
<td>320 <code>px</code></td>
<td>2</td>
</tr>
<tr>
<td>Series 4, 40mm</td>
<td>324 pixels</td>
<td>320 <code>px</code></td>
<td>2</td>
</tr>
<tr>
<td>Series 4, 44mm</td>
<td>368 pixels</td>
<td>320 <code>px</code></td>
<td>2</td>
</tr>
</tbody>
</table>
<p>Every watch emulates a 320 <code>px</code> @ 2x = 640-actual-pixel-wide viewport – accurate physical pixel counts be damned! – and shrinks things to fit.</p>
<p>What's the practical implication for responsive images? Take this <code><img></code>:</p>
<pre><code class="language-html"><img srcset="tiny.jpg 320w,
small.jpg 640w,
medium.jpg 960w,
large.jpg 1280w"
sizes="100vw" />
</code></pre>
<p>By <em>default</em>, Apple Watches are going to pick <code>small.jpg</code>, even though they’ll only ever need <code>tiny.jpg</code>’s resolution. Wasted bytes!</p>
<p>Unless, that is, you say the magic words in your <code><head></code>:</p>
<pre><code class="language-html"><meta name="disabled-adaptations" content="watch">
</code></pre>
<p>With that, the watches do this:</p>
<table>
<thead>
<tr>
<th class="small-caps">Model</th>
<th class="small-caps">Actual pixel width</th>
<th class="small-caps">Viewport width</th>
<th class="small-caps">DPR</th>
</tr>
</thead>
<tbody>
<tr>
<td>Series 3, 38mm</td>
<td>272 pixels</td>
<td>136 <code>px</code></td>
<td>2</td>
</tr>
<tr>
<td>Series 3, 42mm</td>
<td>312 pixels</td>
<td>156 <code>px</code></td>
<td>2</td>
</tr>
<tr>
<td>Series 4, 40mm</td>
<td>324 pixels</td>
<td>162 <code>px</code></td>
<td>2</td>
</tr>
<tr>
<td>Series 4, 44mm</td>
<td>368 pixels</td>
<td>184 <code>px</code></td>
<td>2</td>
</tr>
</tbody>
</table>
<p>Which’ll make responsive image selection more efficient, <em>and also</em> force you to make sure that your layout holds up on a 136-<code>px</code>-wide viewport.</p>
<h2 class="little-h">Art direction</h2>
<p>I'll hazard a guess that most responsive layouts would <em>not</em> fare well at 136-<code>px</code>. You know what else probably doesn’t withstand such shrinkage? Image content! At tiny physical sizes, many subjects are going to be so small that they’re not really legible:</p>
<p><img src="https://eric-cloudinary-res.cloudinary.com/image/upload/v1542740089/apple-watch/whos-that.svg" alt="An image of Tim Cook on an Apple Watch, but he's too small to see, really. An arrow points and asks, “who’s that?”" /></p>
<p>So, when designing for tiny screens, consider <a href="https://cloudfour.com/thinks/responsive-images-101-part-6-picture-element/">art directing</a>.</p>
<p><img src="https://eric-cloudinary-res.cloudinary.com/image/upload/v1542740092/apple-watch/its-tim.svg" alt="The same watch as before, but the image of Tim has “zoomed in” to his face. The arrow text now reads, “it’s Tim!”" /></p>
<p>…<a href="https://codepen.io/eeeps/pen/gKwpZB">like this</a>. And note! That you can <a href="https://cloudinary.com/blog/smart_automatic_image_cropping_maybe_you_can_always_get_what_you_want">automate</a> the process of identifying and zooming in on subjects, with tools like Cloudinary.</p>
<h2 class="little-h">Takeaways</h2>
<p>I don’t think (?) Apple Watch WebKit’s usage numbers are more than a rounding error at the moment, but if pushing the limits of responsive design is the kind of thing that gets you out of bed in the morning, the Apple Watch gives you a concrete reason to do so. To wit:</p>
<ul>
<li>test your layouts down to 136-<code>px</code> wide</li>
<li>include <code>300w</code>-ish resources in your full-width <code><img></code>’s <code>srcset</code>s</li>
<li>art direct to keep image subjects legible</li>
<li>say the magic <code><meta></code> words</li>
</ul>
<p>⌚️🕸🤘</p>
Seven Lakestag:ericportis.com,2018-09-30:/posts/2018/seven-lakes/2018-09-30T00:00:00-07:00
<div class="group two wide">
<img id='DSC5679'
src='/assets/2018-09-30-seven-lakes/DSC5679/quarter.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5679/quarter.jpg 713w, /assets/2018-09-30-seven-lakes/DSC5679.jpg 2853w, /assets/2018-09-30-seven-lakes/DSC5679/half.jpg 1427w, /assets/2018-09-30-seven-lakes/DSC5679/8th.jpg 357w, /assets/2018-09-30-seven-lakes/DSC5679/16th.jpg 178w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
<img id='DSC5686-Pano'
src='/assets/2018-09-30-seven-lakes/DSC5686-Pano/half.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5686-Pano/half.jpg 998w, /assets/2018-09-30-seven-lakes/DSC5686-Pano.jpg 1995w, /assets/2018-09-30-seven-lakes/DSC5686-Pano/quarter.jpg 499w, /assets/2018-09-30-seven-lakes/DSC5686-Pano/8th.jpg 249w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
</div>
<img id='DSC5675-Edit'
src='/assets/2018-09-30-seven-lakes/DSC5675-Edit/quarter.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5675-Edit/quarter.jpg 1007w, /assets/2018-09-30-seven-lakes/DSC5675-Edit.jpg 4028w, /assets/2018-09-30-seven-lakes/DSC5675-Edit/half.jpg 2014w, /assets/2018-09-30-seven-lakes/DSC5675-Edit/8th.jpg 504w, /assets/2018-09-30-seven-lakes/DSC5675-Edit/16th.jpg 252w'
class="wide" data-scroll-target alt />
<div class="group two wide">
<img id='DSC5725'
src='/assets/2018-09-30-seven-lakes/DSC5725/quarter.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5725/quarter.jpg 768w, /assets/2018-09-30-seven-lakes/DSC5725.jpg 3072w, /assets/2018-09-30-seven-lakes/DSC5725/half.jpg 1536w, /assets/2018-09-30-seven-lakes/DSC5725/8th.jpg 384w, /assets/2018-09-30-seven-lakes/DSC5725/16th.jpg 192w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
<img id='DSC5723'
src='/assets/2018-09-30-seven-lakes/DSC5723/quarter.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5723/quarter.jpg 768w, /assets/2018-09-30-seven-lakes/DSC5723.jpg 3072w, /assets/2018-09-30-seven-lakes/DSC5723/half.jpg 1536w, /assets/2018-09-30-seven-lakes/DSC5723/8th.jpg 384w, /assets/2018-09-30-seven-lakes/DSC5723/16th.jpg 192w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
</div>
<img id='DSC5850'
src='/assets/2018-09-30-seven-lakes/DSC5850/quarter.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5850/quarter.jpg 768w, /assets/2018-09-30-seven-lakes/DSC5850.jpg 3072w, /assets/2018-09-30-seven-lakes/DSC5850/half.jpg 1536w, /assets/2018-09-30-seven-lakes/DSC5850/8th.jpg 384w, /assets/2018-09-30-seven-lakes/DSC5850/16th.jpg 192w'
class="wide" data-scroll-target alt />
<div class="group two wide">
<img id='DSC5753'
src='/assets/2018-09-30-seven-lakes/DSC5753/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5753/8th.jpg 384w, /assets/2018-09-30-seven-lakes/DSC5753.jpg 3072w, /assets/2018-09-30-seven-lakes/DSC5753/half.jpg 1536w, /assets/2018-09-30-seven-lakes/DSC5753/quarter.jpg 768w, /assets/2018-09-30-seven-lakes/DSC5753/16th.jpg 192w, /assets/2018-09-30-seven-lakes/DSC5753/32nd.jpg 96w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
<img id='DSC5733'
src='/assets/2018-09-30-seven-lakes/DSC5733/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5733/8th.jpg 384w, /assets/2018-09-30-seven-lakes/DSC5733.jpg 3072w, /assets/2018-09-30-seven-lakes/DSC5733/half.jpg 1536w, /assets/2018-09-30-seven-lakes/DSC5733/quarter.jpg 768w, /assets/2018-09-30-seven-lakes/DSC5733/16th.jpg 192w, /assets/2018-09-30-seven-lakes/DSC5733/32nd.jpg 96w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
</div>
<img id='DSC5749-Pano'
src='/assets/2018-09-30-seven-lakes/DSC5749-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5749-Pano/8th.jpg 819w, /assets/2018-09-30-seven-lakes/DSC5749-Pano.jpg 6551w, /assets/2018-09-30-seven-lakes/DSC5749-Pano/half.jpg 3276w, /assets/2018-09-30-seven-lakes/DSC5749-Pano/quarter.jpg 1638w, /assets/2018-09-30-seven-lakes/DSC5749-Pano/16th.jpg 409w, /assets/2018-09-30-seven-lakes/DSC5749-Pano/32nd.jpg 205w'
class="wide" data-scroll-target alt />
<img id='DSC5824-Edit'
src='/assets/2018-09-30-seven-lakes/DSC5824-Edit/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5824-Edit/8th.jpg 542w, /assets/2018-09-30-seven-lakes/DSC5824-Edit.jpg 4339w, /assets/2018-09-30-seven-lakes/DSC5824-Edit/half.jpg 2170w, /assets/2018-09-30-seven-lakes/DSC5824-Edit/quarter.jpg 1085w, /assets/2018-09-30-seven-lakes/DSC5824-Edit/16th.jpg 271w, /assets/2018-09-30-seven-lakes/DSC5824-Edit/32nd.jpg 136w'
class="wide" data-scroll-target alt />
<img id='DSC5837'
src='/assets/2018-09-30-seven-lakes/DSC5837/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5837/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC5837.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC5837/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC5837/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC5837/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC5837/32nd.jpg 144w'
class="wide" data-scroll-target alt />
<img id='DSC5859-Pano'
src='/assets/2018-09-30-seven-lakes/DSC5859-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5859-Pano/8th.jpg 671w, /assets/2018-09-30-seven-lakes/DSC5859-Pano.jpg 5366w, /assets/2018-09-30-seven-lakes/DSC5859-Pano/half.jpg 2683w, /assets/2018-09-30-seven-lakes/DSC5859-Pano/quarter.jpg 1342w, /assets/2018-09-30-seven-lakes/DSC5859-Pano/16th.jpg 335w, /assets/2018-09-30-seven-lakes/DSC5859-Pano/32nd.jpg 168w'
class="wide" data-scroll-target alt />
<img id='DSC5930'
src='/assets/2018-09-30-seven-lakes/DSC5930/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5930/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC5930.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC5930/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC5930/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC5930/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC5930/32nd.jpg 144w'
class="wide" data-scroll-target alt />
<img id='DSC5918-Edit'
src='/assets/2018-09-30-seven-lakes/DSC5918-Edit/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5918-Edit/8th.jpg 550w, /assets/2018-09-30-seven-lakes/DSC5918-Edit.jpg 4402w, /assets/2018-09-30-seven-lakes/DSC5918-Edit/half.jpg 2201w, /assets/2018-09-30-seven-lakes/DSC5918-Edit/quarter.jpg 1101w, /assets/2018-09-30-seven-lakes/DSC5918-Edit/16th.jpg 275w, /assets/2018-09-30-seven-lakes/DSC5918-Edit/32nd.jpg 138w'
class="wide" data-scroll-target alt />
<div class="group two wide">
<img id='DSC5835'
src='/assets/2018-09-30-seven-lakes/DSC5835/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5835/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC5835.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC5835/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC5835/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC5835/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC5835/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
<img id='DSC5931'
src='/assets/2018-09-30-seven-lakes/DSC5931/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5931/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC5931.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC5931/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC5931/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC5931/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC5931/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt />
</div>
<img id='DSC5978-Edit'
src='/assets/2018-09-30-seven-lakes/DSC5978-Edit/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5978-Edit/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC5978-Edit.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC5978-Edit/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC5978-Edit/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC5978-Edit/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC5978-Edit/32nd.jpg 144w'
class="wide" data-scroll-target alt />
<img id='DSC5996'
src='/assets/2018-09-30-seven-lakes/DSC5996/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC5996/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC5996.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC5996/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC5996/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC5996/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC5996/32nd.jpg 144w'
class="wide" data-scroll-target alt />
<img id='DSC6018-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6018-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6018-Pano/8th.jpg 1048w, /assets/2018-09-30-seven-lakes/DSC6018-Pano.jpg 8380w, /assets/2018-09-30-seven-lakes/DSC6018-Pano/half.jpg 4190w, /assets/2018-09-30-seven-lakes/DSC6018-Pano/quarter.jpg 2095w, /assets/2018-09-30-seven-lakes/DSC6018-Pano/16th.jpg 524w, /assets/2018-09-30-seven-lakes/DSC6018-Pano/32nd.jpg 262w, /assets/2018-09-30-seven-lakes/DSC6018-Pano/64th.jpg 131w'
class="wide" data-scroll-target alt />
<img id='DSC6111-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6111-Pano/16th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6111-Pano/16th.jpg 891w, /assets/2018-09-30-seven-lakes/DSC6111-Pano.jpg 14255w, /assets/2018-09-30-seven-lakes/DSC6111-Pano/half.jpg 7128w, /assets/2018-09-30-seven-lakes/DSC6111-Pano/quarter.jpg 3564w, /assets/2018-09-30-seven-lakes/DSC6111-Pano/8th.jpg 1782w, /assets/2018-09-30-seven-lakes/DSC6111-Pano/32nd.jpg 445w, /assets/2018-09-30-seven-lakes/DSC6111-Pano/64th.jpg 223w'
class="wide" data-scroll-target alt />
<img id='DSC6115'
src='/assets/2018-09-30-seven-lakes/DSC6115/quarter.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6115/quarter.jpg 665w, /assets/2018-09-30-seven-lakes/DSC6115.jpg 2659w, /assets/2018-09-30-seven-lakes/DSC6115/half.jpg 1330w, /assets/2018-09-30-seven-lakes/DSC6115/8th.jpg 332w, /assets/2018-09-30-seven-lakes/DSC6115/16th.jpg 166w'
sizes='66vw'
class="wide" data-scroll-target alt />
<img id='DSC6153-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6153-Pano/16th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6153-Pano/16th.jpg 942w, /assets/2018-09-30-seven-lakes/DSC6153-Pano.jpg 15070w, /assets/2018-09-30-seven-lakes/DSC6153-Pano/half.jpg 7535w, /assets/2018-09-30-seven-lakes/DSC6153-Pano/quarter.jpg 3768w, /assets/2018-09-30-seven-lakes/DSC6153-Pano/8th.jpg 1884w, /assets/2018-09-30-seven-lakes/DSC6153-Pano/32nd.jpg 471w, /assets/2018-09-30-seven-lakes/DSC6153-Pano/64th.jpg 235w'
class="wide" data-scroll-target alt />
<img id='DSC6164-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6164-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6164-Pano/8th.jpg 725w, /assets/2018-09-30-seven-lakes/DSC6164-Pano.jpg 5800w, /assets/2018-09-30-seven-lakes/DSC6164-Pano/half.jpg 2900w, /assets/2018-09-30-seven-lakes/DSC6164-Pano/quarter.jpg 1450w, /assets/2018-09-30-seven-lakes/DSC6164-Pano/16th.jpg 363w, /assets/2018-09-30-seven-lakes/DSC6164-Pano/32nd.jpg 181w'
class="wide" data-scroll-target alt />
<img id='DSC6181-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6181-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6181-Pano/8th.jpg 972w, /assets/2018-09-30-seven-lakes/DSC6181-Pano.jpg 7773w, /assets/2018-09-30-seven-lakes/DSC6181-Pano/half.jpg 3887w, /assets/2018-09-30-seven-lakes/DSC6181-Pano/quarter.jpg 1943w, /assets/2018-09-30-seven-lakes/DSC6181-Pano/16th.jpg 486w, /assets/2018-09-30-seven-lakes/DSC6181-Pano/32nd.jpg 243w'
class="wide" data-scroll-target alt />
<img id='DSC6202-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6202-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6202-Pano/8th.jpg 898w, /assets/2018-09-30-seven-lakes/DSC6202-Pano.jpg 7180w, /assets/2018-09-30-seven-lakes/DSC6202-Pano/half.jpg 3590w, /assets/2018-09-30-seven-lakes/DSC6202-Pano/quarter.jpg 1795w, /assets/2018-09-30-seven-lakes/DSC6202-Pano/16th.jpg 449w, /assets/2018-09-30-seven-lakes/DSC6202-Pano/32nd.jpg 224w'
class="wide" data-scroll-target alt />
<img id='DSC6200-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6200-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6200-Pano/8th.jpg 555w, /assets/2018-09-30-seven-lakes/DSC6200-Pano.jpg 4440w, /assets/2018-09-30-seven-lakes/DSC6200-Pano/half.jpg 2220w, /assets/2018-09-30-seven-lakes/DSC6200-Pano/quarter.jpg 1110w, /assets/2018-09-30-seven-lakes/DSC6200-Pano/16th.jpg 278w, /assets/2018-09-30-seven-lakes/DSC6200-Pano/32nd.jpg 139w'
sizes='75vw'
class="wide" data-scroll-target alt />
<img id='DSC6214-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6214-Pano/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6214-Pano/8th.jpg 907w, /assets/2018-09-30-seven-lakes/DSC6214-Pano.jpg 7252w, /assets/2018-09-30-seven-lakes/DSC6214-Pano/half.jpg 3626w, /assets/2018-09-30-seven-lakes/DSC6214-Pano/quarter.jpg 1813w, /assets/2018-09-30-seven-lakes/DSC6214-Pano/16th.jpg 453w, /assets/2018-09-30-seven-lakes/DSC6214-Pano/32nd.jpg 227w'
class="wide" data-scroll-target alt />
<img id='DSC6225-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6225-Pano/16th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6225-Pano/16th.jpg 589w, /assets/2018-09-30-seven-lakes/DSC6225-Pano.jpg 9430w, /assets/2018-09-30-seven-lakes/DSC6225-Pano/half.jpg 4715w, /assets/2018-09-30-seven-lakes/DSC6225-Pano/quarter.jpg 2358w, /assets/2018-09-30-seven-lakes/DSC6225-Pano/8th.jpg 1179w, /assets/2018-09-30-seven-lakes/DSC6225-Pano/32nd.jpg 295w, /assets/2018-09-30-seven-lakes/DSC6225-Pano/64th.jpg 147w'
class="wide" data-scroll-target alt />
<img id='DSC6094-Pano'
src='/assets/2018-09-30-seven-lakes/DSC6094-Pano/16th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6094-Pano/16th.jpg 752w, /assets/2018-09-30-seven-lakes/DSC6094-Pano.jpg 12034w, /assets/2018-09-30-seven-lakes/DSC6094-Pano/half.jpg 6017w, /assets/2018-09-30-seven-lakes/DSC6094-Pano/quarter.jpg 3009w, /assets/2018-09-30-seven-lakes/DSC6094-Pano/8th.jpg 1504w, /assets/2018-09-30-seven-lakes/DSC6094-Pano/32nd.jpg 376w, /assets/2018-09-30-seven-lakes/DSC6094-Pano/64th.jpg 188w'
class="wide" data-scroll-target alt />
<img id='DSC6227-Edit'
src='/assets/2018-09-30-seven-lakes/DSC6227-Edit/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6227-Edit/8th.jpg 576w, /assets/2018-09-30-seven-lakes/DSC6227-Edit.jpg 4608w, /assets/2018-09-30-seven-lakes/DSC6227-Edit/half.jpg 2304w, /assets/2018-09-30-seven-lakes/DSC6227-Edit/quarter.jpg 1152w, /assets/2018-09-30-seven-lakes/DSC6227-Edit/16th.jpg 288w, /assets/2018-09-30-seven-lakes/DSC6227-Edit/32nd.jpg 144w'
class="wide" data-scroll-target alt />
<img id='DSC6239'
src='/assets/2018-09-30-seven-lakes/DSC6239/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6239/8th.jpg 541w, /assets/2018-09-30-seven-lakes/DSC6239.jpg 4327w, /assets/2018-09-30-seven-lakes/DSC6239/half.jpg 2164w, /assets/2018-09-30-seven-lakes/DSC6239/quarter.jpg 1082w, /assets/2018-09-30-seven-lakes/DSC6239/16th.jpg 270w, /assets/2018-09-30-seven-lakes/DSC6239/32nd.jpg 135w'
class="wide" data-scroll-target alt />
<img id='DSC6258-Pano-Edit'
src='/assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/8th.jpg'
srcset='/assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/8th.jpg 530w, /assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit.jpg 4242w, /assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/half.jpg 2121w, /assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/quarter.jpg 1061w, /assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/16th.jpg 265w, /assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/32nd.jpg 133w, /assets/2018-09-30-seven-lakes/DSC6258-Pano-Edit/64th.jpg 66w'
sizes='50vw'
class="wide" data-scroll-target alt />
En Zed: Silver Ferntag:ericportis.com,2017-01-22:/posts/2017/en-zed-silver-fern/2017-01-22T00:00:00-08:00
<img id='DSC_0087'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0087/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0087/8th.jpg 576w, /assets/2017-01-22-en-zed-silver-fern/DSC_0087.jpg 4608w, /assets/2017-01-22-en-zed-silver-fern/DSC_0087/half.jpg 2304w, /assets/2017-01-22-en-zed-silver-fern/DSC_0087/quarter.jpg 1152w, /assets/2017-01-22-en-zed-silver-fern/DSC_0087/16th.jpg 288w, /assets/2017-01-22-en-zed-silver-fern/DSC_0087/32nd.jpg 144w'
class="wide" data-scroll-target alt="Britt laughing; some grass." />
<img id='DSC_9847-Pano'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/16th.jpg 897w, /assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano.jpg 14350w, /assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/half.jpg 7175w, /assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/quarter.jpg 3588w, /assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/8th.jpg 1794w, /assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/32nd.jpg 448w, /assets/2017-01-22-en-zed-silver-fern/DSC_9847-Pano/64th.jpg 224w'
class="wide" data-scroll-target alt="A tiny figure, a barren beach, mountains in the background." />
<div class="group wide">
<div style="flex-basis: 50vw">
<a data-supergif href="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/quarter.gif">
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/full.mp4"
data-width="2976" data-height="1976" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/half.mp4"
data-width="1488" data-height="984" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/quarter.mp4"
data-width="744" data-height="488" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/8th.mp4"
data-width="368" data-height="240" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/16th.mp4"
data-width="184" data-height="120" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/full.ogv"
data-width="2976" data-height="1976" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/half.ogv"
data-width="1488" data-height="984" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/quarter.ogv"
data-width="744" data-height="488" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/8th.ogv"
data-width="368" data-height="240" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_5864-Animated/16th.ogv"
data-width="184" data-height="120" data-type="video/ogg"></span>
Wiggly foliage
</a>
</div>
<div style="flex-basis: 50vw">
<a data-supergif href="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/8th.gif">
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/full.mp4"
data-width="3456" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/half.mp4"
data-width="1728" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/quarter.mp4"
data-width="864" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/8th.mp4"
data-width="432" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/16th.mp4"
data-width="216" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/full.ogv"
data-width="3456" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/half.ogv"
data-width="1728" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/quarter.ogv"
data-width="864" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/8th.ogv"
data-width="432" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0109-Animated/16th.ogv"
data-width="216" data-height="144" data-type="video/ogg"></span>
A wiggly landscape
</a>
</div>
</div>
<img id='DSC_9979-Pano'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/16th.jpg 954w, /assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano.jpg 15267w, /assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/half.jpg 7634w, /assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/quarter.jpg 3817w, /assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/8th.jpg 1908w, /assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/32nd.jpg 477w, /assets/2017-01-22-en-zed-silver-fern/DSC_9979-Pano/64th.jpg 239w'
class="wide" data-scroll-target alt="A panorama of some rows of grapes and a winding dirt road." />
<img id='DSC_0116'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0116/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0116/8th.jpg 569w, /assets/2017-01-22-en-zed-silver-fern/DSC_0116.jpg 4554w, /assets/2017-01-22-en-zed-silver-fern/DSC_0116/half.jpg 2277w, /assets/2017-01-22-en-zed-silver-fern/DSC_0116/quarter.jpg 1139w, /assets/2017-01-22-en-zed-silver-fern/DSC_0116/16th.jpg 285w, /assets/2017-01-22-en-zed-silver-fern/DSC_0116/32nd.jpg 142w'
class="wide" data-scroll-target alt="The side of a hill; a few small people visible in the lower left if you pay attention and look real close." />
<div class="group wide">
<img id='DSC_6087'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6087/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6087/quarter.jpg 752w, /assets/2017-01-22-en-zed-silver-fern/DSC_6087.jpg 3008w, /assets/2017-01-22-en-zed-silver-fern/DSC_6087/half.jpg 1504w, /assets/2017-01-22-en-zed-silver-fern/DSC_6087/8th.jpg 376w, /assets/2017-01-22-en-zed-silver-fern/DSC_6087/16th.jpg 188w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Piles of stacked rocks, Britt walking briskly." />
<img id='DSC_0225'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0225/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0225/8th.jpg 560w, /assets/2017-01-22-en-zed-silver-fern/DSC_0225.jpg 4481w, /assets/2017-01-22-en-zed-silver-fern/DSC_0225/half.jpg 2241w, /assets/2017-01-22-en-zed-silver-fern/DSC_0225/quarter.jpg 1120w, /assets/2017-01-22-en-zed-silver-fern/DSC_0225/16th.jpg 280w, /assets/2017-01-22-en-zed-silver-fern/DSC_0225/32nd.jpg 140w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Towering bright white clouds on a black sky, lakes and a mountain." />
</div>
<div class="group wide">
<img id='DSC_6057'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6057/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6057/quarter.jpg 500w, /assets/2017-01-22-en-zed-silver-fern/DSC_6057.jpg 2000w, /assets/2017-01-22-en-zed-silver-fern/DSC_6057/half.jpg 1000w, /assets/2017-01-22-en-zed-silver-fern/DSC_6057/8th.jpg 250w, /assets/2017-01-22-en-zed-silver-fern/DSC_6057/16th.jpg 125w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Smithers the dog looks to the right and pants." />
<img id='DSC_6059'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6059/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6059/quarter.jpg 457w, /assets/2017-01-22-en-zed-silver-fern/DSC_6059.jpg 1829w, /assets/2017-01-22-en-zed-silver-fern/DSC_6059/half.jpg 915w, /assets/2017-01-22-en-zed-silver-fern/DSC_6059/8th.jpg 229w, /assets/2017-01-22-en-zed-silver-fern/DSC_6059/16th.jpg 114w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Smithers the dog looks back at the photographer over his left shoulder." />
</div>
<img id='DSC_0253'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0253/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0253/quarter.jpg 925w, /assets/2017-01-22-en-zed-silver-fern/DSC_0253.jpg 3701w, /assets/2017-01-22-en-zed-silver-fern/DSC_0253/half.jpg 1851w, /assets/2017-01-22-en-zed-silver-fern/DSC_0253/8th.jpg 463w, /assets/2017-01-22-en-zed-silver-fern/DSC_0253/16th.jpg 231w'
class="wide" data-scroll-target alt="Blowing low clouds, mountains." />
<div class="group wide">
<img id='DSC_0290-Pano'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano/8th.jpg 568w, /assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano.jpg 4544w, /assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano/half.jpg 2272w, /assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano/quarter.jpg 1136w, /assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano/16th.jpg 284w, /assets/2017-01-22-en-zed-silver-fern/DSC_0290-Pano/32nd.jpg 142w'
sizes="(min-width: 36em) 48.20197306vw, 100vw" data-scroll-target alt="A pointy little mountain above Lake Wakatipu." />
<img id='DSC_0301'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0301/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0301/quarter.jpg 752w, /assets/2017-01-22-en-zed-silver-fern/DSC_0301.jpg 3006w, /assets/2017-01-22-en-zed-silver-fern/DSC_0301/half.jpg 1503w, /assets/2017-01-22-en-zed-silver-fern/DSC_0301/8th.jpg 376w, /assets/2017-01-22-en-zed-silver-fern/DSC_0301/16th.jpg 188w'
sizes="(min-width: 36em) 51.79802694vw, 100vw" data-scroll-target alt="The high-contrast waves of Lake Wakatipu." />
</div>
<div class="group wide">
<img id='DSC_0308'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0308/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0308/8th.jpg 576w, /assets/2017-01-22-en-zed-silver-fern/DSC_0308.jpg 4608w, /assets/2017-01-22-en-zed-silver-fern/DSC_0308/half.jpg 2304w, /assets/2017-01-22-en-zed-silver-fern/DSC_0308/quarter.jpg 1152w, /assets/2017-01-22-en-zed-silver-fern/DSC_0308/16th.jpg 288w, /assets/2017-01-22-en-zed-silver-fern/DSC_0308/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Wispy ridged clouds that look a little like a fern." />
<img id='DSC_0166'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0166/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0166/8th.jpg 552w, /assets/2017-01-22-en-zed-silver-fern/DSC_0166.jpg 4417w, /assets/2017-01-22-en-zed-silver-fern/DSC_0166/half.jpg 2209w, /assets/2017-01-22-en-zed-silver-fern/DSC_0166/quarter.jpg 1104w, /assets/2017-01-22-en-zed-silver-fern/DSC_0166/16th.jpg 276w, /assets/2017-01-22-en-zed-silver-fern/DSC_0166/32nd.jpg 138w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A bright white fern on a black background." />
</div>
<img id='DSC_0484'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0484/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0484/quarter.jpg 1045w, /assets/2017-01-22-en-zed-silver-fern/DSC_0484.jpg 4179w, /assets/2017-01-22-en-zed-silver-fern/DSC_0484/half.jpg 2090w, /assets/2017-01-22-en-zed-silver-fern/DSC_0484/8th.jpg 522w, /assets/2017-01-22-en-zed-silver-fern/DSC_0484/16th.jpg 261w, /assets/2017-01-22-en-zed-silver-fern/DSC_0484/32nd.jpg 131w'
class="wide" data-scroll-target alt="A solitary little tree on top of a hill infront of a lake." />
<img id='DSC_0515-Pano'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/16th.jpg 549w, /assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano.jpg 8783w, /assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/half.jpg 4392w, /assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/quarter.jpg 2196w, /assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/8th.jpg 1098w, /assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/32nd.jpg 274w, /assets/2017-01-22-en-zed-silver-fern/DSC_0515-Pano/64th.jpg 137w'
class="wide" data-scroll-target alt="The tree in the previous photo is now in the hazy background – a new solitary tree stands in the foreground, on a new hill." />
<div class="group wide">
<div style="flex-basis: 33.333vw">
<img id='DSC_0491'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0491/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0491/quarter.jpg 685w, /assets/2017-01-22-en-zed-silver-fern/DSC_0491.jpg 2739w, /assets/2017-01-22-en-zed-silver-fern/DSC_0491/half.jpg 1370w, /assets/2017-01-22-en-zed-silver-fern/DSC_0491/8th.jpg 342w, /assets/2017-01-22-en-zed-silver-fern/DSC_0491/16th.jpg 171w'
sizes="(min-width: 36em) 33.333vw, 100vw" data-scroll-target alt="Hazy mountains in the back, clear mountains and a lake in the front." />
</div>
<div style="flex-basis: 33.333vw">
<a data-supergif href="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/quarter.gif">
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/full.mp4"
data-width="2304" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/half.mp4"
data-width="1152" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/quarter.mp4"
data-width="576" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/8th.mp4"
data-width="288" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/16th.mp4"
data-width="144" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/full.ogv"
data-width="2304" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/half.ogv"
data-width="1152" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/quarter.ogv"
data-width="576" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/8th.ogv"
data-width="288" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-silver-fern/DSC_0349-Animated/16th.ogv"
data-width="144" data-height="144" data-type="video/ogg"></span>
Shimmering waves, a mountain and a ray of light.
</a>
</div>
<div style="flex-basis: 33.333vw;">
<img id='DSC_6317'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6317/half.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6317/half.jpg 987w, /assets/2017-01-22-en-zed-silver-fern/DSC_6317.jpg 1974w, /assets/2017-01-22-en-zed-silver-fern/DSC_6317/quarter.jpg 494w, /assets/2017-01-22-en-zed-silver-fern/DSC_6317/8th.jpg 247w'
sizes="(min-width: 36em) 33.333vw, 100vw" data-scroll-target alt="A huge vista with some huge mountains in the background." />
</div>
</div>
<div class="group wide">
<img id='DSC_6294'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6294/half.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6294/half.jpg 932w, /assets/2017-01-22-en-zed-silver-fern/DSC_6294.jpg 1864w, /assets/2017-01-22-en-zed-silver-fern/DSC_6294/quarter.jpg 466w, /assets/2017-01-22-en-zed-silver-fern/DSC_6294/8th.jpg 233w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Some partly-cloudy, brightly-lit clumps of grass infront of a lake; a little island." />
<img id='DSC_6295'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6295/half.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6295/half.jpg 1000w, /assets/2017-01-22-en-zed-silver-fern/DSC_6295.jpg 2000w, /assets/2017-01-22-en-zed-silver-fern/DSC_6295/quarter.jpg 500w, /assets/2017-01-22-en-zed-silver-fern/DSC_6295/8th.jpg 250w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Patchy light on the side of Roy’s Peak." />
</div>
<img id='DSC_0648'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0648/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0648/8th.jpg 552w, /assets/2017-01-22-en-zed-silver-fern/DSC_0648.jpg 4414w, /assets/2017-01-22-en-zed-silver-fern/DSC_0648/half.jpg 2207w, /assets/2017-01-22-en-zed-silver-fern/DSC_0648/quarter.jpg 1104w, /assets/2017-01-22-en-zed-silver-fern/DSC_0648/16th.jpg 276w, /assets/2017-01-22-en-zed-silver-fern/DSC_0648/32nd.jpg 138w'
class="wide" data-scroll-target alt="The ridgeline trail leading up to Roy’s peak, Lake Wanaka behind." />
<img id='DSC_0585-Pano'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/16th.jpg 592w, /assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano.jpg 9469w, /assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/half.jpg 4735w, /assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/quarter.jpg 2367w, /assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/8th.jpg 1184w, /assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/32nd.jpg 296w, /assets/2017-01-22-en-zed-silver-fern/DSC_0585-Pano/64th.jpg 148w'
class="wide" data-scroll-target alt="A wider panorama of the Roy’s peak ridgeline / Lake Wanaka." />
<img id='DSC_6473'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_6473/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_6473/quarter.jpg 489w, /assets/2017-01-22-en-zed-silver-fern/DSC_6473.jpg 1955w, /assets/2017-01-22-en-zed-silver-fern/DSC_6473/half.jpg 978w, /assets/2017-01-22-en-zed-silver-fern/DSC_6473/8th.jpg 244w, /assets/2017-01-22-en-zed-silver-fern/DSC_6473/16th.jpg 122w'
sizes='66vw'
class="wide" data-scroll-target alt="Layers of foliage." />
<img id='DSC_0783'
src='/assets/2017-01-22-en-zed-silver-fern/DSC_0783/8th.jpg'
srcset='/assets/2017-01-22-en-zed-silver-fern/DSC_0783/8th.jpg 358w, /assets/2017-01-22-en-zed-silver-fern/DSC_0783.jpg 2862w, /assets/2017-01-22-en-zed-silver-fern/DSC_0783/half.jpg 1431w, /assets/2017-01-22-en-zed-silver-fern/DSC_0783/quarter.jpg 716w, /assets/2017-01-22-en-zed-silver-fern/DSC_0783/16th.jpg 179w, /assets/2017-01-22-en-zed-silver-fern/DSC_0783/32nd.jpg 89w'
sizes='66vw'
class="wide" data-scroll-target alt="High contrast glassy seas." />
<p>More photos from <i>Aotearoa</i>:</p>
<ul>
<li><a href="/posts/2017/en-zed-blue-ensign">En Zed: Blue Ensign</a> (full color)</li>
<li><a href="/posts/2017/en-zed-red-peak">En Zed: Red Peak</a> (infrared)</li>
</ul>
<script src="/js/supergifs.js"></script>
En Zed: Red Peaktag:ericportis.com,2017-01-22:/posts/2017/en-zed-red-peak/2017-01-22T00:00:00-08:00
<img id='DSC_5664'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5664/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5664/quarter.jpg 752w, /assets/2017-01-22-en-zed-red-peak/DSC_5664.jpg 3008w, /assets/2017-01-22-en-zed-red-peak/DSC_5664/half.jpg 1504w, /assets/2017-01-22-en-zed-red-peak/DSC_5664/8th.jpg 376w, /assets/2017-01-22-en-zed-red-peak/DSC_5664/16th.jpg 188w'
class="wide" data-scroll-target alt="Sam sipping, looking cool. The colors look weird, because I took this photo, and every photo in this post, with an infrared camera." />
<img id='DSC_5669'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5669/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5669/quarter.jpg 728w, /assets/2017-01-22-en-zed-red-peak/DSC_5669.jpg 2911w, /assets/2017-01-22-en-zed-red-peak/DSC_5669/half.jpg 1456w, /assets/2017-01-22-en-zed-red-peak/DSC_5669/8th.jpg 364w, /assets/2017-01-22-en-zed-red-peak/DSC_5669/16th.jpg 182w'
class="wide" data-scroll-target alt="Sam and Britt, smiling at a table." />
<img id='DSC_5687-Edit'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5687-Edit/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5687-Edit/quarter.jpg 458w, /assets/2017-01-22-en-zed-red-peak/DSC_5687-Edit.jpg 1830w, /assets/2017-01-22-en-zed-red-peak/DSC_5687-Edit/half.jpg 915w, /assets/2017-01-22-en-zed-red-peak/DSC_5687-Edit/8th.jpg 229w, /assets/2017-01-22-en-zed-red-peak/DSC_5687-Edit/16th.jpg 114w'
sizes='67vw'
class="wide" data-scroll-target alt="Sam and Britt waving from the base of a very tall case of stairs, leading up to a lighthouse." />
<img id='DSC_5715-Pano-Edit'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/16th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/16th.jpg 765w, /assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit.jpg 12240w, /assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/half.jpg 6120w, /assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/quarter.jpg 3060w, /assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/8th.jpg 1530w, /assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/32nd.jpg 383w, /assets/2017-01-22-en-zed-red-peak/DSC_5715-Pano-Edit/64th.jpg 191w'
class="wide" data-scroll-target alt="A wide panorama of the view from the top of the lighthouse; Sam is taking a photo of Britt infront of it." />
<img id='DSC_5747'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5747/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5747/quarter.jpg 658w, /assets/2017-01-22-en-zed-red-peak/DSC_5747.jpg 2633w, /assets/2017-01-22-en-zed-red-peak/DSC_5747/half.jpg 1317w, /assets/2017-01-22-en-zed-red-peak/DSC_5747/8th.jpg 329w, /assets/2017-01-22-en-zed-red-peak/DSC_5747/16th.jpg 165w'
class="wide" data-scroll-target alt="Britt descending the case of stairs." />
<img id='DSC_5662'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5662/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5662/quarter.jpg 752w, /assets/2017-01-22-en-zed-red-peak/DSC_5662.jpg 3008w, /assets/2017-01-22-en-zed-red-peak/DSC_5662/half.jpg 1504w, /assets/2017-01-22-en-zed-red-peak/DSC_5662/8th.jpg 376w, /assets/2017-01-22-en-zed-red-peak/DSC_5662/16th.jpg 188w'
class="wide" data-scroll-target alt="Britt looking out over a dense, red forest." />
<img id='DSC_5779'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5779/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5779/quarter.jpg 752w, /assets/2017-01-22-en-zed-red-peak/DSC_5779.jpg 3008w, /assets/2017-01-22-en-zed-red-peak/DSC_5779/half.jpg 1504w, /assets/2017-01-22-en-zed-red-peak/DSC_5779/8th.jpg 376w, /assets/2017-01-22-en-zed-red-peak/DSC_5779/16th.jpg 188w'
class="wide" data-scroll-target alt="Cars packed on a ferry." />
<img id='DSC_5851'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5851/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5851/quarter.jpg 636w, /assets/2017-01-22-en-zed-red-peak/DSC_5851.jpg 2544w, /assets/2017-01-22-en-zed-red-peak/DSC_5851/half.jpg 1272w, /assets/2017-01-22-en-zed-red-peak/DSC_5851/8th.jpg 318w, /assets/2017-01-22-en-zed-red-peak/DSC_5851/16th.jpg 159w'
class="wide" data-scroll-target alt="A windy road snaking through rolling vineyards. Again, everything is red!" />
<img id='DSC_5908-Pano'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano/8th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano/8th.jpg 654w, /assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano.jpg 5234w, /assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano/half.jpg 2617w, /assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano/quarter.jpg 1309w, /assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano/16th.jpg 327w, /assets/2017-01-22-en-zed-red-peak/DSC_5908-Pano/32nd.jpg 164w'
class="wide" data-scroll-target alt="A pastoral landscape (red). Hills, pasture, brush, the sea." />
<div class="group wide">
<div style="flex-basis: 50.8719486vw">
<img id='DSC_5945'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5945/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5945/quarter.jpg 403w, /assets/2017-01-22-en-zed-red-peak/DSC_5945.jpg 1612w, /assets/2017-01-22-en-zed-red-peak/DSC_5945/half.jpg 806w, /assets/2017-01-22-en-zed-red-peak/DSC_5945/8th.jpg 202w, /assets/2017-01-22-en-zed-red-peak/DSC_5945/16th.jpg 101w'
sizes="(min-width:36em) 50.8719486vw, 100vw" data-scroll-target alt="Britt sticking her hand out while walking to feel the foliage while hiking on the side of a steep hill, the sea in the background." />
</div>
<div style="flex-basis: 49.1280514vw">
<a data-supergif href="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/quarter.gif" class="wide">
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/full.mp4"
data-width="1480" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/half.mp4"
data-width="736" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/quarter.mp4"
data-width="368" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/8th.mp4"
data-width="184" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/16th.mp4"
data-width="88" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/full.ogv"
data-width="1480" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/half.ogv"
data-width="736" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/quarter.ogv"
data-width="368" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/8th.ogv"
data-width="184" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-red-peak/DSC_5949-Animated/16th.ogv"
data-width="88" data-height="144" data-type="video/ogg"></span>
A tall prehistoric-looking fern, waving in the breeze.
</a>
</div>
</div>
<img id='DSC_6210'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6210/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6210/quarter.jpg 500w, /assets/2017-01-22-en-zed-red-peak/DSC_6210.jpg 2000w, /assets/2017-01-22-en-zed-red-peak/DSC_6210/half.jpg 1000w, /assets/2017-01-22-en-zed-red-peak/DSC_6210/8th.jpg 250w, /assets/2017-01-22-en-zed-red-peak/DSC_6210/16th.jpg 125w'
sizes='66vw'
class="wide" data-scroll-target alt="Britt looks out at a lake while Amy forges ahead down the trail." />
<img id='DSC_6077'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6077/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6077/quarter.jpg 752w, /assets/2017-01-22-en-zed-red-peak/DSC_6077.jpg 3008w, /assets/2017-01-22-en-zed-red-peak/DSC_6077/half.jpg 1504w, /assets/2017-01-22-en-zed-red-peak/DSC_6077/8th.jpg 376w, /assets/2017-01-22-en-zed-red-peak/DSC_6077/16th.jpg 188w'
class="wide" data-scroll-target alt="Britt looks back while hiking, beaming." />
<div class="group wide">
<img id='DSC_6268'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6268/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6268/quarter.jpg 733w, /assets/2017-01-22-en-zed-red-peak/DSC_6268.jpg 2933w, /assets/2017-01-22-en-zed-red-peak/DSC_6268/half.jpg 1467w, /assets/2017-01-22-en-zed-red-peak/DSC_6268/8th.jpg 367w, /assets/2017-01-22-en-zed-red-peak/DSC_6268/16th.jpg 183w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A watchful sheep (!), lakes and mountains behind." />
<img id='DSC_5863'
src='/assets/2017-01-22-en-zed-red-peak/DSC_5863/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_5863/quarter.jpg 727w, /assets/2017-01-22-en-zed-red-peak/DSC_5863.jpg 2909w, /assets/2017-01-22-en-zed-red-peak/DSC_5863/half.jpg 1455w, /assets/2017-01-22-en-zed-red-peak/DSC_5863/8th.jpg 364w, /assets/2017-01-22-en-zed-red-peak/DSC_5863/16th.jpg 182w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Britt on a beach, NEW ZEALAND spelled out in rocks in front of her." />
</div>
<img id='DSC_6032-Pano-Edit'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit/8th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit/8th.jpg 976w, /assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit.jpg 7805w, /assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit/half.jpg 3903w, /assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit/quarter.jpg 1951w, /assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit/16th.jpg 488w, /assets/2017-01-22-en-zed-red-peak/DSC_6032-Pano-Edit/32nd.jpg 244w'
class="wide" data-scroll-target alt="Britt atop a blustery hill, mountains and Lake Wakatipu behind." />
<div class="group wide">
<img id='DSC_6055'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6055/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6055/quarter.jpg 734w, /assets/2017-01-22-en-zed-red-peak/DSC_6055.jpg 2936w, /assets/2017-01-22-en-zed-red-peak/DSC_6055/half.jpg 1468w, /assets/2017-01-22-en-zed-red-peak/DSC_6055/8th.jpg 367w, /assets/2017-01-22-en-zed-red-peak/DSC_6055/16th.jpg 184w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Rolling red hills, partly cloudy, a winding dirt road." />
<img id='DSC_6314'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6314/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6314/quarter.jpg 752w, /assets/2017-01-22-en-zed-red-peak/DSC_6314.jpg 3008w, /assets/2017-01-22-en-zed-red-peak/DSC_6314/half.jpg 1504w, /assets/2017-01-22-en-zed-red-peak/DSC_6314/8th.jpg 376w, /assets/2017-01-22-en-zed-red-peak/DSC_6314/16th.jpg 188w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Switch-backs down the side of a mountain; a weird hovering little cloud." />
</div>
<img id='DSC_6317'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6317/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6317/quarter.jpg 641w, /assets/2017-01-22-en-zed-red-peak/DSC_6317.jpg 2564w, /assets/2017-01-22-en-zed-red-peak/DSC_6317/half.jpg 1282w, /assets/2017-01-22-en-zed-red-peak/DSC_6317/8th.jpg 321w, /assets/2017-01-22-en-zed-red-peak/DSC_6317/16th.jpg 160w'
class="wide" data-scroll-target alt="A huge red vista, mountains, lakes, clouds, a valley." />
<div class="group wide">
<img id='DSC_6329-Pano'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano/8th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano/8th.jpg 562w, /assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano.jpg 4494w, /assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano/half.jpg 2247w, /assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano/quarter.jpg 1124w, /assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano/16th.jpg 281w, /assets/2017-01-22-en-zed-red-peak/DSC_6329-Pano/32nd.jpg 140w'
sizes="(min-width: 36em) 51.73751924vw, 100vw" data-scroll-target alt="Turquoise clear water, red foliage on rocks." />
<img id='DSC_6344'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6344/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6344/quarter.jpg 752w, /assets/2017-01-22-en-zed-red-peak/DSC_6344.jpg 3008w, /assets/2017-01-22-en-zed-red-peak/DSC_6344/half.jpg 1504w, /assets/2017-01-22-en-zed-red-peak/DSC_6344/8th.jpg 376w, /assets/2017-01-22-en-zed-red-peak/DSC_6344/16th.jpg 188w'
sizes="(min-width: 36em) 48.26248076vw, 100vw" data-scroll-target alt=" Yellow fog and red jungle." />
</div>
<img id='DSC_6346-Pano'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano/8th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano/8th.jpg 829w, /assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano.jpg 6628w, /assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano/half.jpg 3314w, /assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano/quarter.jpg 1657w, /assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano/16th.jpg 414w, /assets/2017-01-22-en-zed-red-peak/DSC_6346-Pano/32nd.jpg 207w'
class="wide" data-scroll-target alt="Britt hiking next to some cascading falls, rocks, red foliage." />
<div class="group wide">
<img id='DSC_6403'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6403/half.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6403/half.jpg 829w, /assets/2017-01-22-en-zed-red-peak/DSC_6403.jpg 1658w, /assets/2017-01-22-en-zed-red-peak/DSC_6403/quarter.jpg 415w, /assets/2017-01-22-en-zed-red-peak/DSC_6403/8th.jpg 207w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A line of people hiking through a glacial valley. This one looks especially other-worldly." />
<img id='DSC_6458'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6458/half.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6458/half.jpg 1000w, /assets/2017-01-22-en-zed-red-peak/DSC_6458.jpg 2000w, /assets/2017-01-22-en-zed-red-peak/DSC_6458/quarter.jpg 500w, /assets/2017-01-22-en-zed-red-peak/DSC_6458/8th.jpg 250w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A small falls in a huge rocky, foggy, landscape." />
</div>
<img id='DSC_6398-Pano'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano/8th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano/8th.jpg 648w, /assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano.jpg 5185w, /assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano/half.jpg 2593w, /assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano/quarter.jpg 1296w, /assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano/16th.jpg 324w, /assets/2017-01-22-en-zed-red-peak/DSC_6398-Pano/32nd.jpg 162w'
class="wide" data-scroll-target alt="A huge, sheer rock wall sprouting foliage, some tiny people in the bottom left corner." />
<img id='DSC_6469-Pano'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6469-Pano/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6469-Pano/quarter.jpg 732w, /assets/2017-01-22-en-zed-red-peak/DSC_6469-Pano.jpg 2926w, /assets/2017-01-22-en-zed-red-peak/DSC_6469-Pano/half.jpg 1463w, /assets/2017-01-22-en-zed-red-peak/DSC_6469-Pano/8th.jpg 366w, /assets/2017-01-22-en-zed-red-peak/DSC_6469-Pano/16th.jpg 183w'
class="wide" data-scroll-target alt="Pancake rocks. Red." />
<img id='DSC_6480-Pano-Edit'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit/8th.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit/8th.jpg 874w, /assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit.jpg 6988w, /assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit/half.jpg 3494w, /assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit/quarter.jpg 1747w, /assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit/16th.jpg 437w, /assets/2017-01-22-en-zed-red-peak/DSC_6480-Pano-Edit/32nd.jpg 218w'
class="wide" data-scroll-target alt="Dramatic rocks (the pancake rocks) infront of the sea. Red ferns." />
<img id='DSC_6472'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6472/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6472/quarter.jpg 701w, /assets/2017-01-22-en-zed-red-peak/DSC_6472.jpg 2802w, /assets/2017-01-22-en-zed-red-peak/DSC_6472/half.jpg 1401w, /assets/2017-01-22-en-zed-red-peak/DSC_6472/8th.jpg 350w, /assets/2017-01-22-en-zed-red-peak/DSC_6472/16th.jpg 175w'
class="wide" data-scroll-target alt="Britt looking out over a bunch of red foliage." />
<img id='DSC_6493'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6493/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6493/quarter.jpg 433w, /assets/2017-01-22-en-zed-red-peak/DSC_6493.jpg 1731w, /assets/2017-01-22-en-zed-red-peak/DSC_6493/half.jpg 866w, /assets/2017-01-22-en-zed-red-peak/DSC_6493/8th.jpg 216w, /assets/2017-01-22-en-zed-red-peak/DSC_6493/16th.jpg 108w'
sizes='61vw'
class="wide" data-scroll-target alt="Red foliage, fog, rocks cutting indeterminate forms." />
<img id='DSC_6490'
src='/assets/2017-01-22-en-zed-red-peak/DSC_6490/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-red-peak/DSC_6490/quarter.jpg 746w, /assets/2017-01-22-en-zed-red-peak/DSC_6490.jpg 2982w, /assets/2017-01-22-en-zed-red-peak/DSC_6490/half.jpg 1491w, /assets/2017-01-22-en-zed-red-peak/DSC_6490/8th.jpg 373w, /assets/2017-01-22-en-zed-red-peak/DSC_6490/16th.jpg 186w'
class="wide" data-scroll-target alt="A small figure crosses a rope bridge across a crevice." />
<p>More photos from <i>Aotearoa</i>:</p>
<ul>
<li><a href="/posts/2017/en-zed-blue-ensign">En Zed: Blue Ensign</a> (full color)</li>
<li><a href="/posts/2017/en-zed-silver-fern">En Zed: Silver Fern</a> (black and white)</li>
</ul>
<script src="/js/supergifs.js"></script>
En Zed: Blue Ensigntag:ericportis.com,2017-01-22:/posts/2017/en-zed-blue-ensign/2017-01-22T00:00:00-08:00
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/8th.gif" class="wide">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/full.mp4"
data-width="3808" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/half.mp4"
data-width="1904" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/quarter.mp4"
data-width="952" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/8th.mp4"
data-width="472" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/16th.mp4"
data-width="232" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/full.ogv"
data-width="3808" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/half.ogv"
data-width="1904" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/quarter.ogv"
data-width="952" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/8th.ogv"
data-width="472" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9671-Animated/16th.ogv"
data-width="232" data-height="144" data-type="video/ogg"></span>
🙆♂️
</a>
<img id='DSC_9688'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9688/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9688/quarter.jpg 975w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9688.jpg 3898w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9688/half.jpg 1949w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9688/8th.jpg 487w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9688/16th.jpg 244w'
class="wide" data-scroll-target alt="Britt smiling on the beach." />
<img id='DSC_9761'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9761/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9761/quarter.jpg 914w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9761.jpg 3655w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9761/half.jpg 1828w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9761/8th.jpg 457w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9761/16th.jpg 228w'
class="wide" data-scroll-target alt="Sam peeping/waving from behind a rock." />
<img id='DSC_9725-Edit'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9725-Edit/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9725-Edit/quarter.jpg 738w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9725-Edit.jpg 2950w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9725-Edit/half.jpg 1475w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9725-Edit/8th.jpg 369w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9725-Edit/16th.jpg 184w'
sizes='78vw'
class="wide" data-scroll-target alt="A very tall staircase leads to a lighthouse." />
<img id='DSC_9744-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/16th.jpg 978w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano.jpg 15648w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/half.jpg 7824w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/quarter.jpg 3912w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/8th.jpg 1956w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/32nd.jpg 489w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9744-Pano/64th.jpg 245w'
class="wide" data-scroll-target alt="Panoramic image of a dusty road winding across a coastline." />
<img id='DSC_9749'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9749/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9749/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9749.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9749/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9749/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9749/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9749/32nd.jpg 144w'
class="wide" data-scroll-target alt="Close-up of Britt, smiling from ear to ear and clutching the brim of her hat." />
<img id='DSC_9794'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9794/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9794/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9794.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9794/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9794/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9794/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9794/32nd.jpg 144w'
class="wide" data-scroll-target alt="Sam and Britt take selfies with a sleepy seal." />
<img id='DSC_9802'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9802/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9802/quarter.jpg 901w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9802.jpg 3603w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9802/half.jpg 1802w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9802/8th.jpg 450w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9802/16th.jpg 225w'
class="wide" data-scroll-target alt="A tiny boat in a turquoise blue sea. Hazy blue mountains behind." />
<div class="group wide">
<img id='DSC_9861'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9861/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9861/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9861.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9861/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9861/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9861/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9861/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Sam and Britt turning back and smiling on a dusty road at sunset. Some neat trees behind." />
<img id='DSC_9865'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9865/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9865/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9865.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9865/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9865/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9865/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9865/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Sam photographs the neat trees at sunset." />
</div>
<img id='DSC_9879-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano/8th.jpg 971w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano.jpg 7769w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano/half.jpg 3885w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano/quarter.jpg 1942w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano/16th.jpg 486w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9879-Pano/32nd.jpg 243w'
class="wide" data-scroll-target alt="I photograph the neat trees at sunset." />
<div class="group wide">
<div style="flex-basis: 48.89135255vw;">
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/quarter.gif">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/full.mp4"
data-width="3304" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/half.mp4"
data-width="1648" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/quarter.mp4"
data-width="824" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/8th.mp4"
data-width="408" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/16th.mp4"
data-width="200" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/full.ogv"
data-width="3304" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/half.ogv"
data-width="1648" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/quarter.ogv"
data-width="824" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/8th.ogv"
data-width="408" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_9928-Animated/16th.ogv"
data-width="200" data-height="144" data-type="video/ogg"></span>
Sam wiggles his arms around, dancing like a disco octopus, smiling.
</a>
</div>
<div style="flex-basis: 51.10864745vw;">
<img id='DSC_9944'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9944/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9944/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9944.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9944/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9944/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9944/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9944/32nd.jpg 144w'
sizes="(min-width: 36em) 57.14285714vw, 100vw" data-scroll-target alt="Britt makes a pouty face." />
</div>
</div>
<img id='DSC_9999'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_9999/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_9999/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9999.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9999/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9999/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9999/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_9999/32nd.jpg 144w'
class="wide" data-scroll-target alt="Everything is bright again! Britt walking away infront of rows of grapes." />
<img id='DSC_0006'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0006/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0006/quarter.jpg 486w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0006.jpg 1942w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0006/half.jpg 971w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0006/8th.jpg 243w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0006/16th.jpg 121w'
sizes='80vw'
class="wide" data-scroll-target alt="Britt walking towards the camera over a ridge." />
<img id='DSC_0065'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0065/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0065/quarter.jpg 921w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0065.jpg 3682w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0065/half.jpg 1841w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0065/8th.jpg 460w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0065/16th.jpg 230w'
class="wide" data-scroll-target alt="A few tiny figures exploring the end of a cliff over an endless sea." />
<img id='DSC_0099'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0099/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0099/quarter.jpg 768w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0099.jpg 3072w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0099/half.jpg 1536w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0099/8th.jpg 384w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0099/16th.jpg 192w'
class="wide" data-scroll-target alt="A sheep!" />
<img id='DSC_0154'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0154/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0154/quarter.jpg 1017w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0154.jpg 4068w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0154/half.jpg 2034w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0154/8th.jpg 509w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0154/16th.jpg 254w'
class="wide" data-scroll-target alt="The moon at night, some trees silhouetted." />
<div class="group wide">
<img id='DSC_0158'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0158/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0158/quarter.jpg 630w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0158.jpg 2521w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0158/half.jpg 1261w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0158/8th.jpg 315w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0158/16th.jpg 158w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="An oversized-pidgeon-looking bird perches above in a dense forest." />
<img id='DSC_0159'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0159/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0159/quarter.jpg 768w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0159.jpg 3072w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0159/half.jpg 1536w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0159/8th.jpg 384w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0159/16th.jpg 192w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="The bird in flight just after it buzzed me, wings outstretched." />
</div>
<img id='DSC_0173'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0173/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0173/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0173.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0173/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0173/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0173/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0173/32nd.jpg 144w'
class="wide" data-scroll-target alt="A dense bunch of greenery; lots of leaves." />
<img id='DSC_0210-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/32nd.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/32nd.jpg 623w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano.jpg 19926w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/half.jpg 9963w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/quarter.jpg 4982w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/8th.jpg 2491w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/16th.jpg 1245w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/64th.jpg 311w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0210-Pano/128th.jpg 156w'
class="wide" data-scroll-target alt="A veeeery wide panorama of the Otago peninsula, with interlocking farm, forest, and sea." />
<div class="wide group">
<img id='DSC_0325'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0325/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0325/quarter.jpg 768w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0325.jpg 3072w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0325/half.jpg 1536w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0325/8th.jpg 384w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0325/16th.jpg 192w'
data-scroll-target sizes="50vw" alt="Britt and Amy walk and talk down the trail." />
<img id='DSC_0328'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0328/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0328/quarter.jpg 746w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0328.jpg 2984w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0328/half.jpg 1492w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0328/8th.jpg 373w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0328/16th.jpg 187w'
data-scroll-target sizes="50vw" alt="Nic and Smithers the dog walking in a field." />
</div>
<img id='DSC_0314'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0314/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0314/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0314.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0314/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0314/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0314/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0314/32nd.jpg 144w'
class="wide" data-scroll-target alt="Britt, Amy, and Nic by a creek." />
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/8th.gif" class="wide">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/full.mp4"
data-width="3472" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/half.mp4"
data-width="1736" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/quarter.mp4"
data-width="864" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/8th.mp4"
data-width="432" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/16th.mp4"
data-width="216" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/full.ogv"
data-width="3472" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/half.ogv"
data-width="1736" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/quarter.ogv"
data-width="864" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/8th.ogv"
data-width="432" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0213-Animated/16th.ogv"
data-width="216" data-height="144" data-type="video/ogg"></span>
Tall grass quivering in a breeze.
</a>
<div class="group wide">
<div style="flex-basis: 52.28243501vw">
<img id='DSC_0305'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0305/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0305/quarter.jpg 768w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0305.jpg 3072w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0305/half.jpg 1536w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0305/8th.jpg 384w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0305/16th.jpg 192w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0305/32nd.jpg 96w'
sizes="(min-width: 36em) 56.90326042vw, 100vw" data-scroll-target alt="A portrait of Walter Peak towering over Lake Wakatipu." />
</div>
<div style="flex-basis: 47.71756499vw;">
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/quarter.gif">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/full.mp4"
data-width="1528" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/half.mp4"
data-width="760" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/quarter.mp4"
data-width="376" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/8th.mp4"
data-width="184" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/16th.mp4"
data-width="88" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/full.ogv"
data-width="1528" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/half.ogv"
data-width="760" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/quarter.ogv"
data-width="376" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/8th.ogv"
data-width="184" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0277-Animated/16th.ogv"
data-width="88" data-height="144" data-type="video/ogg"></span>
Little lake waves waving in Lake Wakatipu.
</a>
</div>
</div>
<img id='DSC_0299-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/16th.jpg 936w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano.jpg 14981w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/half.jpg 7491w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/quarter.jpg 3745w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/8th.jpg 1873w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/32nd.jpg 468w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0299-Pano/64th.jpg 234w'
class="wide" data-scroll-target alt="A wide panorama of Walter Peak towering over Lake Wakatipu." />
<img id='DSC_0345-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/16th.jpg 782w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano.jpg 12507w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/half.jpg 6254w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/quarter.jpg 3127w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/8th.jpg 1563w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/32nd.jpg 391w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0345-Pano/64th.jpg 195w'
class="wide" data-scroll-target alt="A bright blue Lake Wakatipu on the road of Glenorchy." />
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/quarter.gif" class="wide">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/full.mp4"
data-width="2304" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/half.mp4"
data-width="1152" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/quarter.mp4"
data-width="576" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/8th.mp4"
data-width="288" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/16th.mp4"
data-width="144" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/full.ogv"
data-width="2304" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/half.ogv"
data-width="1152" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/quarter.ogv"
data-width="576" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/8th.ogv"
data-width="288" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0366-Animated/16th.ogv"
data-width="144" data-height="144" data-type="video/ogg"></span>
The moon rises at sunset over a mountain ridge.
</a>
<img id='DSC_0416-Edit'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/16th.jpg 276w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit.jpg 4410w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/half.jpg 2205w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/quarter.jpg 1103w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/8th.jpg 551w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/32nd.jpg 138w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0416-Edit/64th.jpg 69w'
sizes='48vw'
class="wide" data-scroll-target alt="A very tall panorama of the moon over Lake Wanaka." />
<img id='DSC_0433-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/16th.jpg 705w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano.jpg 11276w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/half.jpg 5638w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/quarter.jpg 2819w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/8th.jpg 1410w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/32nd.jpg 352w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0433-Pano/64th.jpg 176w'
class="wide" data-scroll-target alt="A wide panorama of the moon over a mountain ridge, and Lake Wanaka." />
<img id='DSC_0522'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0522/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0522/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0522.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0522/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0522/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0522/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0522/32nd.jpg 144w'
class="wide" data-scroll-target alt="Another sheep!" />
<img id='DSC_0528'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0528/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0528/quarter.jpg 709w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0528.jpg 2837w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0528/half.jpg 1419w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0528/8th.jpg 355w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0528/16th.jpg 177w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0528/32nd.jpg 89w'
sizes='66vw'
class="wide" data-scroll-target alt="A cypress tree, green and white." />
<div class="group wide">
<img id='DSC_0501'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0501/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0501/quarter.jpg 768w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0501.jpg 3072w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0501/half.jpg 1536w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0501/8th.jpg 384w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0501/16th.jpg 192w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A lone tree infront of a distant lake." />
<img id='DSC_0546'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0546/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0546/quarter.jpg 718w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0546.jpg 2873w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0546/half.jpg 1437w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0546/8th.jpg 359w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0546/16th.jpg 180w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Yet another sheep!" />
</div>
<div class="group wide">
<img id='DSC_0573'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0573/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0573/quarter.jpg 1048w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0573.jpg 4191w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0573/half.jpg 2096w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0573/8th.jpg 524w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0573/16th.jpg 262w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0573/32nd.jpg 131w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A hiking path leading around a mountain." />
<img id='DSC_0597'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0597/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0597/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0597.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0597/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0597/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0597/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0597/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A hiking path on a narrow ridgeline leading, seemingly, to the sky." />
</div>
<img id='DSC_0629-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/16th.jpg 599w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano.jpg 9590w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/half.jpg 4795w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/quarter.jpg 2398w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/8th.jpg 1199w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/32nd.jpg 300w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0629-Pano/64th.jpg 150w'
class="wide" data-scroll-target alt="Looking back from near the top of Roys Peak." />
<img id='DSC_0672'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0672/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0672/quarter.jpg 1067w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0672.jpg 4266w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0672/half.jpg 2133w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0672/8th.jpg 533w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0672/16th.jpg 267w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0672/32nd.jpg 133w'
class="wide" data-scroll-target alt="A few hikers on a small ridgeline, a huge valley and mountains behind." />
<img id='DSC_6218-Pano'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/16th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/16th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano.jpg 9214w, /assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/half.jpg 4607w, /assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/quarter.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/8th.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/32nd.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_6218-Pano/64th.jpg 144w'
class="wide" data-scroll-target alt="Panorama of Lake Wanaka, with a tiny island inside." />
<div class="group wide">
<img id='DSC_0703'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0703/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0703/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0703.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0703/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0703/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0703/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0703/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="A man taking a cell phone picture of a glacier, from a rainforest." />
<img id='DSC_0738'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0738/quarter.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0738/quarter.jpg 817w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0738.jpg 3267w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0738/half.jpg 1634w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0738/8th.jpg 408w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0738/16th.jpg 204w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Workers in a mini-backhoe doing a tiny amount of earth moving in the middle of a vast glacial valley." />
</div>
<img id='DSC_0710'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0710/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0710/8th.jpg 358w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0710.jpg 2865w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0710/half.jpg 1433w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0710/quarter.jpg 716w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0710/16th.jpg 179w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0710/32nd.jpg 90w'
sizes='66vw'
class="wide" data-scroll-target alt="Sign up near the top of the glacier. No dogs and no drones." />
<div class="group wide">
<img id='DSC_0724'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0724/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0724/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0724.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0724/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0724/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0724/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0724/32nd.jpg 144w'
sizes="(min-width: 36em) 51.3941557vw, 100vw" data-scroll-target alt="Many, many people going up the trail to the glacier." />
<img id='DSC_0736'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0736/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0736/8th.jpg 545w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0736.jpg 4358w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0736/half.jpg 2179w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0736/quarter.jpg 1090w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0736/16th.jpg 272w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0736/32nd.jpg 136w'
sizes="(min-width: 36em) 48.6058443vw, 100vw" data-scroll-target alt="A cardboard cutout of a man telling folks to stop and not approach the glacier." />
</div>
<img id='DSC_0744'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0744/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0744/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0744.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0744/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0744/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0744/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0744/32nd.jpg 144w'
class="wide" data-scroll-target alt="Moody photo of tiny, dark Britt on a wide cloudy beach." />
<div class="group wide">
<img id='DSC_0753'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0753/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0753/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0753.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0753/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0753/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0753/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0753/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Tilted, motion-blurry photo of Britt walking on the beach in a flannel, hiking boots, and tights." />
<img id='DSC_0759'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0759/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0759/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0759.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0759/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0759/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0759/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0759/32nd.jpg 144w'
sizes="(min-width: 36em) 50vw, 100vw" data-scroll-target alt="Same beach, same mood, at sunset. Pinks blues and grays in the sky." />
</div>
<img id='DSC_0755'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0755/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0755/8th.jpg 541w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0755.jpg 4324w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0755/half.jpg 2162w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0755/quarter.jpg 1081w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0755/16th.jpg 270w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0755/32nd.jpg 135w'
class="wide" data-scroll-target alt="Tiny britt infront of a rock wall with greenery bursting out the top of it." />
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/quarter.gif" class="wide">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/full.mp4"
data-width="3376" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/half.mp4"
data-width="1688" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/quarter.mp4"
data-width="840" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/8th.mp4"
data-width="416" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/16th.mp4"
data-width="208" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/full.ogv"
data-width="3376" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/half.ogv"
data-width="1688" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/quarter.ogv"
data-width="840" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/8th.ogv"
data-width="416" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0781-Animated/16th.ogv"
data-width="208" data-height="144" data-type="video/ogg"></span>
Glassy blue waves in front of a hazy blue mountain range silhouette.
</a>
<img id='DSC_0805'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0805/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0805/8th.jpg 542w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0805.jpg 4333w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0805/half.jpg 2167w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0805/quarter.jpg 1083w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0805/16th.jpg 271w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0805/32nd.jpg 135w'
class="wide" data-scroll-target alt="Britt standing waist deep in dramatically yellow-turquoise-blue beach water." />
<div class="group wide">
<div style="flex-basis: 47.46219669vw;">
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/quarter.gif">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/full.mp4"
data-width="3120" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/half.mp4"
data-width="1560" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/quarter.mp4"
data-width="776" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/8th.mp4"
data-width="384" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/16th.mp4"
data-width="192" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/full.ogv"
data-width="3120" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/half.ogv"
data-width="1560" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/quarter.ogv"
data-width="776" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/8th.ogv"
data-width="384" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0790-Animated/16th.ogv"
data-width="192" data-height="144" data-type="video/ogg"></span>
Britt sticking her tounge out and smiling.
</a>
</div>
<div style="flex-basis: 52.53780331vw;">
<a data-supergif href="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/8th.gif">
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/full.mp4"
data-width="3456" data-height="2304" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/half.mp4"
data-width="1728" data-height="1152" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/quarter.mp4"
data-width="864" data-height="576" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/8th.mp4"
data-width="432" data-height="288" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/16th.mp4"
data-width="216" data-height="144" data-type="video/mp4"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/full.ogv"
data-width="3456" data-height="2304" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/half.ogv"
data-width="1728" data-height="1152" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/quarter.ogv"
data-width="864" data-height="576" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/8th.ogv"
data-width="432" data-height="288" data-type="video/ogg"></span>
<span data-src="/assets/2017-01-22-en-zed-blue-ensign/DSC_0823-Animated/16th.ogv"
data-width="216" data-height="144" data-type="video/ogg"></span>
Britt on a boat, rocking back and forth.
</a>
</div>
</div>
<img id='DSC_0810'
src='/assets/2017-01-22-en-zed-blue-ensign/DSC_0810/8th.jpg'
srcset='/assets/2017-01-22-en-zed-blue-ensign/DSC_0810/8th.jpg 576w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0810.jpg 4608w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0810/half.jpg 2304w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0810/quarter.jpg 1152w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0810/16th.jpg 288w, /assets/2017-01-22-en-zed-blue-ensign/DSC_0810/32nd.jpg 144w'
class="wide" data-scroll-target alt="Britt, smiling, on a boat." />
<p>More photos from <i>Aotearoa</i>:</p>
<ul>
<li><a href="/posts/2017/en-zed-silver-fern">En Zed: Silver Fern</a> (black and white)</li>
<li><a href="/posts/2017/en-zed-red-peak">En Zed: Red Peak</a> (infrared)</li>
</ul>
<script src="/js/supergifs.js"></script>