HTML에서 IMG의 높이 및 너비 속성을 지정해야합니까?
이미지 태그로 표시 할 이미지의 높이와 너비를 알고 있다면 높이와 너비 속성을 포함해야합니까, 아니면 CSS에 정보를 넣어야합니까? 아니면 둘다?
전의.
<img src="profilepic.jpg" height="64" width="64" />
또는
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
또는
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
에 따르면 구글 페이지 속도 , 당신은 항상 이미지 태그의 폭과 높이를 정의해야합니다. 그러나 유효성을 검사하기 위해 스타일 태그를 사용할 수 없습니다.
또한 항상 실제 이미지와 동일한 높이와 너비를 지정해야 브라우저가 크기 조정과 같은 수정 작업을 수행 할 필요가 없습니다.
나는 그것을하는 것이 좋습니다
<img src="..." height="20" width="50">
편집 : 누군가가 코멘트에서 속성을 추가하지 않는 것이 더 빠를 것이라고 제안했습니다. Google에 따르면 (브라우저 지식이 전부는 아닙니다) :
포함하는 문서에 치수가 지정되지 않았거나 지정된 치수가 실제 이미지의 치수와 일치하지 않는 경우 브라우저는 이미지를 다운로드 한 후 리플 로우 및 다시 그리기를 요구합니다. 리플 로우를 방지하려면 HTML 태그 또는 CSS에서 모든 이미지의 너비와 높이를 지정하십시오. - 더 읽기
이를 감안할 때 CSS에서 img 크기를 수행 할 수 있지만 유효성을 검사하려면 인라인이 아닌 CSS 파일에서 수행해야합니다.
BTW, Google Page Speed는 페이지를 더 빠르게 렌더링하는 데 초점을 맞춘 일련의 팁입니다.
당신은 항상 지정해야 height하고,이 width브라우저가 이미지가 다운로드 된 경우에도 전에 페이지를 배치하기 위해 경우에만 이미지.
HTML 4.01 사양 의 13.7 이미지, 개체 및 애플릿의 시각적 표현을 참조하십시오 .
height 및 width 속성은 사용자 에이전트에게 이미지 또는 개체의 크기에 대한 아이디어를 제공하여 이미지 데이터를 기다리는 동안 공간을 예약하고 문서 렌더링을 계속할 수 있습니다.
그들은되는 권장 하고 있지 필요 하지만 당신은 정말, 정말를 지정해야합니다 ;-)
또한 지정한 치수가 실제로 이미지의 치수와 일치하는지 확인하십시오.
400x300(!) 이미지가 실제로 4000x300095 % 품질 과 비슷 하기 때문에 페이지 다운로드를 기다리는 것보다 더 나쁜 것은 없습니다 .
예, 크기를 지정해야합니다. 따라서 사용자 에이전트는 이미지가 완전히로드되기 전에 크기를 미리 알고 있으므로로드 된 이미지의 크기에 의존하는 레이아웃이 잠재적으로 깨져 보일 수 없습니다. 또한 PNG를 삽입하기 위해 IE6의 필터 속성에 의존하는 경우 해당 치수 가 필요합니다.
이 답변은 현재 날짜가 있으며 2009 년에 현대 브라우저에서했던 것과 동일한 권장 사항을 만들지 않을 것입니다.
어떤 것을 사용하든 상관 없지만 하나만 사용하는 것이 좋습니다.
이전 브라우저와 스타일이 비활성화 된 사람들과 더 호환되기 때문에 CSS 솔루션보다 속성을 권장합니다.
실제로 지정할 필요가 없습니다. 따라서 w3c 사양 에 따라 이미지 파일에 포함 된 기본값을 무시하고 브라우저에서 읽는 데만 사용합니다. 사용하면 원본 이미지를 주어진 크기로 조정하므로 브라우저에 추가 계산이 필요합니다.
height 및 width 속성은 사용자 에이전트에게 이미지 또는 개체의 크기에 대한 아이디어를 제공하여 이미지 데이터를 기다리는 동안 공간을 예약하고 문서 렌더링을 계속할 수 있습니다.
<img src="profilepic.jpg" alt="image" />
'developer tip' 카테고리의 다른 글
| Mac에서 bashrc 파일은 어디에서 찾을 수 있습니까? (0) | 2020.10.27 |
|---|---|
| Java는 0 년이 윤년이지만 0 년은 존재하지 않았다고 말합니다. (0) | 2020.10.27 |
| dict를 올바르게 하위 클래스로 만들고 __getitem__ 및 __setitem__을 재정의하는 방법 (0) | 2020.10.27 |
| 확장 가능한 목록보기에서 모든 하위 항목 확장 (0) | 2020.10.27 |
| 재생성 된 활동에 Retrofit 콜백을 구현하는 모범 사례? (0) | 2020.10.27 |