개츠비 이미지와 사파리

기본적으로 Gatsby 이미지는 loading: "lazy" 패키지에 의해 생성된 모든 이미지에 gatbsy-image 속성을 배치합니다. 이 속성은 페이지의 이미지가 표시될 때까지 로드를 대기하게 합니다. 저품질 이미지 자리 표시자와 함께 사용하면 대부분의 최신 브라우저에서 성능과 미적으로 만족스러운 정말 멋진 경험을 얻을 수 있습니다.

그러나 Safari는 gatsby-image 의존하는 중요한 브라우저 API를 아직 구현하지 않았습니다... Intersection Observer . 이로 인해 이미지가 lqip 상태로 로드되거나 로드되지 않고 업데이트되지 않을 수 있습니다.

MDN 문서에 따르면:

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

이 기능은 이미지가 표시되면 해당 이미지의 소스를 업데이트하는 데 필요하며, 이는 Safari 데스크탑이나 iOS에서는 발생하지 않습니다.

다행히도 수정은 쉽습니다. 간단히 install the polyfill :

yarn add intersection-observer

다음으로 브라우저 API를 사용할 수 있게 되면 폴리필을 로드하고 싶다고 Gatbsy에 알립니다. gatsby-browser.js를 열고 다음 스니펫을 복사합니다.

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

export const onClientEntry = async () => {
  if (typeof IntersectionObserver === "undefined") {
    await import("intersection-observer")
  }
}

비올라! gatsby-image가 있는 Safari의 고성능 이미지 !

작동 중인 이 폴리필의 예를 보려면 내Gatbsy/WordPress Starter repo를 확인하세요.