Pictures

Pictures live in assets/img/. Izar uses WebP because it’s small and sharp.

Always give a width and height

Each picture needs its real pixel size, as width and height. The browser then keeps the space free while the picture loads, and the page doesn’t jump. Add an alt that says what’s in the picture.

Several widths of one picture

For a sharp picture on every screen without sending a big file to a phone, save a few widths with the width at the end of the name:

assets/img/work/bakery-360.webp
assets/img/work/bakery-540.webp
assets/img/work/bakery-710.webp

Then write the path without the width, and list the widths:

image:
  src: /assets/img/work/bakery
  widths: [360, 540, 710]
  width: 710
  height: 710
  alt: The bakery's new shop sign

The browser picks the smallest file that fits. width and height are the size of the largest one, which is also the fallback file.

For a single file, skip widths and give the file itself:

image: { src: /assets/img/me.jpg, width: 800, height: 600, alt: "Me at my desk" }

Izar doesn’t include an image tool, so export the sizes with any editor. Squoosh is free and runs in your browser. Save as WebP at around quality 80.

The pictures that aren’t in your download

The live demo shows a portrait, three project screenshots, three testimonial photos and a sharing image that we can’t pass on. Your download has plain stand-in pictures with the same file names and sizes, so the site builds and looks finished from the first minute. Replace them one at a time:

Stand-in files	Used for
assets/img/hero/developer-380.webp, -560, -754	The hero portrait: a grey head and shoulders
assets/img/hero/logo-angular.webp, logo-python.webp, logo-node.webp	The three floating chips in the hero (64 × 64)
assets/img/work/lewis-*, finaco-*, focus-* (360, 540 and 710 wide)	Three project screenshots
assets/img/people/benjamin-73.webp, rasid-73.webp, logan-73.webp	Testimonial photos (73 × 73)
assets/img/og.png	The picture shown when a page is shared (1200 × 630)

Either save your picture over the stand-in with the same name, or add a new file and change the path in your page.

The client logos (assets/img/clients/*.svg) and the Northwind, Kiko and Atlas screenshots were made for Izar and come with the theme. Keep them or replace them.

Your hero portrait

The portrait hero looks best with a cut-out: you, with a transparent background, about 750 pixels wide. It sits on a soft disc, so the background shows through. Save it as WebP, which keeps transparency, at the three widths the demo uses (380, 560 and 754) or your own.

A photo with its own background shows as a rectangle on the disc. If you don’t have a cut-out, use variant: text for a hero with no picture. See Sections.

The hero picture loads first, so keep the files as small as they can be while still sharp.

Project screenshots

The demo’s cards use square screenshots, 710 pixels wide at most, on a raised panel. Other shapes work: set width and height to the real size. See Works.

Testimonial photos

Small round pictures, 73 × 73 pixels. Give avatar a src, width and height. Leave avatar out to show the name alone.

Client logos

White logos on a transparent background, as SVG when you can. Izar darkens them in light mode. See the logos section in Sections.

The sharing image and favicon

Set the sharing image under defaults: in _config.yml (image: /assets/img/og.png) and make it 1200 × 630 pixels. Replace assets/favicon.svg for the tab icon. See SEO.