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가 작성한 이 놀랍도록 완벽한 이미지 최적화 기사를 추천해 드리겠습니다.





결론



웹사이트를 구축하거나 유지하는 것은 또한 사용자에 대한 책임을 수반합니다. 우리는 또한 데이터 요금제를 적게 사용하는 사용자도 고려해야 합니다.

웹 개발은 최적화 측면에서 많은 가능성을 제공하고 있다고 생각합니다. 이는 사용자 대역폭 사용량을 줄이고 동시에 서버 I/O 시간을 줄임으로써 참여도를 높일 수 있는 완벽한 기회입니다.

그렇기 때문에 WebP는 사용자 경험을 손상시키지 않고 귀중한 바이트를 줄이는 데 있어 좋은 동맹이 될 수 있다고 생각합니다.

행복한 최적화!

Pixabay에서 Pexels님의 표지 사진

좋은 웹페이지 즐겨찾기