WebP로 웹 페이지 로딩 속도 향상

이미지가 널리 사용됨

이미지는 대역폭에서 점점 더 많은 공간을 차지합니다.

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님의 표지 사진