WebP로 웹 페이지 로딩 속도 향상
6743 단어 htmlimagewebdevperformance
이미지가 널리 사용됨
이미지는 대역폭에서 점점 더 많은 공간을 차지합니다.
W3Techs statistic은 모든 웹사이트의 90%가 이미지를 사용한다는 것을 보여줍니다.
news.google.com의 경우 이미지는 홈페이지에 로드된 자산의 44%를 차지하며 로드 시간의 30%를 차지합니다(출처: DevTools를 사용하여 페이지를 수동으로 분석했습니다).
웹프
Google은 더 작은 이미지 크기를 제공하는 WebP 사진 형식을 제안했습니다.
different lossless compression algorithm vs webp에서 Google 자체에서 수행한 사례 연구에 따르면 이 마지막은 기존 png 압축 라이브러리와 비교하여 최대 42%의 저장된 바이트를 보여주었습니다.
또한 JPEG 이미지(1920x1080)에 대해 테스트했으며 다음과 같습니다.
보시다시피 JPEG 이미지의 가중치는 WebP 이미지의 경우 195KB에 비해 530KB입니다. 이는 Google이 PNG에 대해 언급한 것과 크게 다르지 않은 36% 덜 무겁습니다.
Original image
적용 범위
WebP는 가장 널리 사용되는 모든 브라우저(현재 75% coverage)에서 올바르게 지원됩니다.
브라우저
지원
최소 버전
출시일
인터넷 익스플로러
✘
가장자리
✔
18
2018년 11월 13일
크롬
✔
71
2018년 12월 05일
파이어폭스
✔
65
2019년 1월 29일
오페라
✔
56
2018년 9월 25일
원정 여행
✘
출처: https://caniuse.com/#feat=webp
프로덕션에서 WebP 사용
다음은 <picture> HTML 태그를 사용한 웹 페이지 최적화의 예입니다.
<!-- before -->
<img src="/img/mountain.jpg" alt="Moutains view" />
<!-- after -->
<picture>
<source type="image/webp" srcset="/img/mountain.webp" />
<img src="/img/mountain.jpg" alt="Mountains view" />
</picture>
WebP가 사용자 에이전트에서 지원되지 않는 경우 브라우저는
<img />
로 돌아갑니다. 그림은 87% of coverage(이 부분을 개선해 주셔서 감사합니다)가 포함된 HTML 태그이므로 브라우저가 <picture>
태그를 지원하지 않더라도 여전히 <img />
태그로 대체됩니다(정보 주셔서 감사합니다!).<picture>
태그는 훨씬 더 강력하여 예를 들어 현재 브라우저 뷰포트 너비에 따라 이미지 크기를 선택할 수 있습니다. MDN page에서 자세히 알아보십시오.이미지를 WebP 형식으로 변환하는 도구
이미지를 WebP로 변환하는 온라인 서비스가 많이 있습니다. 저는 개인적으로 Gulp.js을 사용하여 이 작업을 자동화합니다.
const gulp = require("gulp");
const webp = require("gulp-webp");
gulp.task("webp", function() {
return gulp.src("src/img/**/*.{jpg,jpeg,png,svg}")
.pipe(webp())
.pipe(gulp.dest("dist/img"));
});
더 나아가려면
Boris가 작성한 이 놀랍도록 완벽한 이미지 최적화 기사를 추천해 드리겠습니다.
페이지 무게를 줄이기 위한 이미지 최적화: 파일 형식, 도구 및 RWD
보리스 샤피라 ・ 11월 8일 '17 ・ 10분 읽기
#performance
#images
#webperf
#webdev
결론
웹사이트를 구축하거나 유지하는 것은 또한 사용자에 대한 책임을 수반합니다. 우리는 또한 데이터 요금제를 적게 사용하는 사용자도 고려해야 합니다.
웹 개발은 최적화 측면에서 많은 가능성을 제공하고 있다고 생각합니다. 이는 사용자 대역폭 사용량을 줄이고 동시에 서버 I/O 시간을 줄임으로써 참여도를 높일 수 있는 완벽한 기회입니다.
그렇기 때문에 WebP는 사용자 경험을 손상시키지 않고 귀중한 바이트를 줄이는 데 있어 좋은 동맹이 될 수 있다고 생각합니다.
행복한 최적화!
Pixabay에서 Pexels님의 표지 사진
Reference
이 문제에 관하여(WebP로 웹 페이지 로딩 속도 향상), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/khalyomede/speed-up-your-web-page-loading-with-webp-24bk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)