통신 이미지 크기, 모범 사례

11

마크 업에서 스타일을 유지하는 현재 모범 사례를 엄격하게 사용하여 HTML 문서를 개발하는 경우 이미지 크기를 가장 잘 전달하는 방법은 무엇입니까?

과거의 모범 사례는 이미지의 크기를 얻기 위해 이미지 다운로드를 기다리는 브라우저보다 빠르게 렌더링되므로 이미지의 이미지 높이와 너비를 원합니다. 그러나 이렇게하면 격리 스타일을 문서에서 위반하는 것 같습니다.

각 이미지에 id 속성을 추가하고 CSS에 높이 / 너비를 넣으시겠습니까? 이것이 인라인 이미지 높이와 너비의 렌더링 보너스를 무효화합니까?

css html images

— 도마
소스

12

IMG 요소의 너비와 높이는 더 이상 사용되지 않으며 브라우저에 이미지의 너비와 높이를 알려주는 가장 좋은 방법입니다. 다른 방법으로 수행하는 것은 중복되고 불필요하며 어리석은 일입니다. 자신이나 브라우저를 위해 불필요한 작업을하지 마십시오. 작동하는 기본 사항을 고수하십시오.

— 존 콘데
소스

1

... ALT빈 태그 또는 준수 검사기가 불만을 제기하더라도 태그도 잊지 마십시오 .

— Talvi Watia

@Tchalvak 죄송하지만 잘못되었습니다. 서버 측 프로그래밍 및 / 또는 JavaScript를 통해 너비와 높이를 동적으로 무시할 수 있습니다. 그리고 논리에 따라 인라인 스타일을 재정의 할 수 없습니다.

— John Conde

어쨌든, 어쨌든 CSS 덮어 쓰기가 잘못되었다고 생각 !important합니다 .css에서 너비 및 높이 속성을 재정의 할 수 있으므로 처음에는 너비 / 높이를 사용하는 것이 좋습니다. 이제 투표권에 갇혀 있습니다. 답을 편집하고 싶었다면 변경하겠습니다. 어깨를 으 s 너무 중요하지 않다.

— Kzqai

8

존 콘데의 대답은 현장에있다. 이미지의 너비와 높이는 스타일이 아니라 내용 의 일부 입니다 . 따라서 여기서 "분리"를 수행 할 필요가 없습니다.

그러나 한 가지 예외 : 이미지 크기에 대한 CSS는 크기 가 모두 같은 이미지가 많은 경우 (예 : 축소판) 유용합니다. CSS 클래스를 사용하여 HTML을 줄이고 개발 속도를 높이는 것이 훨씬 좋습니다.

버튼과 아이콘을 포함한 웹 사이트 디자인에는 CSS 스프라이트가 가장 좋습니다.

— 불만을 품은 염소
소스

+1, CSS 스프라이트는 사이트 속도에 우스운 차이를 만듭니다.

— Kzqai