Image component

👨‍💻 Framework Development » Framework Design
1

We need to implement an Image component to support lazy load. This component will be used also by html2react.

Features:

  • :white_check_mark: Check if native lazy load is supported and use it if available. (loading="lazy")
  • :white_check_mark: Check if IntersectionObserver is supported and implement lazy load within React.
    • :white_check_mark: Implement useInView hook.
  • :white_check_mark: Implement a script to render on SSR that runs if the browser doesn’t support Proxys. This script will map data-srcs to srcs.
  • :white_check_mark: Implement <no-script> solution.
  • :x: Implement solution for AMP (<amp-img>)

References:

Native lazy load: https://addyosmani.com/blog/lazy-loading/
Lazy load: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Hook for IntersectionObserver: https://usehooks.com/useOnScreen/
Check if Proxy is supported: https://github.com/frontity/frontity/blob/427563e9521d2fed03f35f9dab383326059c7062/packages/core/src/client/index.tsx#L9

PR:

2 Likes
2

It would be good to see some kind of transition implementation in there (opacity fade etc)

I don’t think it’s directly possible with native lazy loading . I usually use a library like GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. or smush has a version. In fact doesn’t the new Wordpress do it?

Also it’d be great if the Image component did srcset etc out of the box like WP does with

Annoyingly ACF image field does not output the same format for sizes as the WP functions do so the parser function would need to be different (I normally just pass the ID back to the WP function when I’m doing PHP based themes)

Thanks
J

3

Frontity can do all that, however the data is not available in the REST API provided by WordPress.

If a plugin would set that data correctly than it’s easy enough to use a custom Image component to do it the “correct” way.

So unless the WP REST API is providing those extra attributes by default I don’t think it should be part of the default component.

1 Like