profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

이미지 최적화, Lazy Load & Intersection Observer API

HTTP 아카이브 연구에 따르면 평균 웹사이트의 반 이상이 이미지로 이루어져 있으며, 이미지의 용량도 다른 콘텐츠에 비해 월등히 높다. 따라서 이미지의 사이즈를 적절히 줄이고, 렌더링 속도를 빠르게 하면, 웹 사이트의 렌더링 성능은 더욱더 빨라질 것이다.하지만 무작정

2022년 4월 13일
·
0개의 댓글
·

이미지 용량 줄여보기

최근, 이미지 용량을 줄일 수 있는 방법에 대하여 자세히 알아보았다. 그러던 중 유용한 방법을 찾게되어서 오늘의 집에서 실제로 사용 중인 이미지로 테스를 해보았다. > 구글에서 이미지를 압축하고 용량을 줄이는 도구를 내놨다. 이미지 압축은 까다롭다. 품질은 그대로 유

2022년 3월 7일
·
2개의 댓글
·

[React] SVG 활용법

이미지는 웹 페이지에서 많은 부분을 차지하는 리소스이다. 홈페이지의 로딩 속도의 가장 영향을 많이 주는 것이 바로 이미지, 사진 파일이다. 그래서 단순히 코드를 몇 줄 줄이는 것보다, 이미지의 용량을 줄이는 것이 웹페이지의 성능을 높이는 데에 더 효율적일 것이다. SV

2022년 2월 14일
·
0개의 댓글
·

JPG / PNG / SVG

현재 다니고 있는 회사에서는 피그마를 이용하여 디자이너와의 협업을 진행하였는데, 이미지를 추출하는 과정에서 jpg, png, svg ..어떤 이미지 타입을 사용할지 항상 고민을 하게된다. 각 파일 형식들은 저마다 용량이나 화질의 차이, 색상 표현의 다양성, 압축방식,

2022년 2월 14일
·
0개의 댓글
·