최근에 Google 개발자 도구를 사용하여 웹 사이트에서 감사를 실시했습니다. 내 이미지는 모두 같은 크기 (500 가로 x 세로 300 픽셀)이므로 이미지 크기가 올바른 크기 일 때 이미지 크기를 계산할 필요가 없으므로 이미지 크기 속성을 생략하면 더 좋을 것이라고 생각했습니다.
네트워킹 사용률에서 이미지 크기 지정을 참조하십시오.
A width and height should be specified for all images in order to speed up
page display. The following image(s) are missing a width and/or height:이제 혼란 스럽습니다. 이미 올바른 크기이지만 이미지에 너비 및 높이 속성을 추가해야합니까? 중복되는 것 같습니다.
답변:
브라우저는 데이터를 병렬로 다운로드하고 가능한 빨리 페이지 렌더링을 시작합니다.
크기를 지정하지 않으면 브라우저는 이미지 다운로드가 완전히 완료 될 때까지 이미지의 크기를 모릅니다.
이 지연은 브라우저가 레이아웃을 다시 그리거나 리플 로우하도록하여 페이지로드 시간을 지연시킵니다.
이 문제가있는 이미지가 많을수록 페이지로드 속도가 느려집니다.
HTML 또는 CSS로 이미지 크기를 지정하면 브라우저에서 컨텐츠의 다시 그리기 및 리플 로우를 피할 수 있습니다.
이 때문에 항상 이미지 크기를 지정해야합니다. Google은 이에 대한 몇 가지 팁을 제공합니다.
https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions
브라우저 렌더링 프로세스에 대한 자세한 내용은 다음을 참조하십시오. http://taligarsiel.com/Projects/howbrowserswork1.htm
최신 상태인지 확실하지 않지만 브라우저의 작동 방식과 스타일 시트를 재정의하기 위해 인라인 CSS를 사용하지 않는 이유에 대해 통찰력을 제공합니다.
반응 형 디자인은 일반적으로 너비 또는 높이 속성을 사용하지 않습니다
Google 개발 도구는 가이드이므로 사이트에서 읽은 모든 내용을 시행 할 필요는 없으며 실제로 일부 내용은 구식입니다. 반응 웹 사이트의 대부분은 사용하지 않는 width또는 height그들이 원하기 때문에 이미지가 화면 크기 및 사용하여 고정 폭과 높이를 사용하여 적응하기 위해 <img>사용자 경험을 저해 할 것이며, 구글은 가장 중요한 요소의 하나를 선언하는합니다.
CSS 해결 방법
너비와 높이가있는 블록 레벨 요소를 사용하도록 선택할 수 있습니다. 개인적으로는 사용하지 않지만 여기에서는 블록 레벨에 대해 Google이 말합니다.
이미지 요소 또는 블록 레벨 상위에 치수를 지정하십시오. 요소 자체 또는 블록 레벨 상위에 치수를 설정하십시오. 부모가 블록 수준이 아닌 경우 치수가 무시됩니다. 직계 부모가 아닌 조상에 치수를 설정하지 마십시오.
나는 이것이 다음과 같이 보일 것이라고 상상한다.
정적 디자인 .ic {width:500px;height:500px;}
반응 형 디자인 :
@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens그런 다음 JavaScript 또는 다른 솔루션을 사용하여 시점을 감지하고 4 가지 버전의 이미지를 제공해야합니다. 따라서 반응 형 디자인을 사용하는 경우 너비와 높이를 추가하지 않아도 화면을 보더라도 웹 사이트가 유동적입니다.
max-width:100%;반응 형 디자인을 사용할 때는 일반적으로 CSS에서 사용합니다. 높이와 너비를 사용하면 유동적 업 스케일링 및 다운 스케일링이 비활성화됩니다.
방금 Wordpress Stack Exchange 에 대해 비슷한 질문 에 대답 했습니다 . 여기에 다시 게시하십시오 (관리자 / 운영자 : 이것이 허용되지 않으면 적절한 도움을 줄 수있는 방법을 알려주십시오).
html에서 너비와 높이를 지정해야한다는 의미는 아닙니다. 즉, 적절한 공간을 확보해야하며 이미지가로드 될 때 브라우저에서 페이지를 리플 로우하거나 다시 페인트 할 필요가 없습니다.
또한 치수를 하드 코딩하면 반응 형의 행동이 패배합니다. 레이아웃이 반응하지 않으면 괜찮지 만 반응을 유지하려면 CSS 만 사용하여 결과를 얻을 수 있습니다.
대부분 너비와 너비를 모두 사용
max-width:100하여 작업을 수행하지만 Smashing Magazine 의이 게시물 에는 흥미로운 기술이 있습니다. max-width : 100 % 대신 Padding-Bottom Hack을 사용할 수 있습니다 ."이 기술을 사용하면 높이를 너비를 기준으로 측정 값으로 정의 할 수 있습니다. 패딩 및 여백에는 고유 한 속성이 있으며이를 사용하여 내용이없는 요소의 종횡비를 만들 수 있습니다. 패딩에는이 기능이 있으므로 padding-bottom을 요소의 너비를 기준으로 설정하고 높이를 0으로 설정하면 원하는 것을 얻을 수 있습니다.
다음 단계는 이미지를 컨테이너 안에 넣고 컨테이너를 채우는 것입니다. 이렇게하려면 이미지를 컨테이너 안에 절대적으로 배치해야합니다. "
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}과정은 다음과 같습니다.
따라서 이미지 태그는 "늦게"읽습니다. 그러나 페이지의 형식을 계산하려면 이미지의 크기를 갖는 것이 좋습니다 (그렇지 않으면 브라우저는 1x1, 25x25와 같은 "무작위"크기를 사용합니다 (브라우저가 프로그래밍 한대로)).
따라서 이미지를 읽을 때까지 페이지가 깨져 보이지 않도록하려면 너비 및 높이 속성을 지정하면 브라우저에서 적절한 페이지 레이아웃을 즉시 계산할 수 있습니다. 그렇기 때문에 크기가 같더라도 가지고있는 것이 좋습니다.