다양한 웹 애플리케이션을 위한 QA 반응형 이미지 Polyfill API
Picturefill은 사용자가 장치에 따라 올바른 크기, 화면 해상도 등을 볼 수 있도록 다양한 웹 응용 프로그램에서 사용할 수 있는 사용하기 쉽고 스마트하며 반응이 빠른 API입니다.
반응형 이미지 폴리필 API인 Picturefill은 오픈 소스이며 무료로 사용할 수 있으며 Javascript 및 HTML을 사용하여 개발되었습니다. 주로 응용 프로그램의 프론트 엔드에 사용되며 최종 사용자가 응용 프로그램에 액세스하는 다양한 장치를 가질 수 있는 모든 프로젝트에 큰 도움이 될 수 있습니다.
Picturefill은 브라우저의 Picture 및 Img 요소에 대한 추가 지원 및 기능을 제공합니다. 사용자가 웹 사이트에 액세스하는 장치에 관계없이 이미지가 화면 크기와 해상도에 맞게 자동으로 조정되도록 하는 가장 쉬운 방법 중 하나입니다. Picturefill은 Safari, Internet Explorer 9, Google Chrome Mozilla Firefox 등을 포함한 많은 브라우저에서 테스트되었습니다.
PictureFill 시작하기
NPM을 통해 PictureFill을 설치하는 권장 방법입니다. 다음 명령을 사용하여 설치하십시오.
Install PictureFill via NPM
NPM을 통해 PictureFill 설치
npm install picturefill무료 JavaScript API를 통해 반응형 이미지 추가
오픈 소스 PictureFill 라이브러리를 사용하면 JavaScript 개발자가 반응형 이미지를 사이트에 추가할 수 있습니다. 여기에는 픽셀 밀도 뷰포트가 높은 뷰어가 고해상도 자산을 볼 수 있고 그에 따라 조정됩니다. 유사하게, 브라우저에 동일하지만 다양한 크기의 이미지를 제공할 수 있습니다. Picturefill은 사용자의 현재 뷰포트 크기, 디스플레이 밀도 및 웹사이트 레이아웃의 자산 크기에 대한 최상의 소스를 분류하고 제공합니다. 또한 Picturefill을 사용하면 개발자가 사용자의 뷰포트에 따라 표시할 이미지를 결정할 수 있습니다. 그림 요소의 도움으로 다양한 크기, 확대/축소 수준, 종횡비 등을 지정할 수 있습니다.
무료 JavaScript API를 통해 이미지 중단점 지정
Picturefill의 또 다른 기능은 웹사이트의 소스 이미지에 대해 다양한 해상도 옵션으로 특정 이미지 중단점을 정의하는 기능입니다. Picturefill은 특정 형식에서 지원되지 않는 이미지 형식에 대한 대체 이미지를 결정하는 옵션도 제공합니다. 이렇게 하면 웹사이트에 이미지 표시 오류가 표시되지 않습니다.
