2
Page speed는 이미지의 높이와 너비를 알려주므로 이미지의 높이와 너비를 지정하면 어떤 이점이 있는지 말해 줄 수 있습니까?이미지의 이미지 너비와 높이를 지정하는 이유 <img />
일반적으로 항상 src 태그에 이미지의 URL을 제공하며 항상 너비와 높이를 지정하지 않습니다.
A
답변
2
브라우저는 너비와 높이를 미리 지정하여 첫 번째 통과 페이지의 모든 요소를 해당 위치와 크기로 렌더링합니다. 크기를 지정하지 않으면 파일을 인식하기 전에 파일을 다운로드 한 다음 페이지의 모든 구성 요소를 다시 렌더링해야하므로 시간이 오래 걸립니다. 또한 사용자에게 덜 부드러운 경험을 제공합니다.
7
Google Pagespeed's pages themselves explain 이미지가로드되기 전에 이미지의 크기가 지정되면 브라우저는 레이아웃의 이미지에 필요한 공간을 예약 할 수 있습니다.
모든 이미지의 너비와 높이를 지정하면 불필요한 리플 로우 및 다시 칠할 필요가 없기 때문에 렌더링 속도가 빨라집니다.
1
관련 문제
- 1. 이미지의 너비와 높이를 가져옵니다.
- 2. 이미지의 너비와 높이를 어떻게 얻습니까?
- 3. .animate()의 <img>의 너비와 높이에 문제가 있습니다.
- 4. 이미지의 너비와 높이를 어떻게 얻을 수 있습니까?
- 5. 이미지의 너비와 높이를 CSS 배경으로 사용하기
- 6. 버튼 + 이미지 - 이미지의 너비/높이를 지정하는 방법은 무엇입니까?
- 7. 동적으로로드 된 이미지의 너비와 높이를 얻는 방법은 무엇입니까?
- 8. attachment_fu의 이미지 너비와 높이를 어떻게 확인합니까?
- 9. Javascript getElementById <img>
- 10. <img .... />과 <img ...></img> 사이의 xhtml의 차이는 무엇입니까?
- 11. PHP - <img>
- 12. CSS로 이미지 너비와 높이를 100 %로 설정하는 방법은 무엇입니까?
- 13. XNA 너비와 높이를 Vector2로
- 14. 업로드 할 때 이미지의 너비와 높이를 확인할 수있는 방법이 있습니까?
- 15. 나침반 : 스프라이트에 각 이미지의 너비와 높이를 더한 것
- 16. 이미지의 최대 너비와 높이를 설정하는 CSS 또는 HTML 도움말
- 17. 너비와 높이가 설정되지 않은 img 요소의 너비와 높이를 얻는 방법은 무엇입니까?
- 18. 에코가 <img> 태그
- 19. <img> 태그 데이터에 액세스
- 20. tinymce : 제출시 <img> 태그를 바꿔달라고
- 21. 바꾸기 <a><img> 태그로 연결
- 22. 픽셀 너비와 높이를 얻는 방법?
- 23. firefox에서 너비와 높이를 업데이트하지 않습니다
- 24. html5 세로 간격 문제 <img>
- 25. 이진 이미지 콘텐츠 가져 오기 <IMG>
- 26. 에 관한 질문 <img> 및 미리보기 이미지
- 27. <img title> 툴팁을 사용자 정의하십시오
- 28. DOM에 <img> 삽입 감지/차단
- 29. C에서 .bmp 이미지의 너비와 높이 찾기
- 30. Jquery perform 클릭하십시오. <img>
예, 감사합니다. pekka. – kobe