가 어떻게 문제를 해결했나요? - 브라우저에서 큰 이미지 처리하기

Save the Day - 브라우저에서 큰 이미지 처리" />

클라이언트가 각각 약 5800개의 이미지 28개를 업로드했습니다. x 9500픽셀 및 28MB 크기. 브라우저에 이러한 이미지를 표시하려고 하면 전체 탭이 10분 동안 닫히지도 않고 멈췄습니다. 그리고 이것은 작은 노트북이 아닌 Ryzen 9 CPU와 RTX 4080 GPU를 탑재한 고급형 컴퓨터에서 이루어졌습니다.

상황은 다음과 같습니다

저희 CMS(Grace Web)에서는 관리자가 사진이든 동영상이든 파일을 업로드하면 업로드가 완료된 직후에 표시됩니다. UX에 적합합니다. 업로드가 성공했는지 확인하고 의도한 대로 업로드했으며 더 나은 느낌을 위해 UI의 반응성을 보여줍니다.

하지만 이렇게 대용량 이미지가 있어서 브라우저는 이미지를 거의 표시하지 못하고 멈춰버렸습니다.

문제는 업로드 자체에 있는 것이 아니라 이렇게 큰 이미지를 표시하는 데 있다는 점을 기억하는 것이 중요합니다. 28개의 거대한 이미지를 동시에 하나씩 렌더링하는 것은 너무 많은 일이었습니다. 빈 페이지에도 그냥... 아뇨.

왜 이런 일이 발생했나요?(심층 분석)

태그를 사용하면 브라우저는 CPU, RAM, GPU 및 때로는 드라이브를 사용하는 전체 프로세스를 거치게 됩니다. 때로는 이미지 로드 및 레이아웃 재계산 중에 사진이 표시되기 전에 이 프로세스를 여러 번 순환하기도 합니다. 픽셀 계산, 하드웨어 간 데이터 전송, 알고리즘 보간 등을 거치게 됩니다. 브라우저의 경우 이는 중요한 프로세스입니다.

브레인스토밍된 솔루션

우리는 몇 가지 옵션을 고려했습니다.

1. 업로드 후 즉시 크기 조정 및 썸네일 표시
   • 문제: 크기 조정에 시간이 너무 오래 걸릴 수 있으며 즉시 실행이 보장되지 않습니다. 특히 크기 조정 대기열이 비어 있지 않은 경우 시스템이 응답하지 않게 됩니다.
2. 대용량 파일의 경우 파일 크기를 확인하고 이름만 표시
   • 문제: 이는 특히 미디어 자료에 대해 더 큰 통제와 확인이 필요한 사용자의 경우 사용자 경험을 저하시킬 수 있습니다(그런데 대용량 파일의 경우 동일한 자료인 경우가 많습니다).

이러한 솔루션 중 어느 것도 사용할 수 없다고 느꼈습니다. 우리는 관리자가 필요한 것을 업로드하는 능력을 제한하고 싶지 않았고 사용자 경험을 타협하고 싶지도 않았습니다.

전구! <캔버스> 사용

<캔버스> 요소는 GPU를 훨씬 더 효과적으로 활용하여 콘텐츠를 렌더링합니다. 최근 JavaScript와 를 사용하여 조용하고 복잡한 게임을 만드는 사람을 보았는데, 이론적으로는 보다 큰 이미지를 더 효율적으로 처리해야 합니다.

이론 테스트

<캔버스> 업로드된 이미지를 표시하기 위한 것입니다. 우리가 사용한 코드 조각은 다음과 같습니다.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
// img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files
img.src = filesroot + data.file_path; // Our existing file path
img.onload = function() {
  // Resize canvas to desired size (for preview)
  canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed
  canvas.height = 80;
  // Draw the image onto the canvas, resizing it in the process
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail
  file_div.appendChild(canvas);
};

결과

