웹의 대부분의 이미지는 불필요합니다. 내가 약간의 바보 일 수 있다면, 99%는 전혀 도움이되지 않습니다 (드문 예외는 있지만). 이미지는 종종 지원 해야하는 텍스트를 보완하지 않고 대신 사용자가 상처를 입히고, 어떤 종류의 성능 세금과 같은 데이터 캡을로드하고 날려 버리는 데 영원히 걸립니다.

고맙게도, 이것은 오늘날 대부분의 디자인 문제입니다. 이미지를 공연하고 사용자 친화적으로 만드는 것이 한때보다 훨씬 쉽기 때문입니다. Webp와 같은 더 나은 이미지 형식 (그리고 곧 JPEG XL)이 있습니다. 우리는 물론 반응성의 마법을 가지고 있습니다. 또한 ImageOptim과 같은 훌륭한 도구와 Addy Osmani의 새 책과 같은 자료가 많이 있습니다.

이미지 성능을 향상시키는 내가 가장 좋아하는 방법은 가질 로딩입니다 :

이 이미지는 사용자가 페이지를 아래로 스크롤하여 사용자에게 보이는 경우에만로드됩니다. 이는 초기 페이지로드에서 제거하면 훌륭합니다! 웹 페이지 Lightningfast의 초기로드를 만드는 것은 큰 일입니다.

그러나 절대로 로드하지 말아야 할 이미지가있을 수 있습니다. 아마도 사람이 그것을 볼 수 있다면 더 나은 상황이있을 것입니다. 한 가지 예는 다음과 같습니다. 그렇지 않습니까? 읽을 수 있습니다! 모든 곳에서 정크가없고, 저를 사용자로 존중하고 달콤한 하늘 - 빠른 입니다.

그래서! 웹 사이트에 이미지를 표시 할 수 있지만 클릭하거나 탭하면 이미지를 표시하면 어떻게됩니까? 자리 표시자를 보여주고 클릭시 실제 이미지를 교체 할 수 있다면 깔끔하지 않습니까? 다음과 같은 것 :

글쎄, 나는이 챕터를 만드는 방법에 대한 두 가지 생각을 가지고있었습니다 (황금 규칙은 웹에 아무것도 만들 수있는 한 가지 방법이 없다는 것입니다).

메소드 #1 : SRC 속성없이 사용

태그의 SRC 속성을 제거하여 이미지를 숨길 수 있습니다. 그런 다음 이미지 파일을 Data-SRC 등과 같은 속성에 넣을 수 있습니다.

기본적으로 대부분의 브라우저는 아마도 익숙한 깨진 이미지 아이콘을 표시합니다.

좋아요. 추측? 화면에서 Alt 태그가 자동으로 렌더링되는 것을 볼 수 있지만 JavaScript의 가벼운 대시를 사용하면 SRC를 해당 속성으로 교환 할 수 있습니다.

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

이제 우리는 스타일을 추가 할 수 있습니다.

ugh . 일부 브라우저에는 이미지가로드되지 않았을 때 바닥에 작은 깨진 이미지 아이콘이 있습니다. 여기서 문제는 브라우저가 CSS로 깨진 이미지 아이콘을 제거하는 방법을 제공하지 않는다는 것입니다 (어쨌든 허용되지 않아야 할 것입니다). Alt 텍스트를 스타일링하는 것은 약간 성가신 일입니다. 그러나 ALT 속성을 완전히 제거하면 깨진 이미지 아이콘이 사라졌지만 을 JavaScript없이 사용할 수 없습니다. 따라서 alt 텍스트를 제거하는 것은 아니에요.

내가 말했듯이 :

ugh . 이 방법을 작동시키는 방법이 없다고 생각합니다 (제발 나를 잘못 증명하지만).

메소드 #2 : 링크를 사용하여 이미지를 만듭니다

우리가 가진 다른 옵션은 다음과 같이 겸손한 하이퍼 링크로 시작하는 것입니다 :

Musab al Rawahi의 열기구 사진. 144KB

Photograph of hot air balloons by Musab Al Rawahi. 144kb

아직, 아직 똑똑한 일이 일어나지 않습니다 - 이것은 이미지에 대한 링크를 렌더링합니다 :

접근성 측면에서 작동합니다. 자바 스크립트가 없다면 사람들이 선택적으로 클릭 할 수있는 링크 일뿐입니다. 성능 측면에서는 일반 텍스트보다 훨씬 빨라질 수 없습니다!

그러나 여기에서 우리는 javaScript에 도달하여 링크가 클릭으로로드되는 것을 중지하고 해당 링크 내에서 HREF 속성을 잡고 이미지 요소를 만들고 마지막으로 페이지에 해당 이미지를 던지고 이전 링크를 제거 할 수 있습니다.

document.querySelectorall ( ". load-Image"). foreach ((item) => { item.addeventListener ( "클릭", (이벤트) => { const href = event.target.getAttribute ( "href"); const newimage = document.createElement ( "IMG"); event.preventDefault (); NewImage.setAttribute ( "SRC", HREF); document.body.insertbefore (newimage, event.target); event.target.remove (); }); });

document.querySelectorAll(".load-image").forEach((item) => {
  item.addEventListener("click", (event) => {
    const href = event.target.getAttribute("href");
    const newImage = document.createElement("img");
    event.preventDefault();
    newImage.setAttribute("src", href);
    document.body.insertBefore(newImage, event.target);
    event.target.remove();
  });
});

우리는 아마도이 자리 표시 자 링크를 스타일링하여 아래의 것보다 조금 더 멋지게 보이게 할 수 있습니다. 그러나 이것은 단지 예일뿐입니다. 계속해서 링크를 클릭하여 이미지를 다시로드하십시오.

그리고 거기에 당신은 그것을 가지고 있습니다! 획기적인 것은 아니며, 누군가가 어느 시점 에서이 작업을 수행했다고 확신합니다. 그러나 우리가 첫 번째 페인트와 초기 하중 이외의 성능에 대해 매우 급진적이기를 원한다면 이것이 괜찮은 솔루션이라고 생각합니다. 우리가 텍스트 전용 웹 사이트를 만들고 있다면 이것이 확실히가는 길이라고 생각합니다.

아마도 우리는 이것으로 웹 구성 요소를 만들거나 누군가가 데이터를 감소시키는 경우 다른 사람이 데이터 나 무언가가있는 경우에만 이미지를로드하는지 여부를 감지 할 수도 있습니다. 어떻게 생각하나요?