질문이있습니다.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
예를들어 이런 사이트의 형식입니다. https://www.pinterest.com/seanbiehle/finterest/
답변 1
0
안녕하세요, Jon 님,
이미지 사이즈(비율)가 제각각인 경우 layout shift를 피하는 방법에 대해서 질문을 주셨는데요,
스태틱한 이미지는 자체 사이즈를 알 수 있으니 생략하고 api를 통해 이미지 주소를 전달받은 경우에 대해서 말씀드리겠습니다.
이런 경우 몇가지 방법들을 생각해볼 수 있을 것 같은데,
먼저, api에서 이미지 주소를 받을 때, 이미지 사이즈도 같이 전달 받는 방식입니다.
클라이언트에서는 api에 있는 가로, 세로 정보로 비율을 계산해서 영역을 잡아줄 수 있습니다.
두 번째 방법은, 첫 번째 방법과 유사한데,
이미지 주소에 비율 또는 사이즈에 대한 정보를 명시해주는 겁니다.
www.img.co/100x100/a1b2c3d4.png
이런식으로 말이죠.
예를 들어주신 핀터레스트의 경우 위의 두 번째 방법을 사용하고 있습니다.
https://i.pinimg.com/474x/bb/f2/5d/bbf25d30ce75971f2f8ba531c51d2eae.jpg
이미지 주소가 위와 같은데 여기서 474x가 비율에 대한 정보인 것으로 보입니다.
그 외에도 몇가지 방법이 더 있겠지만,
지금 생각나는 것은 이것 뿐이네요.
답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
예제 프로젝트 관련 질문입니다.
0
94
1
개발환경에 대한 안내
1
181
2
layout shift가 아주 약간 일어나는 부분에 대해
0
329
2
3-4) 이미지 사이즈 최적화 과정에서 img 태그 작동 안되는 문제
0
321
2
Material--icons_4.0.0.woff2
0
225
1
코드 실행 시 에러 관련 질문드립니다!!
1
590
1
npm run serve가 동작하지 않아요
0
715
1
lighthouse 측정에 관해 질문드려요
2
1019
1
webp 확장자질문
1
428
1
이미지 지연 로딩 질문 있습니다!
2
461
1
폰트 포멧에 대한 질문입니다.
1
399
2
궁금한 점이 있어요
1
357
1
css font-face unicode-range
1
367
1
woff2 포멧 IE에서 사용가능 여부
1
431
2
3-3 이미지 지연 로딩 코드 어디서 보나요?
1
333
1
img 태그가 작동이 되지 않습니다.
1
418
1
질문있습니다~
2
231
1
이미지 오류 요청 오류
1
417
1
안녕하세요~ 질문드립니다
1
315
1
궁금한점이 있습니다.
1
241
1
강의자료
1
211
2
안녕하세요 리액트 최적화 관련하여 질문드립니다.
2
1469
1
선생님 질문이 하나 있는데요~~
1
386
2
정말유익해요
2
223
1