[Korean FE Article] 이미지 최적화에 대한 명확한 가이드
글 링크 : https://velog.io/@sehyunny/the-definitive-guide-to-image-optimization
소개
다들 한 번쯤 웹사이트의 느린 이미지 로딩 때문에 답답했던 경험이 있지 않으신가요? 대부분은 원본 크기의 이미지를 그대로 사용하거나 불필요한 이미지도 한꺼번에 로드하는 등 이미지 최적화가 완전하게 이뤄지지 않은 경우일 텐데요, 이번 글에서는 이미지를 최적화하는 여러 방법을 소개하고 있습니다. 간단하면서도 간과하기 쉬운 팁들을 살펴보면서 이미지 최적화 방법에 대해 알아보시면 좋을 거 같습니다.
tl;dr
이미지 최적화는 좋은 품질의 이미지를 제공하는 동시에 가능한 가장 작은 크기를 유지하는 과정입니다.
이미지 최적화를 통해 사용자 경험 향상, 페이지 성능, SEO 등의 이점을 얻을 수 있습니다.
이미지 최적화 방법에는
<img>
태그 사용, 차세대 형식 활용, alt text, srcset, sizes, 가로세로 비율 보존, fetchpriority, lazy loading 등이 있습니다.이미지 최적화를 자동화해주는 도구에는 Cloudinary, Next.js image, Nuxt image, Gatsby image plugin 등이 있습니다.