즉각적이고 극적인 개선이 이루어졌습니다! 브라우저가 28개의 큰 이미지를 아무런 문제 없이 처리했을 뿐만 아니라, 28,000 x 17,000픽셀을 측정하는 120MB 이미지를 로드하여 더욱 발전시켰는데, 여전히 마치 작은 아이콘이었습니다.

차이점은 어디에 있습니까?

<캔버스> 사용하기 요소의 경우 그림은 전적으로 GPU의 손에 달려 있으며 해당 칩은 말 그대로 이 작업을 위해 만들어졌습니다.

• 여전히 28,000 * 17,000 = 476,000,000픽셀을 렌더링하려고 시도합니다.
• 이 <캔버스> 80 * 80 = 6,400픽셀만 그립니다.

<캔버스> 내의 이미지 크기를 조정합니다. 작은 미리보기 크기로 브라우저가 처리해야 하는 데이터의 양을 획기적으로 줄였습니다. 수억 개의 픽셀을 GPU로 보내고 수천 개의 픽셀을 다시 돌려받게 됩니다. 맞죠?

다음 단계

이러한 성공을 바탕으로 이제 <캔버스> 애플리케이션의 다른 부분, 특히 한 번에 약 250개의 이미지를 표시하는 관리 화면에서 그렇습니다. 이러한 이미지는 이미 적절하게 크기가 조정되어 있지만 더욱 향상된 성능을 제공할 수 있습니다.

성능 향상을 측정하기 위해 테스트와 벤치마킹을 실시할 예정입니다. 향후 기사에서 우리가 발견한 내용을 반드시 공유하겠습니다.

중요한 주의사항

<캔버스> 우리의 특정 사용 사례에 대해 놀라운 일을 했기 때문에 웹사이트의 공개 부분에 이미지를 표시합니다. 이유는 다음과 같습니다.

• 접근성: 화면 판독기로 요소를 읽을 수 있으므로 시각 장애가 있는 사용자에게 도움이 됩니다.
• SEO: 검색 엔진은 사이트의 가시성을 향상시킬 수 있는 태그입니다. (같은 방식으로 AI 훈련 스크레이퍼도 이미지를 "인덱싱"합니다. 글쎄, 당신은 무엇을 할 수 있습니까...)
• <사진> 픽셀 밀도를 자동으로 감지하고 완벽하게 맞도록 더 크거나 작은 그림을 표시하는 데 사용할 수 있습니다.<캔버스> 캔트. 을(를) 구축하는 방법에 대한 기사를 썼습니다.

공개 웹사이트의 경우 사용자에게 이미지를 제공하기 전에 서버 측에서 이미지 크기를 적절하게 조정하는 것이 가장 좋습니다. 이미지 크기 조정 및 최적화를 자동화하는 방법에 관심이 있다면 해당 주제에 대해 유용한 기사를 작성했습니다.

결론

저는 최적화를 좋아합니다! 우리는 매일 로컬 고성능 하드웨어로 나아가고 있지만 "좋지만 더 나을 수 있는" 경우에도 최적화를 통해 이와 같은 문제를 예방할 수 있습니다. 시작합니다.

이 접근 방식은 표준이 아닙니다. 그리고 저는 기준에 별로 관심이 없습니다. 이는 종종 엄격한 규칙으로 취급되지만 단지 지침일 뿐입니다. 이 솔루션이 적합합니다. 견고한 <캔버스>가 없는 오래된 장치를 사용하는 고객은 없습니다. 지원하다. 따라서 이제 관리해야 할 코드가 더 많아지고 그림을 표시하는 다양한 방법이 있지만 이것이 완벽하게 적합하며 그게 중요합니다!

혹시 비슷한 경험이 있으신가요? 어떻게 처리하셨나요? 아래 댓글로 경험을 공유하거나 질문을 남겨주세요!

위 내용은 가 어떻게 문제를 해결했나요? - 브라우저에서 큰 이미지 처리하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!