Images

Images carry the emotional weight of a page: they set context, illustrate workflows, and signal brand voice faster than paragraphs can. Use them sparingly but deliberately—each graphic should earn its space, ship crisp at multiple densities, and cooperate with surrounding typography so the narrative stays lightweight and accessible.

Nausikaä keeps every image within its container, so a large photo never breaks the layout. Wrap an image in a <figure> to give it a frame and a caption, and use the left, right and center classes to place it within a text.

Plain images rely on the <img> element paired with thoughtful attributes. Always provide meaningful alt text (or an empty alt when the image is purely decorative), and set width and height so the browser can reserve space before the image loads. Images never grow wider than their container, and keep their proportions when they shrink.

<img src="..." alt="..." width="997" height="621">

Wrapping the image in a <figure> adds a subtle frame, which helps photos stand apart from the page background.

<figure>
  <img src="..." alt="...">
</figure>

Image captions belong inside a <figure> with a paired <figcaption>, giving screen readers and search engines clear context. Use the caption to state what the image shows and, when relevant, credit the source or license. Keep the copy concise and avoid repeating the alt verbatim—treat it as a complementary layer that anchors the visual inside the story.

<figure>
  <img src="..." alt="...">
  <figcaption>...</figcaption>
</figure>

Add the class left or right to a figure or image to let the text flow around it, and center to place it in the middle on a line of its own. On small screens floated images stop floating and are centered instead, so the text next to them doesn’t get squeezed into a narrow column.

When Odysseus washes ashore on Scheria, exhausted after days at sea, it is the princess Nausicaä who finds him. Her companions run from the stranger, but she stands her ground, listens to him, and offers him food, clothing and a way to the city.

She also gives careful advice: he should approach the palace on his own, so that the people of the town will not gossip about the princess returning with an unknown man. Her help sets him on the last part of his long journey home.

Painters have returned to this meeting for centuries. Some focus on the drama of the shipwrecked hero, others on the calm figure of the princess herself.

<figure class="right">
  <img src="..." alt="...">
  <figcaption>...</figcaption>
</figure>
<p>Text flowing around the figure...</p>

<div class="clear-float"></div>

<figure class="center">...</figure>

Ending a float: text keeps flowing around a floated image until the image ends. Add an element with the class clear-float to start the next content below it.

No classes are needed to make images responsive; the browser does the work if you describe the available files. List several sizes of the same image in srcset and tell the browser how wide the image will be displayed with sizes. It then downloads the smallest file that still looks sharp on the visitor’s screen.

<img
  src="nausikaa-800.jpg"
  srcset="nausikaa-400.jpg 400w, nausikaa-800.jpg 800w, nausikaa-1600.jpg 1600w"
  sizes="(max-width: 666px) 100vw, 800px"
  alt="..." width="800" height="500" loading="lazy">

Use <picture> when you want to offer modern file formats with a fallback, or show a different crop on small screens. The browser picks the first <source> it supports and falls back to the <img>, which also carries the alt text and the styling.

<picture>
  <source srcset="nausikaa.avif" type="image/avif">
  <source srcset="nausikaa.webp" type="image/webp">
  <img src="nausikaa.jpg" alt="..." width="800" height="500">
</picture>

Additional notes: add loading="lazy" to images further down the page so they only load when needed, but not to the first image a visitor sees. Pick formats that match the job (SVG for icons and illustrations, AVIF or WebP for photos), and avoid baking text into images so content stays translatable and readable at any size.

Like images, <video>, <audio>, <iframe> and <canvas> never get wider than their container, so a page with a video or an embedded map still fits a small screen without scrolling sideways. A video and a canvas keep their proportions as they shrink. An audio player starts on a line of its own, and an iframe gets a thin border and rounded corners, which it drops inside a <figure>.

<figure>
  <video controls width="800" height="450" poster="harbour.jpg">
    <source src="harbour.webm" type="video/webm">
    <source src="harbour.mp4" type="video/mp4">
    <track kind="captions" src="harbour.en.vtt" srclang="en" label="English" default>
  </video>
  <figcaption>...</figcaption>
</figure>

<audio controls src="interview.mp3"></audio>
<p><a href="interview.html">Read the transcript</a></p>

<iframe src="..." title="Map of the library and its surroundings"
  width="800" height="450" loading="lazy"></iframe>

An iframe keeps the height it was given, because its content doesn’t tell the page how tall it wants to be. For an embedded video, set aspect-ratio on it in your own stylesheet if the browsers you support know it.

Accessible media: give a video with speech captions in a <track>, and a recording without pictures a transcript. Show the controls, and don’t start playing with sound on your own: if something plays for longer than three seconds, people must be able to pause it. Give every <iframe> a title that says what is in it, and a <canvas> a text alternative, between its tags or next to it.