IxDF Developer Docs

Appearance

Image HTML ​

Responsive Image Implementation ​

We use srcset to create responsive images because it lets the browser do all the heavy lifting and has very good support plus fallback.

Example of a responsive hero image implementation:

blade
<img
    src="{{ public_img_url($article->hero_image_url, ['w' => 1280, 'q' => 75]) }}"
    srcset="
        {{ public_img_url($article->hero_image_url, ['w' => 2560, 'q' => 75]) }} 2560w,
        {{ public_img_url($article->hero_image_url, ['w' => 1920, 'q' => 75]) }} 1920w,
        {{ public_img_url($article->hero_image_url, ['w' => 1280, 'q' => 75]) }} 1280w,
        {{ public_img_url($article->hero_image_url, ['w' => 828, 'q' => 75]) }} 828w"
    sizes="100vw"
    alt="{{ $article->title }}"
    width="2560"
    height="1440"
    class="w-full h-auto"
    loading="eager"
    decoding="async"
    fetchpriority="high"
>

You don't need to use picture and source elements, because we use ImageKit, which handles automatic format selection.

Performance Optimizations:

  • loading="eager" for LCP (Largest Contentful Paint)
  • decoding="async" for better performance
  • Specified dimensions to prevent layout shift
  • Proper sizes attribute

Loading Strategy ​

We use lazy loading for images outside the initial viewport using the data-src attribute instead of src. This uses the Observer API to load images when they approach the viewport, providing better performance than the loading="lazy" attribute.

References ​