목록최적화 (2)

`프론트엔드 개발자` 개형이의 벽돌집

이미지 사이즈를 줄여보자. 웹 이미지 사이즈 최적화 🖼️

❗️ 이미지의 크기를 줄이고 용량을 낮추면 이미지를 좀 더 빠르게 로드할 수 있을텐데… ➡️ 큰 사이즈의 이미지를 더 낮은 용량의 이미지로 변환해보자! 🧐 JPG, PNG보다 WEBP, AVIF?! ❓WEBP WEBP는 구글에서 개발한 이미지 포맷이다. WebP를 사용하면 JPG는 기존 대비 25~34%, PNG는 비손실의 경우 평균 26%(손실 방식의 경우 60~70%) 정도 기존 파일 대비 작아진다고 한다. ❓AVIF WEBP와 마찬가지로 GIF, JPG, PNG등의 전통적인 이미지 포맷을 대체하기 위해 출시되었고 뛰어난 압축 효율을 보이고 있다. WEBP보다 무려 9년이나 뒤에 나온 포맷이기 때문에 성능은 더 좋지만 범용성 측면에서는 문제가 있을 수 있다. 🧐 이미지를 변환해보자! ➡️ Squoos..
최적화 2023. 1. 7. 16:19
Intersection Observer란? Element를 비동기적으로 관찰하는 방법 알아보기

웹 최적화를 공부하다가 Intersection Observer API에 대해 알게되었다. 자바스크립트에 내장된 기능인데 나름 재밌어서 포스팅을 해두고자 한다. Intersection Observer는 어떤 기능을 제공할까? 간단하게 설명하자면 HTML 내부 Element 중 내가 관찰하고 싶은 Element에 Intersection Observer를 걸어두면, 화면 안에 해당 Element가 보여지는 순간 Observer에 내가 지정해둔 콜백 함수가 실행된다. 공식 문서 를 보면 해당 기능을 언제 사용하면 유용한지 친절하게 설명이 되어있다. 첫 번째 줄의 이미지 지연 로딩 (이미지를 한번에 로드하지 않고 필요할 때 로드하는 최적화 기술) 이 최적화를 공부하면서 알게된 기법인데, 해당 포스팅에서는 Inte..
자바스크립트 2022. 8. 3. 17:53
Prev 1 Next