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