- 분류 전체보기 (145)
반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 29 | 30 | 31 |
Tags
- reflow
- $fetch
- 웹 퍼포먼스 도구
- vue composable 함수
- vue draggable 차트 안나옴
- d3 지도 확대/축소
- nuxt universal rendering
- Learning React
- ecmascript modules(esm)
- d3 지도
- ToDo
- img 태그 sizes
- vue 컴포저블 함수
- 인터넷 거버넌스
- 함수형 프로그래밍
- d3 지도 타입스크립트
- commonjs와 ecmascript modules(esm)
- vuedraggable
- img 태그 srcset
- in-memory pm2 is out-of-date
- d3 지도 툴팁
- cloud firestore id auto increment
- 이미지 성능 최적화
- vue3 drag and drop
- pm2 업데이트 에러
- git
- pm2 버전 충돌
- repaint
- component is already mounted please use $fetch instead.
- firebase id 자동
Archives
- Today
- Total
목록이미지 성능 최적화 (1)
빵 입니다.
<img /> 속성의 srcset과 sizes
회사 홈페이지 SEO 개선을 하면서 성능에 대해 관심이 많아졌다.이미지를 어떻게 로드해서 어떻게 보여줄지도 큰 관심거리다. 태그의 srcset, sizes 속성을 이용해 기기 해상도나 뷰포트 크기에 따라 적절한 이미지를 선택해서 로딩할 수 있다.구글링해봤는데 정리가 잘 된 자료가 있었고, 아래에 요약해서 정리했다. 더 자세히 알고 싶다면 원본글을 보시는 걸 추천합니다~~~ 📌 srcset브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스를 정의// 사용 예시📍 언제 사용할까 1. 브라우저 뷰포트 너비에 대한 이미지 소스를 지정 2. 디스플레이 해상도에 대한 이미지 소스를 지정 3. 브라우저 뷰포트 너비에 대한 이미지 소스와 디스플레이 해상도에 대한 이미지 소스를 함께 지정 1. 브라..
프론트엔드/SEO
2025. 5. 21. 08:57