Progressive
Image Load

Lazy Load, and Dynamic Loading

Source Set
Image Load

Optimizing User First
Image Management

uk-image with programtic ALT

The Image components supports the img element and the CSS background-image property. The srcset attribute for images is supported as well creating the optimal images for different device widths and high resolution (retina) displays. The Image component even makes it possible to use srcset for the CSS background-image property.

Shopify Standard Image Size

When working with Shopify theme, images default to Shopify compression, size optimizations.

Target Off Screen Render

Usually, the image starts loading when it enters the viewport. To start loading images based on the viewport visibility of another element, use the target option. This is very useful to lazy load images in a Slider, Media Gallery, or other heavy load user experience.

This example is a Slider, Replace with Media Gallery with many images.

Media Gallery Load Example

Use in any static stack: WordPress, Shopify, Drupal, Native.

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow uk-slideshow="ratio: 7:3; animation: push">

    <ul class="uk-slideshow-items">
        <li>
            <img data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" width=“700” height="1800" alt="" uk-position-top uk-img="target: !.uk-slideshow-items">
        </li>
        <li>
            <img data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/tshirt.jpg" width=“700” height="1800" alt="" uk-position-top uk-img="target: !.uk-slideshow-items">
        </li>
        <li>
            <img data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" width=“700” height="1800" alt="" uk-position-top uk-img="target: !.uk-slideshow-items">
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

Programatic URLs

Use data to load Image URLs (can be an external live loading spreadsheet like Google Tables or Air Power – Shopify customized workflow).

Source Set images can be optimized for fast dynamic progressive loading. Lazy Load, can be demoed on both sides of Webflow/Shopify.

Multi Language Alt Tag fields are managed by the Library that envelopes Vanilla CSS/JS.

Multiple Staging, including Real Time Globalization / Language Versions can be managed and synced with Webhooks, or scheduled client managed spreadsheets.

<img data-src="" data-srcset="" sizes="" width="" height="" alt="" uk-img>

Background Image Alt Text

Use this in Webflow and Shopify.

Set up Schema with custom text attributes.

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="images/photo.jpg" alt="" uk-img>
  <h1>Background Image</h1>
</div>

Blocks, Sections, Metafields

DYNAMIC SCHEMA STYLES

Use with any modeling IA: VUE, Liquid, Static (Webflow, Unity), CDN using Netlify/Git automation.

Retina Progressive Images can also be exported to Static CDN repositories, that can be named and customized for Globalization Versioned, and Scheduled publishing plans.

Set up Styled Schema with custom attributes. Use Mustache to call looping section, block, metafield, into tagged and styled UI/UX.

UI CSS patterns have been normalized across omni browsers. Testing and Responsiveness is greatly simplified.

BEM naming convention avoids conflict with legacy (Bootstrap 3/4) collisions. uk-grid and uk-flex, uk-ratio, can be nested in as is Vanilla CSS generated by Webflow Globals.

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     data-src="{{ section.settings.image_url }}?fit=crop&w=650&h=433&q=80"
     data-srcset="{{ section.settings.image_url }}?fit=crop&w=650&h=433&q=80 650w,
   {{ section.settings.image_url }}?fit=crop&w=1300&h=866&q=80 1300w"
     data-sizes="(min-width: 650px) 650px, 100vw" alt="{{ section.settings.alt_text }}" uk-img>
    <h1>Background Image</h1>
</div>

{% schema %}

   {
      "type": "text",
      "id": "alt_text",
      "label": "Alt Text",
      "default": "French Translation"
    },

   {
      "type": "url",
      "id": "image_url",
      "label": "Image URL"
    },

{% endschema %}