HTML5의 그림 요소에 대한 자세한 설명과 반응형 이미지 처리

소위 반응형 디자인은 다양한 화면 해상도, 다양한 픽셀 밀도 비율, 다양한 폭을 가진 단말 장치에서 웹 페이지 레이아웃을 적응적으로 조정할 수 있음을 의미합니다. 반응형 디자인의 본래 의도는 원래의 PC 웹사이트를 모바일 단말기와 호환되게 만드는 것입니다. 대부분의 반응형 웹페이지는 미디어 쿼리와 다양한 스타일의 CSS 파일 로딩을 통해 구현됩니다. 이러한 종류의 유연한 레이아웃은 다양한 장치 터미널에서 웹사이트의 레이아웃을 더욱 합리적으로 만듭니다.

반응형 디자인에는 많은 장점이 있지만 단점도 많습니다. PC와 모바일 단말이 동일한 웹사이트에 접속하기 때문에 PC는 트래픽 제한을 신경 쓸 필요가 없지만 모바일 단말은 이를 무시할 수 없다.

다양한 단말기 모델의 화면 너비와 픽셀 밀도에 적응하기 위해 일반적으로 다음 방법을 사용하여 이미지의 CSS 스타일을 설정합니다.

 <스타일> img{ 최대 너비:100% 높이:자동 }</style>

이미지가 상위 요소의 너비를 초과하지 않도록 이미지의 최대 너비를 100%로 설정합니다. 상위 요소의 너비가 변경되면 이미지의 너비도 자동으로 변경됩니다. 이미지의 너비가 변경되면 이미지의 높이는 자체 너비 대 높이 비율에 따라 조정됩니다.

이런 식으로 모바일 기기에서 반응형 웹페이지의 이미지에 접근하면 이미지의 해상도만 조정하고 큰 이미지를 PC에 다운로드하게 되는데, 이는 트래픽과 대역폭을 낭비할 뿐만 아니라 웹페이지 속도도 저하시킵니다. 여는 속도는 사용자 경험에 심각한 영향을 미칩니다.

1. <picture>는 HTML5의 새로운 요소입니다.
2. <picture> 요소가 현재 <audio> 및 <video> 요소와 협력하면 반응형 이미지 작업 프로세스가 향상됩니다. 여러 <source> 태그를 내부에 설정하여 다양한 이미지 파일 이름을 지정할 수 있습니다. ;
3. <picture>는 다양한 조건에 따라 다양한 이미지를 로드할 수 있습니다. 이러한 조건은 창의 현재 높이(뷰포트), 너비(너비), 방향(방향), 픽셀 밀도(dpr) 등이 될 수 있습니다.

다음 밤나무에서는 다양한 화면 너비에 대해 다양한 이미지가 로드됩니다. 페이지 너비가 320px에서 640px 사이이면 minpic.png가 로드되고, 페이지 너비가 640px보다 크면 middle.png가 로드됩니다.

 <사진> <소스 미디어=(최소 너비: 320px) 및 (최대 너비: 640px) srcset=img/minpic.png> <소스 미디어=(최소 너비: 640px) srcset=img/middle.png> < img src=img/picture.png <소스 미디어=(최소 너비: 320px) 및 (최대 너비: 640px) 및 (방향: 가로) srcset=img/minpic_landscape.png> <소스 미디어=(최소 너비: 320px) 및 (최대 너비: 640px) 및 (방향: 세로) srcset=img/ minpic_portrait.png> <소스 미디어=(최소 너비: 640px) 및 (방향: 가로) srcset=img/middlepic_landscape.png> <소스 미디어=(최소 너비: 640px) 및 (방향: 세로) srcset=img/middlepic_portrait.png> <img src=img/picture.png <소스 미디어 =(최소 너비: 320px) 및 (최대 너비: 640px) srcset=img/minpic.png,img/minpic_retina.png 2x> <소스 미디어=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <소스 유형=image/webp srcset=img/picture.webp> <img src=img/picture.png 크기=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

