[프론트엔드] 이미지 최적화하기
이미지 마크업 최적화 브라우저에서 이미지를 불러와 다운로드하게 될 때 용량이 작을수록 최적화를 할 수 있다. 최적화 하는 방법에 대해 알아보자 정적이미지 최적화 히어로이미지 같은 정적이미지의 경우 확장자를 webp로 사용하여 저장하거나 Tinypng 사이트를 이용하여 용량을 줄인적 있다. webp 변환 TinyPng 사이트 이용하기Webp 확장자 사용하기webp확장자를 사용할 경우 png나 jpg 확장자 보다 일반적으로 50%의 용량을 줄일 수 있게된다. 현재 거의 모든 브라우저에서 지원함으로 사용할 수 있다. 현재 ie를 제외한 모든 브라우저에서 지원함으로 webp를 사용하자 sharp 라이브러리를 사용하여 확장자를 webp로 변경 할 수 있다. 링크: https://www.npmjs.com/packa..
프론트엔드
2023. 3. 8. 22:56
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- node 버전 마이그레이션
- 관심사 분리하기
- storybook react is not defiend 해결
- 자바스크립트
- 백준 1600번
- 1600 파이썬
- React useMemo
- storybook scss이슈
- 미로탈출 명령어
- 선언적 UI
- nestjs 배포하기
- 에러핸들링
- javascript
- 백준 22862
- suspense 장점
- serverless nestjs
- React useCallback
- serverless 배포
- CSS
- 서버사이드 error handling
- 서비스 디자인 패턴
- useCallback과 useMemo 사용
- react suspense
- 불량 사용자 자바스크립트
- node version yarn berry
- nextjs errorboundary
- 표현 가능한 이진트리
- nextjs 에러핸들링
- 가장 긴 짝수 연속한 부분 수열
- storybook scss import
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함