반응형 이미지는 이미지를 보는 기기의 다양한 특성에 맞춰 조정되는 이미지입니다. 반응형 이미지를 올바르게 적용하면 웹사이트 성능과 사용자 경험을 향상시킬 수 있습니다.
이 문서에서는 HTML을 사용하여 반응형 이미지를 만드는 방법을 설명합니다. srcset 및 요소 그림. 검증 이동 중에도 코딩할 수 있습니다: Android용 최고의 HTML 편집 앱.
로압 스리유에스
반응형 이미지를 사용해야 하는 이유는 무엇인가요?
소프트웨어 엔지니어들은 웹 페이지를 만들 때 브라우저가 반응형 이미지를 어떻게 처리할지 고려하지 않았습니다. 결국 사용자들은 데스크톱이나 노트북 컴퓨터에서만 웹에 접속하는 경우가 많았습니다. 물론, 요즘은 그렇지 않습니다.
~에 따르면 Statista 전 세계 인터넷 사용자의 90% 이상이 모바일 기기를 사용하여 웹을 탐색합니다. 대부분의 웹 페이지에는 이미지가 포함되어 있으며, 이러한 이미지는 웹 성능을 측정하는 데 사용되는 지표 중 하나입니다. 성능을 향상시키려면 이미지를 반응형으로 최적화해야 합니다. 확인해 보세요. 모든 전문가가 사용하는 인기 웹 개발 도구.
HTML에서 반응형 이미지를 만드는 방법
반응형 웹 디자인은 사용 중인 기기의 특성에 따라 레이아웃이 변경될 수 있을 뿐만 아니라 콘텐츠도 변경될 수 있음을 의미합니다. 예를 들어, 고해상도(2배) 화면에서는 선명도를 보장하기 위해 고해상도 그래픽이 필요합니다. 가로 세로 비율이 50%인 이미지는 브라우저 너비가 800픽셀일 때만 제대로 작동할 수 있지만, 좁은 휴대폰에서는 상당한 영향을 미치며, 더 작은 화면에 맞게 크기를 줄여도 대역폭 문제는 여전히 존재합니다.
이 품목은 다음과 같은 특징을 가지고 있습니다. IMG 최신 브라우저는 콘텐츠 다운로드, 디코딩 및 표시를 지원하기 때문에 다양한 이미지 형식을 지원합니다. 다양한 기기에서 작동하는 이미지를 임베드하는 것은 데스크톱용 이미지를 임베드하는 것과 크게 다르지 않으며, 몇 가지 사소한 변경만으로도 좋은 인상을 줄 수 있습니다.
반응형 이미지는 두 가지 관점에서 처리할 수 있습니다. 즉, 동일한 이미지를 서로 다른 크기로 표시하거나 디스플레이 특성에 따라 서로 다른 이미지를 표시하는 것입니다. 또는 이 두 옵션은 반응형 이미지를 다르게 처리하지만, 규칙 집합에 따라 특정 대안에서 하나의 이미지를 표시합니다.
srcset 사용하기
이 기능을 사용하면 다음을 수행할 수 있습니다. 표준 HTML에서는 이미지 파일을 하나만 지정할 수 있습니다. 기기 크기에 따라 다른 이미지를 표시하려면 다음을 사용해야 합니다. srcset.
통사론:
이 기능을 사용하면 다음을 수행할 수 있습니다. srcset 브라우저는 추가 소스 파일을 제공함으로써 사용 중인 화면 크기에 가장 적합한 이미지를 선택합니다.
이루어져 있다 srcset 이는 세 부분으로 구성됩니다. 원본 이미지의 경로를 지정하는 이미지 파일 이름, 영역, 이미지의 실제 너비입니다.
srcset을 크기와 함께 사용하기
사용 시 문제점 srcset 브라우저가 어떤 이미지를 표시할지 제어할 수 없습니다. srcset과 sizes를 함께 사용하면 이 문제가 해결됩니다. size는 이미지의 최적 크기를 나타내는 미디어 조건 집합을 지정합니다.
이제 태그를 다시 쓸 수 있습니다. 위와 같습니다.
크기는 미디어 조건(이 예에서는 최대 너비: 600px)으로 구성되며, 이는 뷰포트의 너비를 나타내고, 공백과 슬롯 너비(480px)는 미디어 조건이 참일 경우 이미지가 채울 공간을 지정합니다.
여기서 브라우저는 먼저 기기의 디스플레이를 확인하고 미디어 상태와 비교합니다. 조건이 참이면 슬롯의 디스플레이를 확인하고 이미지를 로드합니다. srcset 너비가 같거나 그보다 더 큰 이미지입니다.
또한 다음을 포함하고 있다는 점에 유의하십시오. SRC srcset과 sizes를 지원하지 않는 브라우저에서 참조할 수 있는 이미지를 제공합니다.
당신을 허용 srcset 또한 설명자를 사용하여 다양한 해상도로 이미지를 렌더링합니다. x.
이 예에서 기기의 해상도가 CSS당 2픽셀 이상이면 브라우저는 cute-cat-high1.jpg 이미지를 로드합니다.
srcset 속성은 img 요소의 동작을 개선하여 다양한 기기 기능에 맞게 여러 이미지 파일을 더 쉽게 제공할 수 있도록 합니다. 기본 CSS 함수인 image-set과 마찬가지로, srcset 브라우저는 기기의 기능에 따라 가장 적합한 이미지를 선택합니다. 예를 들어, 2배 디스플레이에서는 2배 이미지를 사용하고, 앞으로는 제한된 대역폭 네트워크를 사용할 때 2배 기기에서는 1배 이미지를 사용할 수도 있습니다.
하드웨어 및 소프트웨어 픽셀
이 솔루션의 문제점은 이미지가 기기의 픽셀 밀도에 따라서만 반응한다는 것입니다. 픽셀 밀도는 하드웨어 픽셀과 소프트웨어 또는 CSS 픽셀의 비율입니다. 기기 픽셀은 화면의 실제 빛점인 반면, 소프트웨어 또는 CSS 픽셀은 측정 단위입니다. 픽셀 밀도는 기기의 해상도를 결정합니다.
반응형 이미지를 제공할 때는 해상도만 고려하지 마세요. 화면 크기도 중요합니다. 그렇지 않으면 불필요하게 크거나 픽셀화된 이미지를 업로드하게 될 수 있습니다.
사용
특징 여러 요소를 감싸는 HTML 요소입니다. 다양한 소스 파일과 요소가 포함되어 있습니다. 당신이 만드는 동안 이미지는 동일한 이미지의 다양한 크기를 제공하여 반응형으로 제작되므로 표시된 이미지의 실제 변화입니다.
통사론:
큰 가로 이미지가 있는 상황을 생각해 보세요. 데스크톱에서는 이미지가 비율에 맞게 표시되지만 모바일에서는 이미지가 급격히 줄어들어 이미지의 요소가 매우 작아 보입니다. 반응하지 않는 이미지는 사용자 경험을 저하시킵니다. 테마를 사용하면 모바일을 사용할 때 브라우저에서 클로즈업으로 전환하도록 설정할 수 있습니다.
첫 번째 방법과 마찬가지로 속성에는 다음이 포함됩니다. 미디어 상태를 제공하는 데 사용할 수 있는 미디어 속성입니다. 예를 들어, 뷰포트 너비가 639픽셀 이하인 경우 브라우저는 "cute-cat-480w.jpg"를 표시합니다. 이 속성은 srcset 보고 싶은 이미지 파일의 경로를 선택하고 SRC 기본 이미지.
WebP 이미지 형식으로 되돌리기
이 기능을 다루는 또 다른 것 WebP와 같은 최신 이미지 포맷에 대한 백업 기능을 제공한다는 점이 장점입니다. WebP 이미지는 성능이 뛰어나고 크기가 작은 경우가 많으며 빠른 웹 경험을 제공합니다. 따라서 웹사이트에 WebP 이미지를 사용하는 것이 좋습니다. 하지만 모든 브라우저가 WebP 이미지를 지원하지는 않는다는 문제가 발생할 수 있습니다. 브라우저가 WebP를 지원하지 않더라도 대체 이미지를 로드할 수 있으므로 이런 문제가 발생하지 않습니다.
왜 CSS가 아닌 HTML로 프런트엔드 이미지를 만들어야 할까요?
CSS는 반응형 이미지를 처리하는 데 강력한 옵션을 제공합니다. 왜 사용하지 않을까요? 웹 브라우저는 CSS를 파싱하기 전에 이미지를 미리 로드합니다. 따라서 사이트의 JavaScript가 이미지를 적절히 변경하기 위해 뷰포트를 감지하기 전에 원본 이미지가 미리 로드됩니다. 따라서 HTML을 사용하여 반응형 이미지를 처리하는 것이 가장 좋습니다.
가능한 한 최상의 이미지 품질을 목표로 하세요.
HTML을 사용하여 반응형 이미지를 만드는 방법을 살펴보았습니다. و 이 글에서 반응형 이미지 렌더링은 일반적으로 화면 크기에 맞춰 이미지 크기와 해상도를 고려합니다. 잘못 적용하면 이미지 품질이 저하될 수 있습니다. 최소한의 리소스로 최적의 사용성을 제공하는 이미지를 선택하세요. Android에서 HEIC 사진을 열고 변환하는 방법.
