느린 이미지 로드를 복구하는 간단한 3단계

인터넷에 이미지를 불러오는 것은 고통스러울 수도 있다. 특히 모바일 기기를 위한 웹 사이트를 주로 만들면.이 경우 무선 연결을 사용하기 때문에 유선 연결에 비해 전송 속도가 느리기 때문에 내용 로드가 느리다.
텍스트의 경우 웹에서 텍스트의 전송 속도가 매우 빠르고 몇 KB의 무게만 있기 때문에 차이를 발견할 수 없습니다. 특히 고해상도 이미지는 왕왕 매우 큰 파일 (여러 MB) 을 가지고 있어 불러오는 속도가 비교적 느리기 때문입니다.간단한 방법은 고해상도 이미지를 제거하는 것이지만, 대부분의 경우 고해상도 이미지의 수를 줄일 수 없기 때문에 우리는 그것들을 처리해야 한다.걱정하지 마라, 내가 곧 너에게 사이트의 큰 그림을 어떻게 파악하는지 가르쳐 줄 것이다.⏱

승리의 도구🏆
우선, 웹 페이지에 포함할 그림이 최소화/압축되었는지 확인하십시오.너는 많은 도구를 사용하여 이 임무를 완성할 수 있으며, 그 중 일부 도구는 그림의 전체적인 품질이 변하지 않도록 보장할 수 있다.즉, 이미지를 어떻게 사용해야 하는지, 어디서 사용해야 하는지 아는 것이 좋습니다. 예를 들어 그림을 최적화해야 하기 때문입니다.예를 들어 작은 아이콘(20px/20px일 수도 있음)만 보이는 그림은 해상도가 2000px/2000px일 필요가 없습니다. 너무 크기 때문입니다.다른 한편, 큰 전폭 이미지는 이미지의 좋은 해상도를 유지하기 위해 너무 작아서는 안 된다.
이 작업을 수행하기 위해 필요한 경우 다음 소스를 추천합니다.
🛰 온라인 이미지 최소화/압축:

https://compressor.io/

https://imagecompressor.com/

📦 구축/사전 프로세스에 최소화 작업 통합 (권장):

패키지: https://web.dev/codelab-imagemin-webpack

크게 마셔https://github.com/sindresorhus/gulp-imagemin

패키지: https://github.com/DeMoorJasper/parcel-plugin-imagemin

올바른 방식으로 이미지를 로드하는지 확인합니다.🔍
둘째, 그림을 더 빨리 불러올 수 있도록 하는 기본적인 부분은 그림을 정확하게 불러오는 것입니다.결국, 로드가 지연된다는 말을 들을 것이다. 즉, 브라우저를 중단하고 내용을 바로 로드한 다음 자바스크립트로 다시 시작하는 것이다.로드 지연은 많은 이미지가 있는 사이트에 사용되며, 모든 이미지를 동시에 로드할 수 없습니다. 그러면 사이트가 로드되는 데 시간이 오래 걸리거나, 최종적으로 로드를 멈추지 않기 때문입니다. (심심해서 취소할 수 있기 때문입니다.)이 문제를 해결하기 위해서, 지연 로드는 지정한 그림 (최초) 만 불러오고, 어떤 작업이 발생한 후에 다른 부분을 불러옵니다. 예를 들어 그림이 보기로 굴러가거나 다른 상호작용이 발생합니다.🕹
몇 개의 lazyload 라이브러리:

https://github.com/verlok/lazyload(권장)

https://github.com/tuupola/lazyload

https://github.com/aFarkas/lazysizes

정확한 이미지를 로드하는 또 다른 해결 방안은 정확한 뷰포트에 대한 정확한 파일을 선택하는 것이다.모바일 기기에서 웹 사이트의 이미지는 작은 뷰포트에서 축소되기 때문에 더 작을 수도 있다.뷰포트/화면 크기에 따라 다른 이미지를 로드하려면 뷰포트를 모니터링하고 정확한 이미지 소스를 설정해야 합니다.🖼📱
1️⃣ 일반적으로 표준<img> 요소에서는 브라우저를 단일 소스 파일로만 가리킬 수 있습니다.

<img src="nice-image-900.jpg" alt="This is a very nice image">

2️⃣ 응답 이미지 로드를 설정하기 위해 두 개의 새 속성srcset과 sizes을 사용하여 여러 개의 추가 원본 이미지를 제공하고 브라우저가 정확한 이미지를 선택하는 데 도움을 줄 수 있습니다.

<img srcset="nice-image-340.jpg 340w,
             nice-image-500.jpg 500w,
             nice-image-900.jpg 900w"
     sizes="(max-width: 340px) 300px,
            (max-width: 500px) 450px,
            900px"
     src="nice-image-900.jpg" alt="This is a very nice image">

처음에는 srcset와 size가 복잡해 보였지만 이해하기 어렵지 않았다.직접 들어가려면 srcset 다양한 이미지를 설정하고 실제 너비를 정의합니다 (예를 들어 340w->w 대신 px.그림의 실제 폭을 얻으려면 컴퓨터에서 그림 정보를 볼 수 있습니다.sizes 속성은 현재 뷰포트에 가장 적합한 이미지를 나타냅니다.
이 때 뷰포트 폭이 480px인 지원 브라우저가 페이지를 불러오면 (최대 폭: 480px) 미디어 조건이 진짜이기 때문에 브라우저가 450px 슬롯을 선택합니다.고유 너비 nice-image-500w.jpg 가 가장 가깝기 때문에 450w 를 불러옵니다.

디자인 시 이미지 로드 고려💡
셋째, 이미지 로드가 느리거나 로드 문제를 방지하는 가장 좋은 해결 방안은 최초로 사이트에 로드된 이미지의 총량을 줄이는 것이다.네가 탑재한 그림이 많을수록, 너의 사이트는 더욱 느려질 것이다. 내가 위에서 너에게 건의한 것은 단지 네가 포기할 수 없는 상황일 뿐이다.
현재 디자이너들은 더 많은 벡터 도형, 예를 들어 SVG를 사용하는 경향이 있다. SVG 파일은 기본적으로 텍스트이기 때문에 불러오는 속도가 매우 빠르다.또한 SVG 코드를 로드한 후 코드의 특정 지점에 수정할 수 있습니다. 이 경우 간결합니다.따라서 가능한 한 SVG를 사용하고 필요할 때만 이미지를 사용해야 한다고 할 수 있다.이미지 로드 솔루션의 또 다른 부분은 정확한 이미지 형식을 선택하는 것입니다. 일반적으로 이 점에 대한 상세한 정보를 찾을 수 있습니다. here

Thus, it can be said that SVGs should be used wherever it is possible and images are only used where necessary.

그림을 즐겁게 인코딩하고 개선하여 빠르게 빛을 발하도록 하세요!🚀💫