Squoosh: 웹사이트를 위한 이미지 최적화 도구

?색인

1. 소개
2. 스쿠시란 무엇인가요?
3. 지연 로딩
4. 참고자료
5. 결론

---

1. 소개

웹은 일반적으로 이미지를 사용하는 것이 특징입니다. 이미지가 없는 웹사이트를 방문한 적이 있나요? 나는 그렇지 않다고 확신합니다. 이미지는 웹의 탁월한 멀티미디어 콘텐츠이므로 이를 관리하는 방법을 배우는 것은 좋은 사용자 경험을 제공하는 최적의 웹사이트를 제공하는 데 중요합니다.

2. 스쿠시란 무엇인가요?

Squoosh는 최종 사용자를 위한 프레젠테이션 품질을 저하시키지 않으면서 무게를 줄여 이미지를 최적화하기 위해 Google Chrome 개발팀에서 만들고 유지 관리하는 안전하고 사용하기 쉬운 오픈 소스 도구입니다.

이미지를 업로드할 수 있는 공식 웹사이트에 액세스할 수 있으며 사용 사례에 따라 이미지의 무게와 품질을 시험해 볼 수 있습니다.

예를 들어, 무게가 1.62Mb인 .png 형식의 이미지를 로드하고 최적화 프로세스 후에 도구를 사용하여 무게가 90%인 154Kb의 동일한 이미지를 얻을 수 있습니다.

예제의 데모를 보면 확인할 수 있습니다.

3. 지연 로딩

이미지 최적화를 관리하는 또 다른 간단한 방법은 사용자 뷰포트에 즉시 로드되지 않는 이미지에 지연 로딩을 사용하는 것입니다. 이는 아마도 사용할 필요가 없는 이미지 요청을 방지하여 클라이언트의 대역폭을 절약한다는 의미입니다.

간단한 예를 살펴보겠습니다.

예제의 마지막 이미지는 loading="lazy" 속성이 있기 때문에 기본적으로 로드되지 않습니다. 이는 사용자가 스크롤할 때만 로드되며, 이는 사용자에게 이미지가 필요하다는 것을 브라우저에 알려줍니다. 부담.

보시다시피 이는 기본적으로 순수 HTML을 사용하여 대역폭을 절약하는 매우 간단한 방법입니다.

4. 참고자료

공식 Squoosh 저장소는 다음과 같습니다.

GoogleChromeLabs / 으깨다

브라우저에서 바로 동급 최고의 코덱을 사용하여 이미지를 더 작게 만드세요.

으악!

Squoosh는 다양한 형식을 통해 이미지 크기를 줄이는 이미지 압축 웹 앱입니다.

개인정보 보호

Squoosh는 이미지를 서버로 보내지 않습니다. 모든 이미지 압축은 로컬에서 진행됩니다.

그러나 Squoosh는 Google Analytics를 활용하여 다음 정보를 수집합니다.

• 기본 방문자 데이터.
• 전후 이미지 크기 값입니다.
• Squaosh PWA인 경우 Squoosh 설치 유형입니다.
• Squaosh PWA의 경우 설치 시간과 날짜

개발 중

Squaosh용 개발:

1. 저장소 복제
2. 노드 패키지를 설치하려면 다음을 실행하세요.

   npm install
3. 그런 다음 다음을 실행하여 앱을 빌드합니다.

   npm run build
4. 빌드 후 다음을 실행하여 개발 서버를 시작합니다.

   npm run dev

기여

Squoosh는 모든 커뮤니티 참여를 높이 평가하는 오픈 소스 프로젝트입니다. 프로젝트에 기여하려면 기여 가이드를 따르세요.

GitHub에서 보기

5. 결론

오픈 소스 도구를 사용하여 웹 사이트의 이미지를 최적화하는 것은 성능을 향상시키는 데 매우 중요하며, 지연 로딩과 같은 기본 HTML 기능과 결합하면 성능이 상당히 단순하게 향상됩니다.

---

당신이 관심을 가질 수 있는 내가 작성한 다른 게시물:

HTML5의 독점적인 기본 아코디언?

Cristian Fernando ・ 1월 10일

#웹개발 #html #css #프론트엔드

빠른 가이드: Git에서 좋은 커밋 메시지를 만들기 위한 팁

크리스티안 페르난도 ・2024년 12월 20일

#git #github #gitlab #스페인 사람

SSH 키를 생성하고 Windows에서 Github에 연결하는 방법은 무엇입니까? ?

크리스티안 페르난도 ・'24년 12월 13일

#github #git #스페인 사람 #gitlab

위 내용은 Squoosh: 웹사이트를 위한 이미지 최적화 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!