6. 다음 예에서 크기 속성을 추가합니다. 창 너비가 800px 이상인 경우 해당 버전의 이미지를 로드합니다.

 <소스 미디어=(최소 너비: 800px) 크기=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w><img src=picture-160 .png 크기=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

호환성:

현재 Chrome, Firefox 및 Opera만 호환성이 좋습니다. 구체적인 호환성은 그림에 나와 있습니다.

1. 사용 가능한 대역폭이 완전히 활용되도록 적절한 크기의 이미지 파일을 로드합니다.
2. 다양한 너비의 레이아웃 변경 사항을 수용하기 위해 다르게 자르고 가로 세로 비율이 다른 이미지를 로드합니다.
3. 더 높은 픽셀 밀도를 로드하고 더 높은 해상도의 이미지를 표시합니다.

1. <picture></picture> 태그를 생성합니다.
2. 이러한 태그 내에서 기능을 수행하는 데 사용할 <source></scource> 태그를 만듭니다.
3. 너비(최대 너비, 최소 너비), 방향(방향) 등과 같이 원하는 특성을 포함하려면 미디어 속성을 추가하세요.
4. srcset 속성을 추가합니다. 속성 값은 해당 이미지 파일 이름이고 이를 로드합니다. Retina 디스플레이와 같이 다양한 픽셀 밀도를 제공하려는 경우 srcset 속성에 추가 파일 이름을 추가할 수 있습니다.
5. 대체 <img> 태그를 추가하세요.

위의 샘플 코드에서 볼 수 있듯이 js 및 타사 라이브러리를 도입하지 않고 CSS에 미디어 쿼리를 포함하지 않고 <picture> 요소는 HTML만을 사용하여 반응형 이미지를 선언할 수 있습니다.

<picture> 태그 자체에는 속성이 없습니다. 놀라운 점은 <picture>가 <source>의 컨테이너로 사용된다는 것입니다.

비디오 및 오디오와 같은 멀티미디어를 로드하는 데 사용되는 <source> 요소가 이미지를 로드하도록 업데이트되었으며 몇 가지 새로운 속성이 추가되었습니다.

단일 이미지 파일 경로를 허용합니다(예: srcset=img/minpic.png).

또는 픽셀 밀도로 설명되는 쉼표로 구분된 이미지 경로입니다(예: srcset=img/minpic.png, img/minpic_retina.png 2x). 1x 설명은 기본적으로 사용되지 않습니다.

CSS @media 선택기(예: media=(min-width: 320px))에서 볼 수 있듯이 검증된 미디어 쿼리를 허용합니다.

이전 <picture> 구문 예제에서 사용되었습니다.

단일 너비 설명(예: 크기=100vw) 또는 단일 미디어 쿼리 너비 설명(예: 크기=(최소 너비: 320px) 100vw)을 받습니다.

또는 쉼표로 구분된 미디어 쿼리 너비 설명(예: size=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)) 마지막 항목이 기본값으로 사용됩니다.

지원되는 MIME 유형을 허용합니다(예: type=image/webp 또는 type=image/vnd.ms-photo).

브라우저는 이러한 힌트와 속성을 기반으로 정확한 이미지 리소스를 로드합니다. 태그 목록 순서에 따라. 브라우저는 첫 번째 적절한 <source> 요소를 사용하고 후속 <source> 태그를 무시합니다.

<img> 요소는 <picture> 내부에서 사용되어 브라우저가 이를 지원하지 않거나 일치하는 소스 태그가 없을 때 표시됩니다. <picture> 내에 <img> 태그를 사용해야 합니다. 잊어버리면 이미지가 표시되지 않습니다.

기본 이미지 표시를 선언하려면 <img>를 사용하세요. <img> 태그를 <picture> 끝에 배치하면 브라우저는 <img> 태그를 찾기 전에 <source> 선언을 무시합니다. 이 이미지 태그에는 alt 속성도 작성해야 합니다.

이 글은 다른 글들을 많이 참고했습니다. 사진에 대한 소개는 모두 여기에 있으니 지금 해보세요~

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.