Sayfa.Image (Sayfa v0.5.0)

Image helper functions for templates.

Provides responsive image markup generation. Note: This does NOT perform image optimization or resizing - it only generates the HTML markup for responsive images. Images must be prepared manually.

Usage in templates

<%= Sayfa.Image.responsive("/images/cover.jpg",
      alt: "Cover image",
      sizes: "100vw",
      widths: [400, 800, 1200]) %>

Image preparation

For the helper to work correctly, you must manually create resized versions of your images with the naming pattern:

static/images/photo.jpg         # Original
static/images/photo-600w.jpg    # Resized to 600px width
static/images/photo-1200w.jpg   # Resized to 1200px width

You can use ImageMagick or similar tools:

convert static/images/photo.jpg -resize 600 static/images/photo-600w.jpg

Summary

Functions

responsive(src, opts)

Generates responsive image HTML with srcset.

Functions

responsive(src, opts)

@spec responsive(
  String.t(),
  keyword()
) :: String.t()

Generates responsive image HTML with srcset.

Expects images to exist at /images/filename-{width}w.ext pattern.

Options

:alt - Alt text (required)
:class - CSS classes
:loading - "lazy" or "eager" (default: "lazy")
:decoding - "async" or "sync" (default: "async")
:sizes - Sizes attribute (default: "100vw")
:widths - List of widths for srcset (default: [400, 800, 1200])

Examples

iex> Sayfa.Image.responsive("/images/hero.jpg", alt: "Hero", widths: [600, 1200])
"<img src=\"/images/hero.jpg\" srcset=\"/images/hero-600w.jpg 600w, /images/hero-1200w.jpg 1200w\" sizes=\"100vw\" alt=\"Hero\" loading=\"lazy\" decoding=\"async\">"